Coming Into Vue: What's Next in Vue 3

Published by Lindsay Wardell on

It was a moment of celebration across the Vueniverse. At last, after more than a year of Vue 3 being available on the next branch of all the core repositories (and many of the related frameworks and libraries), Vue 3 has been officially released to the world as the recommended way to write Vue applications. The moment was noted on the official Vue blog as well as on Twitter.

Considering that the initial release of Vue 3 (named “One Piece”) was originally released on September 18, 2020, the fact that we’re only now reaching the official recommendation has shaped the Vue ecosystem. For applications, most of the actual migration between Vue 2 to Vue 3 is straightforward, with Vue minimizing breaking changes while adding new features such as the Composition API as well as the latest new feature to land in Vue, <script setup>, which provides a way to build Vue apps without so much boilerplate code (I presented a demo of using Composition API and <script setup> alongside Ben Hong at VueJS Athens, check it out!).

However, the Vue ecosystem has seen its share of churn in the meantime. Core APIs that frameworks like Vuetify rely on were altered, to the point that even the Migration Build doesn’t cover the differences between Vue 2 and 3. Frameworks such as Nuxt and Quasar have been working to support Vue 3 (with Quasar releasing it’s stable support back in 2021). Meanwhile, work has been going into Vite, which is now the official recommendation for building Vue apps as well (replacing the Vue CLI).

Now that we’ve reached an official recommendation to use Vue 3, what does the future look like for the Vue ecosystem? I asked Twitter what they were looking forward to in the future of Vue, and these are some of the answers that I got.

Reactivity Transform

The next new feature coming to Vue 3 is being referred to as the “Reactivity Transform Unification”. The main issue being resolved here is that the introduction of Ref can be complex, especially moving from Vue 2 to 3. For context, in Vue 3 today, you can create and access a ref value like this:

<script setup>
import { ref } from 'vue';

const count = ref(0)        // Set the value with a `ref` call
console.log(count.value)    // Access the value with `.value` in JS
</script>

<template>
  <!-- Access the value with just the ref name -->
  <button @click="count++">
    {{count}}
  </button>
</template>

The change would be to provide a utility function, $ref, that would unwrap the ref into a reactive variable, and then let you work with it directly, rather than accessing the .value key.

<script setup>
const count = $ref(0)   // Set the value with a `$ref` call
console.log(count)      // Access the value directly!
</script>

<template>
  <!-- No changes, still access the value directly -->
  <button @click="count++">
    {{count}}
  </button>
</template>

This feels a lot more comfortable to work with, especially for non-Vue developers! There have been a number of proposals trying to resolve the cumbersome nature of refs, and I think this is a comfortable middle ground. There are a number of other functions proposed in the RFC, go check it out and provide your feedback!

Nuxt 3

The next big call-out I saw from the ecosystem is Nuxt 3 reaching a stable build. Nuxt 3 is an exciting new major version for Vue’s primary SSR framework, with new features such as its Nitro backend (that allows it to be deployed to a number of environments beyond a standard Node server) and Vite integration. On the Nuxt site, there is a chart comparing the different versions of Nuxt as they exist today, and their recommendations. I’ll copy it below to keep a snapshot of the status as I write this post, but the latest comparison can be found on the Nuxt 3 site.

Feature / VersionNuxt 2Nuxt BridgeNuxt 3
Vue223
Stability😊 Stable😌 Semi-stable😬 Unstable
Performance🏎 Fast✈️ Faster🚀 Fastest
Nitro Engine❌✅✅
ESM support🌙 Partial👍 Better✅
TypeScript☑️ Opt-in🚧 Partial✅
Composition API❌🚧 Partial✅
Options API✅✅✅
Components Auto Import✅✅✅
<script setup> syntax❌🚧 Partial✅
Auto Imports❌✅✅
Webpack445
Vite⚠️ Partial🚧 Partial🚧 Experimental
Nuxi CLI❌ Old✅ nuxi✅ nuxi
Static sites✅✅🚧

