What to expect from Vue.js in 2024

Just like the rest of the front end development world, the Vue world moves fast. In this article, I’d like to take a look at the current state of Vue and share my predictions on where things might be headed in 2024.

Vue 2 End of Life

As the Vue.js community continues to evolve, 2024 marks a significant transition with the end of life for Vue 2. This shift signals a move towards more advanced versions, emphasizing the need for developers to upgrade their skills and applications.

With this milestone, expect the composition API, Pinia, composables, and TypeScript to be used heavily within Vue apps this year. You can get your team up to date on these modern technologies with our comprehensive library of video courses.

Vue Vapor Mode

One of the most exciting developments in the Vue ecosystem is the introduction of 'Vapor Mode.' Evan first announced Vapor mode at the end of 2022 in this blog post. While expectations of a 2023 release certainly aren’t possible now, the outlook for a release in 2024 looks good.

For those unfamiliar with Vapor mode, this innovation aims to remove the virtual DOM for the sake of performance gains while maintaining the current script setup syntax with the composition API. The feature will be opt-in at the component or app level. For a deeper dive into Vapor Mode's capabilities and implications, visit this in-depth article.

Vue Certificate

In 2023, Vue School, in partnership with the Vue core team, launched the official Vue.js certification program. This year 2000 devs and companies internationally have already bought the cert. 157 developers have passed the exam and are officially certified. Many more are registered to take the exam, while others are studying up to nail a second attempt.

In 2024, we expect the program to continue to grow in popularity as the exam provides a trusted avenue for developers to verify their skills to potential employers while companies can streamline the hiring process and be more confident in their new hires.

If you aren’t one of the 157 yet certified and are on the job hunt, you should seriously consider taking the exam as a way to one-up the competition.

Performance Improvements

A major focus for front-end frameworks has historically been on performance. 2024 will be no different.

Evan recently announced development on a port of rollup for Rust called Rolldown. It focuses on performance with best-effort compatibility with Rollup and is slated to speed up the already super fast Vue build tool of choice: Vite.

Following the trend of improvements like those seen in this pull request, Vue.js is also expected to continue advancing in terms of speed and performance in the core library. One such feature is lazy hydration baked in as an option to defineAsyncComponent.

New and Solidified Features

Vue.js has a variety of new and existing experimental features that are likely to land as stable additions to the framework in 2024. None of the following are a sure thing, but my bet is you’ll see at least a majority of them by the end of the year:

v-model on and : Enhancements like this pull request are making it easier to bind data and update UI.

  • A stable defineModel: The introduction of a stable defineModel, as discussed in this blog post offers some nice syntactic sugar to address a slightly verbose common use case. Look to see this loose the experimental tag in 2024.
  • A stable Suspense Component: this component has worn the experimental tag for quite some time now. Extensive use within the popular Nuxt 3 meta-framework should ensure very little changes moving forward, so I anticipate this reaching a stable stage very soon.
  • Conditional Props: The potential introduction of conditional props, as suggested in this issue, could provide more expressive and flexible TypeScript support for components.
  • Vue Router Data Loaders: The discussion surrounding Vue router data loaders, as seen in this RFC, indicates an effort to streamline data fetching and routing in Vue applications.

Nuxt

Nuxt 3 has been out of beta for a year now and it’s focus on the full stack has made it a go-to tool for many Vue.js developers. It’s been releasing new features this year at a break-neck pace including:
  • Nuxt devtools - developer tooling that even non-Vue developers drool over
  • A wealth of rendering modes (client only, server only, both with hydration) configurable at both the component and app level. (AKA, islands, server components, etc)
  • Ever improving Typesafety features (typed routing, typed environment config, plus more )
  • Native View Transitions

  • and more!

    Definitely look for the Nuxt team to continue pumping valuable software into both the Vue community (I’ve heard rumblings of a Nuxt 4