Vue 3 Vapor Mode is an opt-in way to compile Vue Single-File Components (SFCs) so they update the DOM directly instead of rendering through Vue’s Virtual DOM. Vue’s stated aims are a smaller baseline bundle and better performance, but neither is guaranteed for every app. As of October 7, 2026, Vapor was available to evaluate in the Vue 3.6 release-candidate line; Vue 3.5.43 was the latest stable release listed, so Vapor should be treated as prerelease technology rather than a stable production feature.
How Vapor Mode changes Vue rendering
In standard Vue rendering, the compiler turns a template into a render function that produces Virtual DOM nodes. Vue compares those nodes and applies the resulting changes to the browser DOM. Vapor takes another compilation path: Vapor components generate direct DOM update logic rather than using the Virtual DOM.
As an Amazon Associate I earn from qualifying purchases.
Vue describes Vapor’s goals as reducing baseline bundle size and improving performance. Those are goals, not a promise of a particular saving or speedup. The result depends on the app, its dependencies, the build, and the work being measured.
Free tools Windows power users keep installed
One-click scans. No signup required.
How to opt a component in
Vapor is opt-in at the component level, making it possible to evaluate a compatible SFC without converting the whole app. The release material supports template-only SFCs and SFCs using <script setup>. To opt in, add the vapor attribute:
#1 Best Overall
<script setup vapor>
// component logic
</script>
<template>
<button @click="count++">{{ count }}</button>
</template><script vapor> is shorthand for <script setup vapor>. The Options API is not supported in Vapor components. For current syntax and constraints, consult the Vue core release notes.
Which Vue features are incompatible?
Vapor is a subset of Vue, not a drop-in replacement for every component. Before opting in, check whether the component or its dependencies rely on VNodes or the usual component public instance proxy. Vue core identifies these unsupported or inapplicable behaviors:
- The Options API and
app.config.globalProperties. getCurrentInstance()returning the usual component instance; in Vapor components it returnsnull.- Per-element
@vue:xxxlifecycle events andv-memo. - Component template refs exposing public-instance properties such as
$el,$props,$attrs,$slots, and$refs.
Event handling has a practical detail as well: eligible events are delegated to document. An ancestor that calls stopPropagation() before the event reaches document can prevent the delegated handler from running. This may matter when adapting event behavior or working alongside code that stops propagation.
Is Vapor Mode ready for production?
As of October 7, 2026, Vue’s release list showed Vue 3.6.0-rc.10, released September 30, 2026, as a prerelease, and Vue 3.5.43, released September 17, 2026, as the latest stable release listed. Vue’s release guidance says prereleases are unstable and should not be used in production. That makes the 3.6 release-candidate line suitable for evaluation, not a basis for assuming stable production support. Check the release status again when choosing a version.
Support for surrounding features and tools is also evolving. The Vue core Vapor Roadmap, opened July 22, 2025, tracks core areas including SSR/hydration, async components, KeepAlive, Transition/TransitionGroup, and Teleport. It also tracks work involving Suspense, forwarded slots, template-ref interoperability, VitePress, Vue Router, Pinia, Nuxt, DevTools, and Vue Test Utils. The roadmap cautions that some items may be canceled after discussion, so verify the actual release and package versions for each feature your app needs.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How to decide whether to evaluate it
Choose a component with a clear workload and limited compatibility dependencies. Check its APIs first, then compare a production build and representative interactions against the standard compilation path. Vue’s performance guidance distinguishes page-load performance from update performance; measure the one you want to improve.
Rank #4
- Check feature fit. Identify use of the Options API, public-instance properties, VNode-dependent behavior, and integrations that may not support Vapor.
- Measure page-load performance. Compare initial JavaScript and bundle weight, then assess how soon the page becomes useful.
- Measure update performance. Test representative user actions, such as filtering or switching views, rather than relying on a synthetic workload unrelated to your app.
- Use a production build. Dependency and build choices affect final bundle size. Profile the deployed build with tools such as PageSpeed Insights or WebPageTest, and record versions, workload, environment, and metric so the comparison is interpretable.
- Account for release risk. If evaluating the prerelease, confirm required core and ecosystem features in the specific versions you use, and reassess compatibility as the release line changes.
A useful outcome is not simply that one number went down. A candidate component is a good fit only if it works within Vapor’s supported subset and the measured page-load or interaction improvement matters for your users.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
