useUid - generate unique id for a Vue instance

When authoring accessible components, sometimes you need an unique id to use on eg. <label for=""/> elements or for aria-describedby attrs

<template>
  <div id="description">This is a deadly {{animal}}</div>
  <span aria-describedby="dsecription">{{ animal ==== 'snake' ? 'sssssssssss' : 'bark?'  }}</span> 
</template>

The above example is wrong because what if you use the above component many times in the same wrapper component? The id=“description” occurs several times and is not uniquely tied to one single, correct description

That can be fixed by doing :id=“uid”, where uid is the uniqe id generated during created() lifecycle hook

Propsal:

<script setup>
const {uid} = useUid();
</script>

I think it’s worth providing it as a composable that you have to destructure rather than a raw function to prevent people from calling uuid() manually in the template (which I guess could generate a different id on rerenders, especially if you used uuid() multiple times in the template, with const {uuid} = useUuid() it’s harder to run into that problem)

[bklik]

Came here kind of looking for the same thing. Here’s another option:

// Returns a random Universally Unique Identifier (UUID)
export function useUUID(pattern?: string) {
    // Accept any desired pattern. If no pattern is provided
    // default to a RFC4122 UUID pattern.
    const _pattern = pattern ? pattern : 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';

    // Replace each character in the pattern
    // leaving any non x|y character alone.
    return _pattern.replace(/[xy]/g, replacePattern);
}

function replacePattern(c: string) {
    // Random hexadecimal number
    const r = (Math.random() * 16) | 0;

    // If 'x' return hexadecimal number,
    // if 'y' return [8-11] randomly
    const v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
}

[iamandrewluca]

Also for who just wants a simple unique id, that does not repeat, and not need to be uuid

use-id.js

let id = 0;
export function useUid() {
  return String(id++)
}

<template>
  <label :for="firstId">Name</label>
  <input :id="firstId" type="text" />

  <label :for="secondId">Surname</label>
  <input :id="secondId" type="text" />
<template>
<script setup>
  import { useId } from "./use-id";

  let firstId = useId();
  let secondId = useId();
</script>