avatarBeck Moulton

Summarize

Vue.js in 2024: What to Expect in the Coming Year

Vue 2 Lifecycle Sunset

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

With this milestone, it is anticipated that features like Composition API, Pinia, Composables, and TypeScript will see widespread use in Vue applications this year.

Vue Vapor Mode

One of the most exciting developments in the Vue ecosystem is the introduction of the “Vapor Mode.” Evan announced Vapor Mode at the end of 2022, and while it may not be released in 2023, the prospects for its release in 2024 look promising.

For those unfamiliar with Vapor Mode, this innovation aims to eliminate the virtual DOM to improve performance while maintaining the current script setup syntax using the Composition API.

Vue Certification

In 2023, Vue School collaborated with the Vue core team to launch the official Vue.js certification program. By 2024, 2000 developers and companies globally have purchased the certificate, with 157 developers officially certified through the exam. As more people sign up for exams, and others are in the process of learning for a second attempt, the program is expected to remain popular, providing developers with a trusted path to validate their skills to potential employers, streamlining the hiring process for companies.

If you are not one of the 157 certified individuals and are job-seeking, seriously consider taking the exam as a way to stand out in the competitive landscape.

Performance Improvements

Throughout history, the primary focus of frontend frameworks has been on performance, and 2024 is no exception. Evan recently announced the development of a Rust port for Rollup called Rolldown, focusing on performance compatible with Rollup and planning to accelerate the already fast Vue build tool, Vite.

Vue.js is also expected to continue improving the speed and performance of its core library. One feature includes adding lazy hydration to define asynchronous components (defineAsyncComponent).

New Features and Enhancements

Vue.js has various new and existing experimental features that are likely to become stable additions to the framework in 2024. While none of these features are guaranteed, it’s a safe bet that by the end of this year, you will see most of them:

  • Stable defineModel: Introducing a stable defineModel, as discussed in this blog post, provides some nice syntactic sugar to address slightly verbose common use cases. We expect to see it shed its experimental label in 2024.
  • Stable Suspense component: This component has carried an experimental label for a while. Extensive use in the popular Nuxt 3 meta-framework should ensure minimal changes in the future, so we anticipate it will soon enter the stable phase.
  • Conditional Props: As suggested in this edition, the potential introduction of Conditional Props can provide more expressive and flexible TypeScript support for components.
  • Vue Router Data Loader: Discussions around a Vue Router Data Loader indicate efforts to simplify data fetching and routing in Vue applications.

Nuxt

Nuxt 3 has been in beta for a year, and its focus on full-stack makes it the preferred tool for many Vue.js developers. This year, it has rapidly released new features, including:

  • Nuxt devtools — a developer tool that even non-Vue developers would envy.
  • Rich rendering modes (client-only mode, server-only mode, mixed mode) configurable at the component and application levels (also known as islands, server components, etc.).
  • Continuous improvements in type safety features (typed routes, typed environment configuration, etc.).
  • Native view transformations
  • And much more…

Be sure to anticipate the Nuxt team’s continued contribution to the Vue community (I hear rumors about Nuxt 4) and valuable software for the entire development community through the UnJS organization.

Vue
Vuejs
Dev
JavaScript
Typescript
Recommended from ReadMedium