useId composable | Quasar Framework

Why donate

API Explorer

How to contribute

Options & Helpers

Style & Identity

Layout and Grid

Vue Directives

Quasar Plugins

Vue Composables

useQuasar

useDialogPluginComponent

Security

Quasar CLI (with Vite)

Quasar CLI (with Webpack)

Icon Genie CLI

App Extensions

Quasar Utils

useId composable

Quasar v2.15+

The useId() composable returns an “id” which is a ref() that can be used as a unique identifier to apply to a DOM node attribute.

Should you supply a function (getValue from the typing below) to get the value that the id might have, it will make sure to keep it updated.

On SSR, it takes into account the process of hydration so that your component won’t generate any such errors.

Syntax

import { useId } from 'quasar'

setup () {
  const { id } = useId()
  // ...
}

function useId(
  opts?: {
    getValue?: () => string | null | undefined;
    required?: boolean; // default: true
  }
): {
  id: Ref<string>;
};

Example

<template>
  <div :id="id">
    Some component
  </div>
</template>

<script>
import { useId } from 'quasar'

export default {
  props: {
    for: String
  },

  setup () {
    const { id } = useId({
      getValue: () => props.for,
      required: true
    })

    return { id }
  }
}
</script>

Caught a mistake?Edit this page in browser

1. Introduction

2. Syntax

3. Example