Composition API: Helpers | Vue.js

Reactivity: Utilities
Reactivity: Advanced
Dependency Injection
Options: Composition
Syntax Specification
Server-Side Rendering
TypeScript Utility Types
Returns the attrs object from the Setup Context, which includes the fallthrough attributes of the current component. This is intended to be used in <script setup> where the setup context object is not available.
Returns the slots object from the 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() should be preferred instead.
This is the underlying helper that powers defineModel(). If using <script setup>, defineModel() should be preferred instead.
Only available in 3.4+
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.
Returns a shallow ref whose value will be synced with the template element or component with a matching ref attribute.
Used to generate unique-per-application IDs for accessibility attributes or form elements.
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.
useId() should not be called inside a computed() property as it may cause instance conflicts. Instead, declare the ID outside of computed() and reference it within the computed function.
Edit this page on GitHub