3.5 updates

.vitepress/config.ts

@@ -368,6 +368,10 @@ export const sidebar: ThemeConfig['sidebar'] = {
         {
           text: 'Dependency Injection',
           link: '/api/composition-api-dependency-injection'
+        },
+        {
+          text: 'Helpers',
+          link: '/api/composition-api-helpers'
         }
       ]
     },
@@ -417,6 +421,7 @@ export const sidebar: ThemeConfig['sidebar'] = {
     {
       text: 'Advanced APIs',
       items: [
+        { text: 'Custom Elements', link: '/api/custom-elements' },
         { text: 'Render Function', link: '/api/render-function' },
         { text: 'Server-Side Rendering', link: '/api/ssr' },
         { text: 'TypeScript Utility Types', link: '/api/utility-types' },

src/api/application.md

@@ -90,6 +90,18 @@ Unmounts a mounted application instance, triggering the unmount lifecycle hooks
   }
   ```
 
+## app.onUnmount() <sup class="vt-badge" data-text="3.5+" /> {#app-onunmount}
+
+Registers a callback to be called when the app is unmounted.
+
+- **Type**
+
+  ```ts
+  interface App {
+    onUnmount(callback: () => any): void
+  }
+  ```
+
 ## app.component() {#app-component}
 
 Registers a global component if passing both a name string and a component definition, or retrieves an already registered one if only the name is passed.
@@ -271,10 +283,12 @@ Provide a value that can be injected in all descendant components within the app
   - [App-level Provide](/guide/components/provide-inject#app-level-provide)
   - [app.runWithContext()](#app-runwithcontext)
 
-## app.runWithContext()<sup class="vt-badge" data-text="3.3+" /> {#app-runwithcontext}
+## app.runWithContext() {#app-runwithcontext}
 
 Execute a callback with the current app as injection context.
 
+- Only supported in 3.3+
+
 - **Type**
 
   ```ts
@@ -610,3 +624,41 @@ An object for defining merging strategies for custom component options.
   ```
 
 - **See also** [Component Instance - `$options`](/api/component-instance#options)
+
+## app.config.idPrefix <sup class="vt-badge" data-text="3.5+" /> {#app-config-idprefix}
+
+Configure a prefix for all IDs generated via [useId()](/api/general#useid) inside this application.
+
+- **Type:** `string`
+
+- **Default:** `undefined`
+
+- **Example**
+
+  ```js
+  app.config.idPrefix = 'my-app'
+  ```
+
+  ```js
+  // in a component:
+  const id1 = useId() // 'my-app:0'
+  const id2 = useId() // 'my-app:1'
+  ```
+
+## app.config.throwUnhandledErrorInProduction <sup class="vt-badge" data-text="3.5+" /> {#app-config-throwunhandlederrorinproduction}
+
+Force unhandled errors to be thrown in production mode.
+
+- **Type:** `boolean`
+
+- **Default:** `false`
+
+- **Details**
+
+  By default, errors thrown inside a Vue application but not explicit handled have different behavior between development and production modes:
+
+  - In development, the error is thrown and can possibly crash the application. This is to make the error more prominent so that it can be noticed and fixed during development.
+
+  - In production, the error will only be logged to the console to minimize the impact to end users. However, this may prevent errors that only happen in production from being caught by error monitoring services.
+
+  By setting `app.config.throwUnhandledErrorInProduction` to `true`, unhandled errors will be thrown even in production mode.

src/api/built-in-components.md

@@ -286,6 +286,12 @@ Renders its slot content to another part of the DOM.
      * Can be changed dynamically.
      */
     disabled?: boolean
+    /**
+     * When `true`, the Teleport will defer until other
+     * parts of the application have been mounted before
+     * resolving its target. (3.5+)
+     */
+    defer?: boolean
   }
   ```
 
@@ -307,6 +313,15 @@ Renders its slot content to another part of the DOM.
   </Teleport>
   ```
 
+  Defer target resolution <sup class="vt-badge" data-text="3.5+" />:
+
+  ```vue-html
+  <Teleport defer to="#late-div">...</Teleport>
+
+  <!-- somewhere later in the template -->
+  <div id="late-div"></div>
+  ```
+
 - **See also** [Guide - Teleport](/guide/built-ins/teleport)
 
 ## `<Suspense>` <sup class="vt-badge experimental" /> {#suspense}

src/api/built-in-directives.md

@@ -259,7 +259,7 @@ Dynamically bind one or more attributes, or a component prop to an expression.
 
 - **Shorthand:**
   - `:` or `.` (when using `.prop` modifier)
-  - Omitting value (when attribute and bound value has the same name) <sup class="vt-badge">3.4+</sup>
+  - Omitting value (when attribute and bound value has the same name, requires 3.4+)
 
 - **Expects:** `any (with argument) | Object (without argument)`
 
@@ -268,8 +268,8 @@ Dynamically bind one or more attributes, or a component prop to an expression.
 - **Modifiers**
 
   - `.camel` - transform the kebab-case attribute name into camelCase.
-  - `.prop` - force a binding to be set as a DOM property. <sup class="vt-badge">3.2+</sup>
-  - `.attr` - force a binding to be set as a DOM attribute. <sup class="vt-badge">3.2+</sup>
+  - `.prop` - force a binding to be set as a DOM property (3.2+).
+  - `.attr` - force a binding to be set as a DOM attribute (3.2+).
 
 - **Usage**
 
@@ -468,7 +468,9 @@ Render the element and component once only, and skip future updates.
   - [Data Binding Syntax - interpolations](/guide/essentials/template-syntax#text-interpolation)
   - [v-memo](#v-memo)
 
-## v-memo <sup class="vt-badge" data-text="3.2+" /> {#v-memo}
+## v-memo {#v-memo}
+
+- Only supported in 3.2+
 
 - **Expects:** `any[]`
 

src/api/compile-time-flags.md

@@ -26,12 +26,14 @@ See [Configuration Guides](#configuration-guides) on how to configure them depen
 
   Enable / disable devtools support in production builds. This will result in more code included in the bundle, so it is recommended to only enable this for debugging purposes.
 
-## `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` <sup class="vt-badge" data-text="3.4+" /> {#VUE_PROD_HYDRATION_MISMATCH_DETAILS}
+## `__VUE_PROD_HYDRATION_MISMATCH_DETAILS__` {#VUE_PROD_HYDRATION_MISMATCH_DETAILS}
 
 - **Default:** `false`
 
   Enable/disable detailed warnings for hydration mismatches in production builds. This will result in more code included in the bundle, so it is recommended to only enable this for debugging purposes.
 
+- Only available in 3.4+
+
 ## Configuration Guides {#configuration-guides}
 
 ### Vite {#vite}

src/api/composition-api-dependency-injection.md

@@ -107,10 +107,12 @@ Injects a value provided by an ancestor component or the application (via `app.p
   - [Guide - Provide / Inject](/guide/components/provide-inject)
   - [Guide - Typing Provide / Inject](/guide/typescript/composition-api#typing-provide-inject) <sup class="vt-badge ts" />
 
-## hasInjectionContext() <sup class="vt-badge" data-text="3.3+" /> {#has-injection-context}
+## hasInjectionContext() {#has-injection-context}
 
 Returns true if [inject()](#inject) can be used without warning about being called in the wrong place (e.g. outside of `setup()`). This method is designed to be used by libraries that want to use `inject()` internally without triggering a warning to the end user.
 
+- Only supported in 3.3+
+
 - **Type**
 
   ```ts

src/api/composition-api-helpers.md

@@ -0,0 +1,129 @@
+# Composition API: Helpers {#composition-api-helpers}
+
+## useAttrs() {#useattrs}
+
+Returns the `attrs` object from the [Setup Context](/api/composition-api-setup#setup-context), which includes the [fallthrough attributes](/guide/components/attrs#fallthrough-attributes) of the current component. This is intended to be used in `<script setup>` where the setup context object is not available.
+
+- **Type**
+
+  ```ts
+  function useAttrs(): Record<string, unknown>
+  ```
+
+## useSlots() {#useslots}
+
+Returns the `slots` object from the [Setup Context](/api/composition-api-setup#setup-context), which includes parent passed slots as callable functions that return Virtual DOM nodes. This is intended to be used in `<script setup>` where the setup context object is not available.
+
+If using TypeScript, [`defineSlots()`](/api/sfc-script-setup#defineslots) should be preferred instead.
+
+- **Type**
+
+  ```ts
+  function useSlots(): Record<string, (...args: any[]) => VNode[]>
+  ```
+
+## useModel() {#usemodel}
+
+This is the underlying helper that powers [`defineModel()`](/api/sfc-script-setup#definemodel). If using `<script setup>`, `defineModel()` should be preferred instead.
+
+- Only available in 3.4+
+
+- **Type**
+
+  ```ts
+  function useModel(
+    props: Record<string, any>,
+    key: string,
+    options?: DefineModelOptions
+  )
+
+  type DefineModelOptions<T = any> = {
+    get?: (v: T) => any
+    set?: (v: T) => any
+  }
+  ```
+
+- **Example**
+
+  ```js
+  export default {
+    props: ['count'],
+    emits: ['update:count'],
+    setup(props) {
+      const msg = useModel(props, 'count')
+      msg.value = 1
+    }
+  }
+  ```
+
+- **Details**
+
+  `useModel()` can be used in non-SFC components, e.g. when using raw `setup()` function. It expects the `props` object as the first argument, and the model name as the second argument. The optional third argument can be used to declare custom getter and setter for the resulting model ref. Note that unlike `defineModel()`, you are responsible for declaring the props and emits yourself.
+
+## useTemplateRef() <sup class="vt-badge" data-text="3.5+" /> {#usetemplateref}
+
+Returns a shallow ref whose value will be synced with the template element or component with a matching ref attribute.
+
+- **Type**
+
+  ```ts
+  function useTemplateRef<T>(key: string): Readonly<ShallowRef<T | null>>
+  ```
+
+- **Example**
+
+  ```vue
+  <script setup>
+  import { useTemplateRef, onMounted } from 'vue'
+
+  const inputRef = useTemplateRef('input')
+
+  onMounted(() => {
+    inputRef.value.focus()
+  })
+  </script>
+
+  <template>
+    <input ref="input" />
+  </template>
+  ```
+
+- **See also**
+  - [Guide - Template Refs](/guide/essentials/template-refs)
+  - [Guide - Typing Template Refs](/guide/typescript/composition-api#typing-template-refs) <sup class="vt-badge ts" />
+  - [Guide - Typing Component Template Refs](/guide/typescript/composition-api#typing-component-template-refs) <sup class="vt-badge ts" />
+
+## useId() <sup class="vt-badge" data-text="3.5+" /> {#useid}
+
+Used to generate unique-per-application IDs for accessibility attributes or form elements.
+
+- **Type**
+
+  ```ts
+  function useId(): string
+  ```
+
+- **Example**
+
+  ```vue
+  <script setup>
+  import { useId } from 'vue'
+
+  const id = useId()
+  </script>
+
+  <template>
+    <form>
+      <label :for="id">Name:</label>
+      <input :id="id" type="text" />
+    </form>
+  </template>
+  ```
+
+- **Details**
+
+  IDs generated by `useId()` are unique-per-application. It can be used to generate IDs for form elements and accessibility attributes. Multiple calls in the same component will generate different IDs; multiple instances of the same component calling `useId()` will also have different IDs.
+
+  IDs generated by `useId()` are also guaranteed to be stable across the server and client renders, so they can be used in SSR applications without leading to hydration mismatches.
+
+  If you have more than one Vue application instance of the same page, you can avoid ID conflicts by giving each app an ID prefix via [`app.config.idPrefix`](/api/application#app-config-idprefix).