Skip to content

Composition API: Helpers

useAttrs()

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.

  • Type

    ts
    function useAttrs(): Record<string, unknown>

useSlots()

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.

  • Type

    ts
    function useSlots(): Record<string, (...args: any[]) => VNode[]>

useModel()

This is the underlying helper that powers 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()

Returns a shallow ref whose value will be synced with the template element or component with a matching ref attribute.

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.

Composition API: Helpers has loaded