v-if and v-for on the same <template> element by correctly wrapping structural directives. (#14289) (ea1c978)slots.name() (#14273) (6ffd55a)uid key for useInstanceOption (#14272) (55bdced), closes vuejs/rfcs#814Vue 3.6 is now entering beta phase as we have completed the intended feature set for Vapor Mode as outlined in the roadmap! Vapor Mode now has feature parity with all stable features in Virtual DOM mode. Suspense is not supported in Vapor-only mode, but you can render Vapor components inside a VDOM Suspense.
3.6 also includes a major refactor of @vue/reactivity based on alien-signals, which significantly improves the reactivity system's performance and memory usage.
For more details about Vapor Mode, see About Vapor Mode section at the end of this release note.
provide() warning during HMR updates for mounted instances (#14195) (d823d6a)Vapor Mode is a new compilation mode for Vue Single-File Components (SFC) with the goal of reducing baseline bundle size and improved performance. It is 100% opt-in, and supports a subset of existing Vue APIs with mostly identical behavior.
Vapor Mode has demonstrated the same level of performance with Solid and Svelte 5 in 3rd party benchmarks.
Vapor Mode is feature-complete in Vue 3.6 beta, but is still considered unstable. For now, we recommend using it for the following cases:
Vapor Mode only works for Single File Components using <script setup>. To opt-in, add the vapor attribute to <script setup>:
<script setup vapor>
// ...
</script>
Vapor Mode components are usable in two scenarios:
Inside a Vapor app instance create via createVaporApp. Apps created this way avoids pulling in the Virtual DOM runtime code and allows bundle baseline size to be drastically reduced.
To use Vapor components in a VDOM app instance created via createApp, the vaporInteropPlugin must be installed:
import { createApp, vaporInteropPlugin } from 'vue'
import App from './App.vue'
createApp(App)
.use(vaporInteropPlugin) // enable vapor interop
.mount('#app')
A Vapor app instance can also install vaporInteropPlugin to allow vdom components to be used inside, but it will pull in the vdom runtime and offset the benefits of a smaller bundle.
When the interop plugin is installed, Vapor and non-Vapor components can be nested inside each other. This currently covers standard props, events, and slots usage, but does not yet account for all possible edge cases. For example, there will most likely still be rough edges when using a VDOM-based component library in Vapor Mode.
A know issue is that vapor slots cannot be rendered with slots.default() inside a VDOM component. renderSlot must be used instead. [Example]
This is expected to improve over time, but in general, we recommend having distinct "regions" in your app where it's one mode or another, and avoid mixed nesting as much as possible.
In the future, we may provide support tooling to enforce Vapor usage boundaries in codebases.
By design, Vapor Mode supports a subset of existing Vue features. For the supported subset, we aim to deliver the exact same behavior per API specifications. At the same time, this means there are some features that are explicitly not supported in Vapor Mode:
app.config.globalPropertiesgetCurrentInstance() returns null in Vapor components@vue:xxx per-element lifecycle eventsCustom directives in Vapor also have a different interface:
type VaporDirective = (
node: Element | VaporComponentInstance,
value?: () => any,
argument?: string,
modifiers?: DirectiveModifiers,
) => (() => void) | void
value is a reactive getter that returns the binding value. The user can set up reactive effects using watchEffect (auto released when component unmounts), and can optionally return a cleanup function. Example:
const MyDirective = (el, source) => {
watchEffect(() => {
el.textContent = source()
})
return () => console.log('cleanup')
}
Vapor Mode attempts to match VDOM Mode behavior as much as possible, but there could still be minor behavior inconsistencies in edge cases due to how fundamentally different the two rendering modes are. In general, we do not consider a minor inconsistency to be breaking change unless the behavior has previously been documented.
__vapor state during component mode switching (#14187) (158e706)defineVaporCustomElement type inference (#14183) (6de8f68)defineVaporComponent type inference (#13831) (9d9efd4)_camelize from receiving nullish value for dynamic v-bind keys with .camel modifier. (#14138) (313d172)devtoolsRawSetupState (0ab7e1b)v-once support for slot outlets (#14141) (498ce69)TSNonNullExpression and improve expression processing (#14097) (092c73a)vShow's setDisplay when handling Vapor components. (005ba04)updated hooks from running before the fragment is mounted. (#14123) (b07fa60)Please see About Vapor Mode section below for details.
on() and off() calls maintains correct active scope (#12641) (679cbdf)Vapor Mode is a new compilation mode for Vue Single-File Components (SFC) with the goal of reducing baseline bundle size and improved performance. It is 100% opt-in, and supports a subset of existing Vue APIs with mostly identical behavior.
Vapor Mode has demonstrated the same level of performance with Solid and Svelte 5 in 3rd party benchmarks.
Vapor Mode is available starting in Vue 3.6 alpha. Please note it is still incomplete and unstable during the alpha phase. The current focus is making it available for wider stability and compatibility testing. For now, we recommend using it for the following cases:
We do not recommend migrating existing components to Vapor Mode yet.
Things that do not work in this version yet:
Features marked with * have pending PRs which will be merged during the alpha phase.
Vapor Mode only works for Single File Components using <script setup>. To opt-in, add the vapor attribute to <script setup>:
<script setup vapor>
// ...
</script>
Vapor Mode components are usable in two scenarios:
Inside a Vapor app instance create via createVaporApp. Apps created this way avoids pulling in the Virtual DOM runtime code and allows bundle baseline size to be drastically reduced.
To use Vapor components in a VDOM app instance created via createApp, the vaporInteropPlugin must be installed:
import { createApp, vaporInteropPlugin } from 'vue'
import App from './App.vue'
createApp(App)
.use(vaporInteropPlugin) // enable vapor interop
.mount('#app')
A Vapor app instance can also install vaporInteropPlugin to allow vdom components to be used inside, but it will pull in the vdom runtime and offset the benefits of a smaller bundle.
When the interop plugin is installed, Vapor and non-Vapor components can be nested inside each other. This currently covers standard props, events, and slots usage, but does not yet account for all possible edge cases. For example, there will most likely still be rough edges when using a VDOM-based component library in Vapor Mode.
This is expected to improve over time, but in general, we recommend having distinct "regions" in your app where it's one mode or another, and avoid mixed nesting as much as possible.
In the future, we may provide support tooling to enforce Vapor usage boundaries in codebases.
By design, Vapor Mode supports a subset of existing Vue features. For the supported subset, we aim to deliver the exact same behavior per API specifications. At the same time, this means there are some features that are explicitly not supported in Vapor Mode:
app.config.globalPropertiesgetCurrentInstance() returns null in Vapor components$slots and $props are not available in Vapor template expressions@vue:xxx per-element lifecycle eventsCustom directives in Vapor also have a different interface:
type VaporDirective = (
node: Element | VaporComponentInstance,
value?: () => any,
argument?: string,
modifiers?: DirectiveModifiers,
) => (() => void) | void
value is a reactive getter that returns the binding value. The user can set up reactive effects using watchEffect (auto released when component unmounts), and can optionally return a cleanup function. Example:
const MyDirective = (el, source) => {
watchEffect(() => {
el.textContent = source()
})
return () => console.log('cleanup')
}
Vapor Mode attempts to match VDOM Mode behavior as much as possible, but there could still be minor behavior inconsistencies in edge cases due to how fundamentally different the two rendering modes are. In general, we do not consider a minor inconsistency to be breaking change unless the behavior has previously been documented.
See 3.5 changelog
See 3.4 changelog
See 3.3 changelog
See 3.2 changelog
See 3.1 changelog
See 3.0 changelog