$npx -y skills add skilld-dev/vue-ecosystem-skills --skill vue-skilldThe progressive JavaScript framework for building modern web UI. ALWAYS use when editing or working with *.vue files or code importing \"vue\". Consult for debugging, best practices, or modifying vue, core.
| 1 | # vuejs/core `vue@3.6.0-beta.10` |
| 2 | **Tags:** csp: 1.0.28-csp, v2-latest: 2.7.16, legacy: 2.7.16 |
| 3 | |
| 4 | **References:** [Docs](./references/docs/_INDEX.md) |
| 5 | ## API Changes |
| 6 | |
| 7 | This section documents version-specific API changes — prioritize recent major/minor releases. |
| 8 | |
| 9 | - NEW: `createVaporApp()` (experimental) — new in v3.6, creates a Vapor-mode app instance without pulling in the Virtual DOM runtime; use `createApp()` for standard VDOM apps [source](./references/releases/v3.6.0-alpha.1.md#about-vapor-mode) |
| 10 | |
| 11 | - NEW: `vaporInteropPlugin` (experimental) — new in v3.6, install into a VDOM `createApp()` instance to allow Vapor components inside VDOM trees; without it, Vapor SFCs cannot be used in VDOM apps [source](./references/releases/v3.6.0-beta.1.md#about-vapor-mode) |
| 12 | |
| 13 | - NEW: `<script setup vapor>` attribute (experimental) — new in v3.6, opts an SFC into Vapor Mode compilation; only works with `<script setup>`; does not support Options API, `app.config.globalProperties`, or `getCurrentInstance()` [source](./references/releases/v3.6.0-beta.1.md#opting-in-to-vapor-mode) |
| 14 | |
| 15 | - NEW: `useTemplateRef(key)` — new in v3.5, preferred replacement for plain `ref` variable names matching `ref="key"` attributes; supports dynamic string IDs at runtime unlike the old static-only pattern [source](./references/releases/blog-3.5.md#usetemplateref) |
| 16 | |
| 17 | - NEW: `useId()` — new in v3.5, generates stable unique IDs per component instance guaranteed to match between SSR and client hydration; replaces manual ID management for form/accessibility attributes [source](./references/releases/blog-3.5.md#useid) |
| 18 | |
| 19 | - NEW: `onWatcherCleanup(fn)` — new in v3.5, registers a cleanup callback inside a `watch` or `watchEffect` callback; replaces the `onCleanup` parameter pattern and can be called from nested functions [source](./references/releases/blog-3.5.md#onwatchercleanup) |
| 20 | |
| 21 | - NEW: `hydrateOnVisible()`, `hydrateOnIdle()`, `hydrateOnInteraction()`, `hydrateOnMediaQuery()` — new in v3.5, lazy hydration strategies passed to `defineAsyncComponent({ hydrate: hydrateOnVisible() })`; without the `hydrate` option, async components hydrate immediately [source](./references/releases/blog-3.5.md#lazy-hydration) |
| 22 | |
| 23 | - NEW: `defineModel()` stable — promoted from experimental in v3.3 to stable in v3.4; automatically declares a prop and returns a mutable ref; replaces the manual `defineProps` + `defineEmits('update:modelValue')` pattern [source](./references/releases/blog-3.4.md#definemodel-is-now-stable) |
| 24 | |
| 25 | - NEW: `defineProps` destructure with defaults — stabilized in v3.5 (was experimental in v3.3); `const { count = 0 } = defineProps<{ count?: number }>()` replaces `withDefaults(defineProps<...>(), { count: 0 })`; destructured vars must be wrapped in getters to pass to `watch()` or composables [source](./references/releases/blog-3.5.md#reactive-props-destructure) |
| 26 | |
| 27 | - BREAKING: `@vnodeXXX` event listeners — removed in v3.4, are now a compiler error; use `@vue:XXX` listeners instead (e.g. `@vue:mounted`) [source](./references/releases/blog-3.4.md#other-removed-features) |
| 28 | |
| 29 | - BREAKING: Reactivity Transform (`$ref`, `$computed`, etc.) — removed in v3.4 after being deprecated in v3.3; was experimental and distinct from the now-stable props destructure feature; use Vue Macros plugin to continue using it [source](./references/releases/blog-3.4.md#other-removed-features) |
| 30 | |
| 31 | - BREAKING: Global `JSX` namespace — no longer registered by default since v3.4; set `jsxImportSource: "vue"` in `tsconfig.json` or import `vue/jsx` to restore it; affects TSX users only [source](./references/releases/blog-3.4.md#global-jsx-namespace) |
| 32 | |
| 33 | - BREAKING: `app.config.unwrapInjectedRef` — removed in v3.4; ref unwrapping in `inject()` is now always enabled and cannot be disabled [source](./references/releases/blog-3.4.md#other-removed-features) |
| 34 | |
| 35 | - NEW: `<Teleport defer>` prop — new in v3.5, mounts the teleport after the current render cycle so the target element can be rendered by Vue in the same component tree; requires explicit `defer` attribute for backwards compatibility [source](./references/releases/blog-3.5.md#deferred-teleport) |
| 36 | |
| 37 | **Also changed:** `defineSlots<{}>()` macro NEW v3.3 for typed slot declarations · `defineOptions({})` macro NEW v3.3 to set component options without a separate `<script>` block · `toRef(() => getter)` enhanced in v3.3 to accept plain values and getters · `toValue()` NEW v3.3 normalizes values/getters/refs to values (inverse of `toRef`) · `v-bind` same-name shorthand NEW v3.4 (`:id` shorthand for `:id="id"`) · `data-allow-mismatch` attribute NEW v3.5 to suppress hydration mismatch warnings · `useHost()` / `useShadowRoot()` NEW v3.5 for custom el |