@vue/compiler-ssr

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

Vue 3.6 is now entering the RC phase as we have completed the intended feature set for Vapor Mode.

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 the About Vapor Mode section later in this release note.

Bug Fixes

• hydration: avoid resolving inherited fallback in forwarded slots (4c215b5)
• hydration: remove adopted SSR DOM for unresolved async setup (3859af4)
• runtime-vapor: avoid patching invalid VNode slot content (25f5a8a)
• runtime-vapor: clean up detached slot branches (b41009d)
• runtime-vapor: defer slot content anchors during hydration (9b9e4bd)
• runtime-vapor: preserve outer pending slot anchors (4af4bf9)
• runtime-vapor: preserve slot content anchors during mismatch recovery (26f90b5)
• runtime-vapor: preserve v-show transition on vdom child (#15074) (fe882c9), closes #15073
• runtime-vapor: preserve vapor slot owner during interop slot dry run (#15031) (340630e)
• runtime-vapor: preserve VNode anchors in dynamic component hydration (898e2ca)
• runtime-vapor: remove unsafe slot dry runs from vdom interop (#15089) (3d42cdf), closes #14793
• runtime-vapor: reuse hydration anchor candidates (06778e7)
• vapor: handle v-if and v-show on transition roots (#15069) (8f62f2e), closes #15068

About Vapor Mode

Vapor Mode is a new compilation mode for Vue Single-File Components (SFCs) with the goal of reducing baseline bundle size and improving performance.

It is 100% opt-in and supports a subset of existing Vue APIs with mostly identical behavior. Features that depend on VNodes or the component public instance proxy are not available in Vapor components.

Vapor Mode has demonstrated the same level of performance as Solid and Svelte 5 in third-party benchmarks.

General Stability Notes

Vapor Mode is feature-complete in Vue 3.6 RC. For now, we recommend using it in the following cases:

• Partial usage in existing apps, such as implementing a performance-sensitive page in Vapor Mode.
• Building small new apps entirely in Vapor Mode.

Opting In to Vapor Mode

Vapor Mode supports template-only SFCs and SFCs using <script setup>; the Options API is not supported. The following forms are supported:

<script setup vapor>
// ...
</script>

<script vapor> is shorthand for <script setup vapor>:

<script vapor>
// ...
</script>

The vapor marker can also be placed on the template, enabling Vapor compilation for the entire SFC:

<template vapor>
  <!-- ... -->
</template>

Creating an App and Using VDOM Interop

Pure Vapor Applications

Applications composed entirely of Vapor components can use createVaporApp():

import { createVaporApp } from 'vue'
import App from './App.vue'

createVaporApp(App).mount('#app')

Apps created this way avoid pulling in the Virtual DOM runtime code and allow the baseline bundle size to be drastically reduced.

Enabling VDOM Interop

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).mount('#app')

A Vapor app instance can also install vaporInteropPlugin to allow VDOM components to be used inside, but this pulls in the VDOM runtime and offsets the benefits of a smaller bundle.

Components authored with render functions or JSX remain VDOM components and also require interop when used in a Vapor application.

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 may still be rough edges when using a VDOM-based component library in Vapor Mode.

In general, we recommend having distinct regions in an app where one rendering mode or the other is used, and avoiding mixed nesting as much as possible.

Feature Compatibility

By design, Vapor Mode supports a subset of existing Vue features. For the supported subset, we aim to deliver the same behavior according to the API specifications. The following features are currently unsupported or do not apply to Vapor Mode:

• Options API
• app.config.globalProperties
• getCurrentInstance() returns null in Vapor components
• @vue:xxx per-element lifecycle events
• v-memo
• Component template refs do not expose properties such as $el, $props, $attrs, $slots, and $refs

Important Usage Considerations

Event Delegation and stopPropagation()

Vapor delegates eligible events to document. Each element stores its own handler, and a single document listener walks the event path and invokes matching handlers.

If any ancestor calls stopPropagation(), the event never reaches document, and the delegated handler will not run.

The following forms bypass delegation and attach the listener directly to the element:

<button @[event]="onClick" />
<button v-bind="{ onClick }" />
<button v-on="{ click: onClick }" />

slots.default() Is Not a Safe Dry Run

In Vapor, slots.default() is not a side-effect-free inspection API. Calling it executes the slot's rendering logic, which may create Blocks and DOM nodes, register reactive effects, and claim existing SSR DOM during hydration.

Do not call a slot to inspect its output before deciding what else to render:

<script setup vapor>
import { useSlots } from 'vue'

const slots = useSlots()
const content = slots.default?.()
const showFallback = !content
</script>

<template>
  <div v-if="showFallback">Fallback</div>
</template>

Instead, leave slot rendering to the template:

<template>
  <slot />
</template>

Custom Directives Use a Different Interface

Custom 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. Reactive effects can be set up using watchEffect() and are automatically released when the component unmounts. A directive may also return a cleanup function:

const MyDirective = (el, source) => {
  watchEffect(() => {
    el.textContent = source()
  })
  return () => console.log('cleanup')
}

Behavior Consistency

Vapor Mode attempts to match VDOM Mode behavior as much as possible, but minor inconsistencies may still exist in edge cases because the two rendering modes are fundamentally different. In general, a minor inconsistency is not considered a breaking change unless the behavior has previously been documented.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

Vue 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.

Features

• runtime-vapor: support render block in createDynamicComponent (#14213) (ddc1bae)

Performance Improvements

• runtime-vapor: implement dynamic props/slots source caching (#14208) (1428c06)

Bug Fixes

• compiler-vapor: camelize kebab-case component event handlers (#14211) (b205408)
• compiler-vapor: merge component v-model onUpdate handlers (#14229) (e6bff23)
• compiler-vapor: wrap handler values in functions for dynamic v-on (#14218) (1e3e1ef)
• hmr: suppress provide() warning during HMR updates for mounted instances (#14195) (d823d6a)
• keep-alive: preserve fragment's scope only if it include a component that should be cached (26b0b37)
• runtime-core: remove constructor props for defineComponent (#14223) (ad0a237)
• runtime-vapor: implement v-once caching for props and attrs (#14207) (be2b79d)
• runtime-vapor: optimize prop handling in VaporTransitionGroup using Proxy (0ceebeb)
• transition: move kept-alive node before v-show transition leave finishes (e393552)
• transition: optimize prop handling in VaporTransition using Proxy (b092624)
• transition: prevent unmounted block from being inserted after transition leave (f9a9fad)

About Vapor Mode

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.

General Stability Notes

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:

• Partial usage in existing apps, e.g. implementing a perf-sensitive sub page in Vapor Mode.
• Build small new apps entirely in Vapor Mode.

Opting in to Vapor Mode

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:

1. 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.

2. 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.

VDOM Interop Limitations

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.

Feature Compatibility

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:

• Options API
• app.config.globalProperties
• getCurrentInstance() returns null in Vapor components
• @vue:xxx per-element lifecycle events

Custom 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')
}

Behavior Consistency

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.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

Features

• vapor mode (#12359) (bfe5ce3)

  Please see About Vapor Mode section below for details.

Performance Improvements

• reactivity: refactor reactivity core by porting alien-signals (#12349) (313dc61)

Bug Fixes

• css-vars: nullish v-bind in style should not lead to unexpected inheritance (#12461) (c85f1b5), closes #12434 #12439 #7474 #7475
• reactivity: ensure multiple effectScope on() and off() calls maintains correct active scope (#12641) (679cbdf)
• reactivity: queuing effects in an array (#13078) (826550c)
• reactivity: toRefs should be allowed on plain objects (ac43b11)
• scheduler: improve error handling in job flushing (#13587) (94b2ddc)
• scheduler: recover nextTick from error in post flush cb (2bbb6d2)

About Vapor Mode

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.

General Stability Notes

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:

• Partial usage in existing apps, e.g. implementing a perf-sensitive sub page in Vapor Mode.
• Build small new apps entirely in Vapor Mode.

We do not recommend migrating eixsting components to Vapor Mode yet.

Pending Features

Things that do not work in this version yet:

• SSR hydration* (which means it does not work with Nuxt yet)
• Async Component*
• Transition*
• KeepAlive*
• Suspense

Features marked with * have pending PRs which will be merged during the alpha phase.

Opting in to Vapor Mode

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:

1. 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.

2. 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.

VDOM Interop Limitations

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.

Feature Compatibility

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:

• Options API
• app.config.globalProperties
• getCurrentInstance() returns null in Vapor components
• Implicit instance properties like $slots and $props are not available in Vapor template expressions
• @vue:xxx per-element lifecycle events

Custom 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')
}

Behavior Consistency

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.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details.
For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

Bug Fixes

• compiler-core: avoid crash on CDATA at the document root (#14916) (0ea17e2)
• compiler-core: prefix dynamic keys on v-memo elements (#14922) (68e978e), closes #14920
• compiler-sfc: handle vue-ignore on leading intersection/union type (#14950) (0dcd225), closes #12254
• compiler-sfc: respect var hoisting in props destructure (48ad452)
• reactivity: preserve watch callback return value when wrapped for once: true (#14902) (450a8a8)
• runtime-core: add dev warning for silent catch in compat mode and fix test description typo (#14891) (db3e117)
• runtime-core: force model update when reverted before sync (#14897) (7f76378), closes #13524
• runtime-core: skip async component callbacks after unmount (#14911) (5300ead)
• transition: avoid move transition for hidden v-show group children (#14895) (c11f6ee), closes #14894
• watch: trigger immediate callback for empty sources (#14914) (1f2ca7e), closes #14898

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.

For stable releases, please refer to CHANGELOG.md for details. For pre-releases, please refer to CHANGELOG.md of the minor branch.