Vue development report in 2022 [Compiled and shared]

Since its initial release in 2014, Vue.js has continued to grow in popularity and user numbers, becoming a mature framework used by thousands of developers around the world. Let’s take a look at how Vue will develop in 2022!

1. Vue Ecosystem

Since the release of Vue 3, more and more libraries have accepted it Vue 3 and added support for it, while other libraries are developing compatible versions. Here’s a look at some of the exciting developments in the Vue ecosystem in 2022. (Learning video sharing: vue video tutorial)

(1) Vite

Vite is a new construction tool for front-end development. Currently The latest version is v3.0.0-beta.9. Vite brings a super-fast development experience and a highly optimized production package. It's framework agnostic and anyone can use it! Vite is the new recommended choice while Vue CLI enters maintenance mode.

(2) Vitest

Vitest is a new unit testing framework supported by Vite, the latest version is v0.18.0 . Vitest brings blazing speed to subsequent test runs, making it an excellent choice for TDD methods.

(3) Pinia

Pinia is now the recommended state management library for Vue 3. It introduces simpler APIs, proper TypeScript support, and more, which is a big step forward for the development experience. While Vuex is still compatible with Vue 3, it is now in maintenance mode.

(4) Volar

Johnson Chu, developer of the Volar VS Code extension, has joined the Vue.js core team. Johnson has been releasing releases and bug fixes, and is working on refactoring the internal codebase to be more efficient and even cover more features, and since the maintainer of the extension is now sponsored by Vue, the future of the IDE tool is even brighter.

(5) Nuxt 3

The Nuxt team announced that Nuxt v3 will be released this summer, which may be the most anticipated version one. It is currently in the release candidate stage and is close to stable.

(6)Vuetify

For many people, Nuxt and Vuetify are what prevent them from upgrading from Vue 2 to Vue 3 of two main parts. The latest version of Vuetify 3 is beta 5, which is getting closer to the official release.

(7) VitePress 1

VitePress recently released 1.0 alpha 4 and has been used in the new Vue documentation. In preparation for the v1.0 release, core team member Kia is working on providing higher-level APIs to end users. VitePress is now the recommended solution for static site generation with Vue 3 support. However, issues around the name and coexistence with VuePress are still under discussion. Simply put, should VitePress replace VuePress 3.

(8) Vue new documentation

The new Vue documentation has been released, with a comprehensive inspection and improvement of the design and user experience. , and introduces new guidance and the ability to switch between the Options API and Composition API. This release also introduces an interactive tutorial that walks you through all of Vue’s main features.

(9) Vue Core

During April and May, the Vue team spent about a month working on it A core bug in v3, resulting in a large-scale patch release (3.2.24~26), about 70 PRs merged and about 140 resolved issues.

(10) Vue default version

Vue 3 officially becomes the default version.

2. Vue’s present and future

In this section, You Yuxi, the author of Vue.js, summarizes the major changes in Vue 3 and shares the steps to upgrade to the latest default version. The details behind the process, and a look at Vue's future.

(1)What has changed in Vue 3 since the last update?

The new Vue documentation was released in February 2022, marking the completion of the soft launch process. When Vue 3 was released, it was really just core, but over time Vue as a whole has grown into a complete ecosystem including routing, state management, build tools, development tools, extensions, IDE support, and more. All of these require a lot of effort to update.

So, now there are basically new versions of all libraries and tools. Brand new documentation has been released, Vuex has been replaced by Pinia as the latest recommended state management library, and the build tool is now powered by Vite. The new IDE extension is Volar, which provides better TypeScript support and experience. Important DX improvements have also been released, such as <script setup></script>, and there are more to come.

(2) What impact does TypeScript have on the development experience of Vue?

TypeScript is on the rise, so any modern framework will be designed with it in mind. Even without using TypeScript, Volar takes advantage of Vue types and provides hints, eliminating the mental burden of needing to remember variable types. All type inference and checking also applies to templates. Using TypeScript also makes it easier for developers to spot errors when refactoring large code bases—the tool will immediately display them for you to fix. Especially when developing large projects, using TypeScript with Vue will greatly improve the robustness of your code.

(3) It has been a year and a half since Vue 3 was released to when it became the default version. How was the process?

For the initial version of Vue 3, everything was rewritten using TypeScript, but that wasn't done until Volar became an official extension. The documentation has been completely revised and everything has been modified or rewritten. They Works with the Options API and Composition API and can switch between them. As a result, the learning experience and everyday experience are upgraded. Each of them is a separate project, which is why the whole process took so long to finally get everything ready. Now we can say that Vue 3 is ready.

