Vue 3 - the Evolution of Vue

As of February 7, 2022, Vue 3 is the default version of Vue. This change is the culmination of over two years worth of changes in the Vue ecosystem. During this time, a lot has changed:

• The new Composition API allowed for more composable code while also paving the way for easier TypeScript adoption;
• Vite has taken the web development space by storm, bringing super-fast ESM-based development workflow to Vue and many other frameworks;
• On top of all the above, Vue has become much faster, and its ecosystem got upgraded across the board.

This article will look at all the changes Vue has gone through. We’ll discuss what they mean for Vue developers, how they impact web development in general, and what’s coming in the future.

Evolution of Vue

Let’s start with the changes in the Vue core and its first-party libraries.

Core API changes

The most significant change to the Vue core is undoubtedly the Composition API. The new API not only made Vue API more functional and composable but also lessened its reliance on dreaded this and provided Vue developers with a more flexible reactive model.

TypeScript, SFCs and JSX The Composition API came with a rewrite of the entire codebase in TypeScript. Architectural advantages aside, adopting TS meant better typings and autocompletion support in modern IDEs like VS Code. This move only further accelerated TS adoption by pointing the entire Vue ecosystem in its direction.

On top of that, the Vue Single File Components (SFCs) also received an upgrade in the form of <script setup> syntax sugar and state-driven CSS variables with v-bind in <style> sections.

For those coming from React background, JSX transforms were also upgraded, meaning you can expect a better development experience if you plan to use Vue with JSX/TSX.

Decision fatigue With all the above, there’s now more choice than ever as to how you structure your Vue app. Composition API or Option API? JS or TS? <script setup> or not? Maybe you want to abandon SFCs entirely and use JSX? With so many options, the decision fatigue is real for up-and-coming Vue developers. With no signs of Vue getting more opinionated, you should have a strong conviction and good experience with your Vue setup of choice.

Vite

I’d argue that in the last year, there wasn’t a single library or tool in Vue’s entire first-party ecosystem that was as impactful as Vite. Since its release, it has taken the web development space by storm, quickly becoming the go-to tool for many developers - no matter what framework they’re coming from.

Now, Vite wasn’t the first nor the last of its kind - Snowpack and WMR come to mind. However, because of its strong connection with a framework as popular as Vue, simple configuration, optimized production output, integration with Rollup, and other advantages, Vite became the most well-known of its kind. Its rise in popularity brought in a whole new level of development experience to many developers, raising the bar for other tools in the ecosystem to follow suit.

It’s safe to say Vite heavily influenced many trends we now see in the web development tooling space. These include the move to ES Modules in development and the use of native languages in bundlers for better performance (like Go used for esbuild powering Vite in development mode). Look no further than recently-released Next.js 12 with its Rust compiler (SWC) to see this ripple effect.

Vue Framework

Apart from Vite, many other first-party Vue libraries were also upgraded, and some new ones were added. Examples include Vue Router, Pinia (Vuex successor/alternative), Vue Devtools, VitePress, and more, making Vue into a true, fully-featured framework.

Like the Vue core, all new and upgraded libraries have first-class TypeScript support and composable API.

Overall, the Vue and its accompanying libraries are up-to-pair with the latest trends and even set some of their own for others to follow.

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience - start using OpenReplay for free.

Rebuilding the ecosystem

With that said, Vue 3 isn’t all sunshine and rainbows, as the release brought numerous breaking changes. While it doesn’t seem like it from the outside (especially if you stick with Options API), Vue 3 still has enough of these changes to render pretty much the entire ecosystem of Vue 2 incompatible.

While some of the changes are pretty easy to implement, the entire ecosystem won’t transition overnight. In fact, after a whole year of Vue 3 beta, some libraries - even the popular and well-maintained ones - aren’t in the stable phase yet or haven’t transitioned at all.

So the point is clear - the entire Vue ecosystem needs to be upgraded or filled with new tooling. Because of the popularity of Vue, it’s undoubtedly a good decision long-term as the ecosystem will eventually fully rebuild and be in better shape than before. However, for that to happen, time and commitment from all Vue developers are required.

So far, this process has been going pretty smoothly, but some critical tools in the ecosystem still aren’t stable. Examples include the Vuetify component library (arguably the most popular of its kind) and Nuxt.js Vue meta-framework - both missing features in their early releases at the time of writing.

So, while not everything is in place yet, you’ve got pretty high chances to find alternative solutions to most if not all of your problems - whether in Vue or framework-agnostic ecosystem.

Broader impact

Now, I’ve already mentioned the adoption of TypeScript and the switch to a more functional, composable API and how it’ll affect the Vue ecosystem. I’ve also discussed how Vite improved development experience across frameworks and is partially responsible for the new trends in web development tooling. But how all parts of Vue taken together have affected the web development landscape?

TypeScript ubiquity

With TypeScript getting into yet another framework, it’s now safe to say it’s ubiquitous, and most if not all modern JS libraries will either support it or adopt it fully.

TS, combined with improved JSX support, better performance, and Hooks-like Composition API, might make more React developers start using Vue, thus leading to expansion in the ecosystem, new job opportunities, and more.

Further Vue 3 adoption

As Vue 3 is now “the new default”, the next significant milestone for the ecosystem is the stable release of Nuxt.js. It will provide Vue 3 with Next.js-like meta-framework for building full-stack apps, boosting the adoption of Vue 3 even further. With it, Vue developers will also get easy access to the latest advancements in server-side rendering (SSR) and static site generation (SSG).

Performant tooling

Apart from all that, as Vite and underlying tooling like esbuild evolve, we’re bound to see even better and faster development across more tools than ever before. We can already see Vite powering the likes of Astro - combining rapid development with super-fat websites thanks to partial hydration. More is still to come.

The future

So when can we expect “Vue 4”? For now, I don’t think we should go that far. As we’ve seen, Vue 3 brought many changes to the table, and it’ll be a fair while before a feature set worth of a major version update will be released. With the move from classes and this to more functional, composable APIs in full swing across frameworks like React (React Hooks) and Vue (Composition API), it’s hard to predict what form of API will come after that.

What I’m pretty sure about is that we’re bound to see advancements in the following areas:

• Asynchronous components (thanks React/Vue Suspense);
• Development and production tooling (Vite, esbuild, SWC, etc.);
• SSR and partial hydration.

With everything going on in JavaScript - not only on the web but on native desktop and mobile as well - there’s undoubtedly a lot to look forward to!