Highlights from Vue.js Nation 2023

The Vue.js Nation conference back in January was a nice moment to learn how the creators of Vue and other products within its ecosystem see the present and the future of the framework. For me it’s also always fun and educational to see how developers all over the world do what we usually do!

So it was good to have some talks discussing the tools and approaches used to effectively create feature-rich, performant, safe and accessible apps with Vue.js.

Here’re some of the takeaways from all the talks that I considered the most interesting.

logos of the vue ecosystem — Image source: vuejsnation.com

Vue 3 is a safe default

Having a year of being the official default, excellent documentation and dozens of bugfix releases, Vue 3 is pretty stable on its own. All the major frameworks and libraries, like Nuxt, Quasar or Vuetify now have their Vue 3 based versions. Nothing as drastic of a change as moving from Vue 2 to Vue 3 is planned for 2023 by the core team. They say they have absolutely no plans for “Vue 4”, instead they intend to have more frequent and focused releases.

Composition API is the way to go

Officially both the Options API and the Composition API are equally supported and their choice is mostly considered to be a matter of taste. To me, for example, the argument of better code organization with Composition API seems unconvincing. But, there still are some areas where the Composition API feels closer to being the true first-class citizen in Vue.js (and those make me choose Composition API every time):

Using TypeScript is less natural with Options API
Composables are the holy grail of organizing and reusing your stateful logic in a Vue project. Their use is more straightforward with Composition API
The “script setup” syntax coming with the Composition API is not only nice and succinct, but also has more potential to be optimized by the runtime
The Composition API + “script setup” is going to be the only way to opt into the upcoming Vapor mode with your component for even more optimizations (see below)

The Composition API is full of compromises

Not all experimental features have made it

Evan You and the other members of the core team admit that, as with any framework, Vue 3 and namely the Composition API is full of compromises. But it looks like the community has learned to accept them. As an example, the could-feel-annoying “.value” syntax of working with ref’s seemed more acceptable to the majority of the community than the magic of the reactivity transform experimental feature. So instead of going stable, reactivity transform will in fact be gradually phased out and forgotten for good. The only subfeature that is going to survive is props destructure with defaults, which is neat indeed! It solves both the problems of losing reactivity when restructuring props and the inability to define defaults for props using pure TypeScript. So soon this will be considered part of the stable core:

  const {
    msg,
    count = 1, // default value    
    foo: bar   // aliasing `props.foo` to `bar`
  } = defineProps()

and will save us from the need to do this for default values:

const props = withDefaults(defineProps(), {
  count: 1
})

Some would argue that they’d rather use a non-desctructured props with default values, which means they’d still need to use the older withDefaults syntax. Valid point, but at least we’ll have options!

It’s worth noting that another experimental feature - the Suspense built-in component - will not make it as stable in the closest minor release (3.3) due to some feedback gained while using it in Nuxt 3. It’s going to stay experimental for some more time.

Vapor is inspired by other web frameworks and will boost performance in Vue

Vapor mode is coming to bring us lessons learned from other frameworks

2022 was an exciting year for web frameworks! We’ve seen smaller players like SvelteKit, Solid, Remix and Qwik increase their presence, showcasing unique new approaches and setting new standards for development experience and application performance. That also stimulated further evolution of their competitors.

The Vapor mode, coming for Vue in the second half of 2023, is an example of that. It’s going to be an opt-in mode that could be turned on per-component or for the whole application that would get rid of the Virtual DOM, thus boosting the performance of the component even further and significantly reducing the size of the runtime. The idea clearly has its roots in the successes of Solid and Svelte in the fields of bundle size and performance. Again, this will be possible only for the “script setup” syntax and looks like it will be fully transparent, requiring no changes to the component code.

Nuxt 3 is intensely promoted as the framework to go

A lot of speakers of Vue.js Nation 2023 have used Nuxt 3 during their talks, even if the subject did not directly consider SSR or other Nuxt features. While not yet being as stable as the core Vue 3, Nuxt 3 is definitely a huge driver for the whole Vue ecosystem. It showcases using Vue in client-side and server-side rendering scenarios, plus provides lots of defaults and conventions that speed up app development.

That being said, the Vue team members warn that one should thoroughly consider the requirements for the project before choosing Nuxt over Vue. Be aware of the fact that mastering Nuxt and understanding how to apply its features instead of fighting them requires a good knowledge of Vue core.

Having spent some time with Nuxt 3 I also feel that the ecosystem of its modules has not yet caught up in maturity with the one of Nuxt 2. But the built-in capabilities of Nuxt 3, like hybrid rendering, support for various JavaScript runtimes or superior performance, make it very tempting to try and a great investment in the long-term.

I also cannot fail to mention a truly passionate and inspiring talk by Luke Diebold of Quasar. While having a different feature set than Nuxt (mostly dealing with fast-to-implement UI components), Quasar seems like a very capable framework that also has some SSR capabilities.

Tooling, ecosystem, coding & architecture guidelines

Having a healthy situation with developer tools, first- and third-party libraries and guidelines for best practices speaks much of the maturity of the framework and of how active the team and the community are. With Vue 3 it’s definitely getting better.

The Volar extension for VS Code has been recently updated and is now faster, more stable and feature-rich. Combining it with using TypeScript for your projects you get superior code completion, code navigation and early error/typo detection. The recommended global state (stores) solution for Vue - Pinia - is minimalistic and yet very powerful. It comes with excellent TypeScript support and has its spot in the Vue DevTools browser plugins.

The Vue Router library works as intended for CSR projects and also powers Nuxt’s routing system. VueUse is a true treasure chest - an extensive collection of composables, which you can both use for your projects as-is and use as references, studying their source code to implement your own composables in the most efficient and usable way.

It’s a bit more complicated in the guidelines area. Looks like frontend in general still suffers from being a bit less developed (compared to backend) in terms of how developers approach system design, how the code style guidelines and best practices are utilized by the community etc. Which is understandable, considering how complex the field of frontend development is and how rapidly it is changing!

One should be aware that Vue.js does have its style guidelines (they’re outdated and need refreshment for Vue 3, but are still mostly applicable and worth studying) and ESLint plugins and rule sets that enforce these guidelines. Your framework of choice (like Nuxt or Quasar) may also have its considerations on how to organize your code, giving you additional benefits if you follow the proposed conventions. It’s often a good idea not to fight those.

For 2023, Vue.js is a good balance of maturity and innovations

All in all 2023 seems like a great year to both start and continue one’s journey with Vue.js. It might be tempting to try out the newer toys and they definitely have loads of potential. But Vue.js not only seems like a safe haven, providing sane development experience and predictable results. It also looks to be totally open for innovations inspired by other players and providing its own innovative ideas and solutions for the whole web development scene (think Vite and Vitest that are gaining a lot of popularity outside Vue.js, or Volar that announced support for other frameworks). Let’s see what we can build with Vue.js this year!