written on 12/31/2017

Vue.js review of 2017

Throughout this year, Vue.js has grown so much and many changes were introduced which resulted in a lot of hype in Vue.js. In this article, we will summarize what happened to Vue.js and the ecosystem this year.

After the article Vue in 2016 by Evan You, the author of Vue.js, the goals for Vue.js were set for 2017. It had 37,664 stars on GitHub and was rising in popularity dramatically. This trend is still ongoing and Vue.js has now more than 78,000 stargazers on GitHub ⭐ The Vue.js community contributed 965 commits to the core of Vue.js in the year 2017 (overall there are 2475 commits) and four minor versions of this library were released (v2.2.0, v2.3.0, v2.4.0, v2.5.0; more on this later). Rapid growth in stars and popularity are seen in this year. Let’s see if this continues in 2018 🚀

Number of releases per monthNumber of releases per month

Another minor mention should be given to the awesome-vue repository where a lot of useful libraries, videos, and other information are shared with the community. In this repository, there were 941 commits this year. Overall, there have been 1786 commits.

In the last year’s article, Evan You addressed different pain points which he wanted to tackle this year. Those have been:

  • Improving the test story
  • Polishing the development experience, this included better Server-Side Rendering (SSR) feedback, performance profiling in the development tools and improved command line templates
  • Better discoverability of the ecosystem
  • Native rendering improvements in comparison to React Native
  • Emerging web platform features, to support newer ECMAScript standards

A lot of those things have been fulfilled but let’s start with analyzing the changelog of Vue.js this year. Firstly we will spotlight the core and then strive into the ecosystem. The first minor version released this year was version 2.2.0. It included several features and improvements like:

  • key in v-for for components is now required. In general, this change improves performance of list renderings in Vue.js
  • Vue.js Single File Components (SFC) now require having tags being closed
  • Error handling is done now via Vue.config.errorHandler . This enables better error handling for the Vue.js system, documentation
  • Introducing more Server-Side Rendering options for error handling and v-model customizations
  • Performance profiling was introduced with Vue.config.performance, documentation

Generally this minor version of Vue.js improved performance and error handling via the public Vue.js APIs. The release happened in late February 2017 and next minor version 2.3.0 was already on its way and released at the end of April with the following changes:

  • Massive Server-Side Rendering improvements: Better differentiation between SSR output and Non-SSR output via custom data attributes, better error handling and better loading options for asynchronous components
  • The biggest change of Server-Side Rendering was the release of the SSR Guide though. You can find it here
  • Also, the API brought .sync back, documentation

Overall this was probably the biggest release for Server-Side Rendering. It improved the documentation about this topic and is helping new developers to get up to speed really fast ⚡

Next version, to be released, was version 2.4.0 and it got published at the end of June with the following changes:

  • Full asynchronous component support, this means you are not bound anymore to code splitting on route level but can use it on component level, this makes it possible to reduce chunks created by webpack
  • Easier creation of wrapper components via $attrs and $listeners
  • Server-Side Rendering performance was improved by factor 2 to 8 depending on how much your components can be optimized

Also, this release was heavily focused on Server-Side Rendering, though some other improvements like better code splitting make it easier to write smaller applications which load faster for the user.

The final release of this year was version 2.5.0. It was released in October and there have been patches going on constantly til Christmas. This release introduced the following changes:

  • Improved errorCaptured hook in the public API, documentation
  • TypeScript declaration improvements. You can find a blog article about the changes here but in general, more types and more explicit types are available, also the types for the ecosystem libraries were updated
  • Functional components are now supported in templates, so you can basically use Vue Single-File Components (SFC) to render functional components, docs

Summarized this release have also been major improvements in error handling, functional components, and TypeScript.

After all the changes happening in the releases this year were quite nice. What is really nice to see is that APIs stayed consistent over this year and just some APIs were added to the framework itself. A lot more attention was paid to Error Handling, Server-Side Rendering and TypeScript support which makes sense for me personally and also shows that Vue.js is really stable right now.

To see if the goals of the last year are achieved we have to dig a little bit deeper into the Vue.js ecosystem. First of all, we start with the internal publications of packages and libraries. Probably the biggest in-house publication is vue-test-utils. It is still in beta, but usable and the Vue.js team is still working hard on this and the documentation is top-notch 👌 Otherwise, another template was released which is called pwa. It supports PWAs out of the box and is really similar to the webpack template. Both of them are kind of up-to-date and support modern tools around it out of the box. Another big change was included in the development tools extension. It is working now in Firefox. Otherwise there were no big changes for the dev tools but they were awesome already. Another library which is currently being upgraded is eslint-plugin-vue. This plugin will be basically a linter for Vue.js Single File Components (SFC) and will support the newly created style guide. With version 4.0.0 these changes will be implemented. Currently, the package is in beta.4. The team is also working on a cookbook on what are the best patterns to create Vue.js applications. You can find the first version at this link (it is far away from version 1). Also, the Vue.js CLI is planned to be changed with version 3.0.0, but it is still in the planning/thinking phase on how to do proper changes with the basic architecture implemented.

Outside the internal changes and releases, there was also a lot happening at external parties. A lot of UI frameworks had major releases or other exciting news like that the vuetify author is working full-time now on the library nowadays. You can find a lot of resources at the awesome-vue repository like Element, Framework7, Onsen UI, vuetify, vue-material or quasar. Also, another library or framework to keep eyes on is Nuxt.js. This is a full framework to build applications built on top of Vue.js with awesome features out of the box like SSR and many more. Check out their website. They plan to release version 1.0.0 really soon which will also improve a lot of pain points the authors have discovered in the last year. The current beta version of Nuxt.js is version v1.0.0-rc11. The 1.0.0 version will most probably get released in 2018. For more information about Nuxt.js check out their awesome repository with a lot of resources and examples. I also think that Vue.js introduced a lot of changes to Server-Side Rendering because of this project which utilizes SSR a lot.

Another big newcomer in 2016 already was Vetur. Vetur is a Visual Studio Code extension which enables a nice environment for Vue.js development. Main features are obviously code highlighting, autocompletion, and internal documentation lookups. But recently also a lot of other features were included like automatic code formatting via third-party tools like prettier, jsbeautify and similar, custom code blocks, integration of component libraries and scaffolding options. In contrast to the autoformatter in Vetur, prettier will also have Vue.js support soon for