Insights and Trends in Vue.js from Evan You 2024

Leonid Shvab
Frontend Weekly
Published in
4 min readJan 25, 2024

--

Text here: vue.js 2024 trends and short plan to the article
The featured image for the article

In this publication, you will discover insights shared by Evan You during the Vuejs Nation 2024 conference, focusing on the Vue ecosystem.

Plan
1. Introduction
2. Q&A Session with Evan You
3. Conclusion
4. Helpful Links

  1. Introduction

In this publication, you will delve into general insights on the following topics: the influence of Vite 5 on Vue, macros, vapor mode, prevalent misconceptions, new features or functionalities, support for the Option API in future versions, VitePress, and more.

2. Q&A Session with Evan You

2.1. How does Vite 5 improve Vue performance?

The work done in Vite to improve performance is often specific to Vite itself. However, anyone using Vite gets the same benefits.

Additionally, an important detail is mentioned: users are advised to update to the latest version of “vitejs/plugin-vue” to take advantage of all the benefits of Vue 3.4. This update can enhance the build performance of your project.

2.2. Are we expecting any further Vue.js macros added to the Vue core functionality?

The Vue.js team exercises great caution when considering the integration of new macros into the Vue core. Currently, there are no plans to introduce new macros into Vue.

Macros are conceptual proposals or ideas that have not yet been officially incorporated into Vue. These proposals aim to explore and extend additional features and syntactic sugar for Vue.

2.3. What is the latest on Vue’s vapor mode?

The initial runtime implementation and a substantial part of the compiler have been completed. As a result, a functional playground has been established, although it remains a work in progress.

No intricate migrations or preparatory measures for usage are entailed by this mode. With this technology, the Vapor mode can be activated for specific components that necessitate optimization.

Vapor mode using for development of a non-virtual DOM mode for performance improvement

2.4. What do you think are the biggest misconceptions people have about Vue.js?

Popular misconceptions include poor support for JSX and TypeScript, as well as the belief that Vue is only suitable for simple applications. But more and more large and well-known brands are beginning to use Vue for extensive web applications.

2.5. What exciting new features or functionalities can we expect to see future version of Vue.js?

Vapor mode is the most significant innovation currently being developed in the Vue ecosystem.

Additionally, there have been improvements to the Vue core, including:

  • Refactoring of the reactivity system.
  • Faster parser and enhanced Single File Component (SFC) build performance.
  • Stabilization of defineModel.
  • Same-name shorthand for v-bind:
<img :id :src :alt>
  • Improved handling of Hydration Mismatch Errors.

2.6. Is the removal of the Option API planned in future versions of Vue?

There are no plans to remove the option API in the future, as maintaining both approaches — Composition API and Option API — is very manageable.

2.7. Will Vue 3 continue support Webpack or will totally move to Vite?

Vue does not plan to abandon Webpack in the near future; support will be provided for both Webpack and Vite.

2.8. Other

The release of the stable version of the suspense component is planned.

Reason why defineModel can't be deeply reactive for objects and arrays: Directly modifying props is not recommended due to additional tracking implications. In such scenarios, deep reactivity becomes unnecessary, leading to the return of a new object each time.

<script setup>
const modelValue = defineModel()
console.log(modelValue.value)
</script>

<template>
<input v-model="modelValue" />
</template>

VitePress release is eagerly anticipated.

VitePress is a Static Site Generator (SSG) crafted for building swift and content-centric websites. Ideal for documentation, blogs, portfolios, and marketing sites.

Providing a more lightweight alternative to Nuxt.js, it brings efficiency to web development.

3. Conclusion

The Vue ecosystem and the framework itself continue to undergo active development, focusing on improving performance, reactivity, and advancing the non-virtual DOM mode. It is important to note that Vue remains highly flexible, supporting both the Option API and the Composition API, and ensuring compatibility with popular bundlers such as Webpack and Vite. Significant progress is evident in the stable releases of new features like defineModel and shorthand for v-bind. All these factors attest to the dynamism and promising future of Vue in the present and beyond.

4. Helpful Links

1) Vuejsnation conference
2) Projects-using-nuxt
3) Vapor mode
4) Vue-macros
5) VueSchool
6) GraphQL in Vue3 with the Apollo Client
7) HMAC (security)

Contacts:
1) Linkedin
2) Github
3) Landing page
4) Company: open to work : )

--

--