Vue Vapor Mode: what it is and what changes in Vue 3.6

Vue 3.6 introduces a new feature called Vapor Mode, which aims to improve performance and reduce bundle size by compiling components to directly update the DOM, bypassing the Virtual DOM. This opt-in feature generates code that manipulates the DOM directly when reactive state changes. Vapor components do not create VNodes or diff trees at runtime, resulting in only the affected DOM portion being updated when a reactive value changes.

The primary benefit of Vapor Mode is a smaller baseline bundle and better performance, as supported by third-party benchmarks showing it matching the performance of Solid and Svelte 5. Additionally, Vue 3.6 includes a major refactor of the reactivity system based on the alien-signals library, which improves performance and memory usage without changing the API for ref(), reactive(), computed(), and watch().

To enable Vapor Mode, components can be marked with the vapor attribute in their script setup section or using the template vapor directive. This works for Single File Components (SFCs) and can be used with createApp() or in Nuxt 4.6, where components can be marked using the vapor attribute in their script setup or template. Nuxt 4.6 supports Vapor in interop mode, allowing a mix of Vapor and Virtual DOM components while still enjoying the performance benefits.

However, Vapor Mode does not support the Options API, getCurrentInstance(), or per-element lifecycle events. Component libraries using the Virtual DOM may also require testing and potential adjustments when used within Vapor components. Overall, Vapor Mode offers a promising step forward in Vue's performance and optimization efforts.