Add unique IDs to elements

Learn how to have a unique ID for elements by default.

We can add a unique ID to each element via a plugin:

// vueform.config.js

import { defineConfig } from '@vueform/vueform'
import { ref } from 'vue'

const generateUUID = () => {
  const array = new Uint8Array(16)
  window.crypto.getRandomValues(array)

  array[6] = (array[6] & 0x0f) | 0x40
  array[8] = (array[8] & 0x3f) | 0x80

  return [...array].map((byte, index) => {
    return (index === 4 || index === 6 || index === 8 || index === 10 ? '-' : '') + byte.toString(16).padStart(2, '0')
  }).join('')
}

const uniqueIdsPlugin = {
  apply: /^[a-zA-Z]+Element$/,
  setup(props, context, component) {
    const uniqueId = ref(generateUUID())

    return {
      ...component,
      uniqueId,
    }
  }
}

export default defaultConfig({
  plugins: [
    uniqueIdsPlugin,
  ],
})

Add unique IDs to elements ​

Add unique IDs to elements