There are a couple key features that are still being worked out before Nuxt 3 is stable, based on this chart. Since Nuxt 2 was based on Webpack, Vite integration is still experimental and under development. I’ve done some playing around with it, and found it to work fairly well, but I’m not working on production code with Nuxt and Vite so there’s probably some edge cases still to work out. If you want to try Nuxt 3 and Vite, just add this to your Nuxt config:

// nuxt.config.ts
   
import { defineNuxtConfig } from "nuxt3";

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  // Add the `vite` key to your config, and you'll opt into Vite mode
  vite: {},
});

The other missing feature is static site generation. While Nuxt is primarily a server-side generator, it can be used to build static sites as well. If you’re wanting to use Nuxt 3 features, but really need static sites, you’ll need to use the Nuxt Bridge. From the docs:

Bridge is a forward-compatibility layer that allows you to experience many of the new Nuxt 3 features by simply installing and enabling a Nuxt module.

Using Nuxt Bridge, you can make sure your project is (almost) ready for Nuxt 3 and have the best developer experience without needing a major rewrite or risk breaking changes.

If you’re looking to try out Nuxt 3 with an existing app, I’d suggest checking out the Bridge build. Otherwise, spin up a new app with Nuxt 3, and be aware that static generation is currently under development and does not work. Also, remember that because it’s under development, it’s best to consider the Nuxt APIs as unstable and prone to change. While it feels solid, Nuxt 3 is not yet ready for production use.

Vuetify

Vuetify, one of the most well-known material frameworks for building Vue apps, is still working on support for Vue 3. Part of this is due to an overhaul under the hood that will lead to improved performance and a better experience. According to the Vuetify official roadmap, Vuetify 3 is planned for release in May 2022, with a public beta in February.

  • Target Release: May 2022
  • Alpha: Live
  • Beta: February 2022
  • Overview:
    • Rebuilt for Vue 3 using the new composition api
    • Global properties that allow you to make large overarching changes to your app
    • Improved SASS variable customization and extensibility with Built-In Modules
    • New Vue CLI presets for generating pre-built starting projects
    • First party Vite support for lightning fast development
    • Greatly improved TypeScript support
    • Better framework coverage with E2E testing using Cypress

Check out the links on the Vuetify page to access their Github page and Discord channel.

Ecosystem Support and Stability

There are a number of other prominent Vue libraries that are still working on their stable Vue 3 support. Vue Apollo, Vuelidate, and Bootstrap Vue have some work done, but are in different stages of either “not available” or “public alpha”. Some other projects, such as NativeScript Vue, are having to undergo more substantial rewrites in order to be compatible. All of this takes time, and in the meantime the projects that are reliant on these libraries will have to remain on Vue 2, or switch to alternatives that already support Vue 3.

In that sense, libraries/frameworks that already support Vue 3 have a clear advantage at the moment, and should definitely be considered if you’re using a Vue 2-only option. UI frameworks like Quasar are a good alternative to Vuetify or Bootstrap if you’re able to make the switch, for example.

There are also some libraries that have already been updated, such as Vue Draggable, as well as others that will not be getting Vue 3 support, such as Vue Formulate (if you’re using it, check out the public beta for its replacement, FormKit).

Conclusion

As a wrap-up to this topic, what I think is most wanted out of the Vue ecosystem in the near future is some peace and quiet.

Upheavals in how things are done are never easy. The Vue team saw that changes were required in order for Vue applications to continue scaling and solving the problems developers were facing, and made some difficult choices. That, on top of a pandemic interrupting the normal flow of life, has led to a very delicate place for the Vue ecosystem. I feel like in general, we’re heading in the right direction, and the more libraries that are able to support Vue 3 moving forward, the faster we’ll get there.

Vue 3 is a fantastic JS framework to pick up and use today. If you are new to Vue, I highly encourage checking out the new official documentation for Vue 3, it’s a fantastic resource that will get you up to speed on the essentials and current recommended practices. If you’re into podcasts, I’d also recommend checking out both Views on Vue and Enjoy the Vue. And most important, make sure to enjoy the journey along the way.

Lindsay Wardell
Hi, I'm Lindsay Wardell!

I am a programmer, writer, and mother. I work as a Software Engineer at NoRedInk. I write and talk about Elm, Vue, Vite, and other tools that I enjoy learning about and using.