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.

• 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 - Typing Template Refs
  • Guide - Typing Component Template Refs

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.