(4) Is such a deep transition process necessary?

It’s not all necessary, but when we think about upgrading, there’s always a trade-off between incremental improvements to your existing codebase or a drastic rewrite. To be based on the Vue 2 codebase and ensure 100% compatibility comes with the baggage of a lot of libraries that rely on Vue 2-specific internal behavior. If we carry this baggage with us, it will limit our innovation.

So, a massive rewrite is the right direction for us. The situation with Vue 3 is that some things have been sacrificed and some libraries broken in the short term, but that's a price you're willing to pay to get rid of the baggage of the past. Having a clean slate now will pay dividends in the future.

Although React or Ember can introduce new versions almost seamlessly, this imposes a huge maintenance overhead on them. They have a great system for slowly adding new features and phasing out old ones, and we can learn from that. Ultimately, there are no absolute right answers in engineering. When it comes to upgrading, there are trade-offs.

(5) Vue can be used in all types of applications and companies of different sizes. How does it make the framework so versatile?

The initial version of Vue was designed to lower the barrier to entry, making it easy to use and integrate into existing systems, and it still adheres to and takes this approach very seriously. Over time, we will slowly add components to support more advanced projects such as single page application routing, state management, and TypeScript support.

Initially, there were many users using Vue in smaller applications. Vue's user base continues to grow as more features and tools become available, but the original users remain and can still use it the way they like. That's our secret - covering all areas. It's been a long journey since 2014, with many challenges, but every time we add new features, we try to maintain the core experience of using Vue.

(6) What are the main challenges facing the front-end?

In the world of web development, there are all kinds of applications: simple login pages, fully interactive applications, backend dashboards, and electronic applications with higher performance requirements. Business applications, etc. Generally speaking, the challenge is to balance developer productivity with the performance of the final application. We're doing well in most of these areas, except for content-intensive e-commerce.

Nowadays there are some new things like Remix or Qwik. Many of these require control from the compiler to the server to the client, all of which must work together to provide a fully integrated solution that is optimized end-to-end. You can still write relatively simple code and ultimately get the best performance. This will be the biggest challenge – which solution best integrates these three parts? This is a direction we can explore working closely with the Nuxt team and others in the Vue ecosystem.

We need more vertical solutions that can handle both backend and frontend, and stop thinking in terms of pure client or pure backend.

(7) Looking forward to the next 5 years, how do you view Vue?

Vue is a constantly evolving platform. We probably won't have another "Vue 2 to 3" type of upgrade in the next five years, as Vue 3 is a solid enough foundation that can be extended over a long period of time. We will continue to experiment with compilation strategies because Vue's strength is that it is a very flexible and reactive system.

We have a compiled single file component that can be compiled into different outputs. The output can be changed while the source code remains unchanged. Hopefully the user experience remains stable during this time. From a development experience perspective, hopefully it remains stable, but the compiled approach allows us to make significant improvements behind the scenes. This is our goal.

3. Vue development trend

What is Vue’s current status in the front-end field? How fast is Vue growing? Let’s take a look at the survey statistics of different institutions!

(1) Statista

Vue rose 2 places in 2021 compared to 2020, ranking 5th, with 19% of respondents choosing it it.

(2) BuiltWith

In May 2022, the framework usage of the top 1 million websites in the world is as follows.

(3) NPMtrends

NPMtrends said that the use of Vue has been growing steadily over the past five years.

(4) SimilarTech

The number of websites built using Vue has continued to grow steadily since the beginning.

(5) GitHub dependents

Built with Vue since 2020 The number of applications continues to grow, with an increase of 46.52%.

(6) Number of Stack Overflow questions

On Stack Overflow, users asked There are more and more problems with Vue.

(7) State of JS

The usage rate of Vue.js by developers is on the rise and will reach 2021 51%.

(8) Stack Overflow Survey

Stack Overflow surveys users every year to ask what they like most and least frame. While the available survey questions have been inconsistent over the years, the results confirm Vue’s upward trend.

2021:

2020:

2019:

2018:

(9) JetBrains Survey

In 2021, the "2021 Developer Ecosystem Status" report released by JetBrains showed that the share of Vue.js users increased from 32% in 2020 to Growth to 43% in 2021.

(10) Google Trends

October 2020, users’ views on all frames Searches for both dropped, but since then, Vue has become popular again and is slowly getting back on track.

[Related video tutorial recommendations: web front-end]