In reference to Nihat's comment (mentioned above): Evan You has cautioned against the use of _uid: "The vm _uid is reserved for internal purposes and it's crucial to maintain its confidentiality (and not depend on it in user code) to preserve the flexibility to modify its functionality for potential future scenarios. ... I would recommend creating UIDs yourself [using a module, a global mixin, etc.]"

Implementing the suggested mixin from this GitHub issue to generate the UID appears to be a more suitable approach:

let uuid = 0;

export default {
  beforeCreate() {
    this.uuid = uuid.toString();
    uuid += 1;
  },
};

Update

The newly released vue-unique-id Vue plugin is now available on npm.

Solution

In addressing the challenge of incorporating multiple form elements in a component, this plugin offers an innovative approach to generating unique IDs:

Vue.use((Vue) => {
  // Assign a unique id to each component
  let uidCounter = 0;
  Vue.mixin({
    beforeCreate: function() {
      this.uidCounter = uidCounter.toString();
      uidCounter += 1;
    },
  });

  // Generate a component-scoped id
  Vue.prototype.$id = function(id) {
    return "uid-" + this.uidCounter + "-" + id;
  };
});

This method avoids using the internal _uid property, which is specifically designated for internal operations.

Implementation within your component follows this format:

<label :for="$id('field1')">Field 1</label>
<input :id="$id('field1')" type="text" />

<label :for="$id('field2')">Field 2</label>
<input :id="$id('field2')" type="text" />

Resulting in output like the following:

<label for="uid-42-field1">Field 1</label>
<input id="uid-42-field1" type="text" />

<label for="uid-42-field2">Field 2</label>
<input id="uid-42-field2" type="text" />

Important Update: In the scenario where the ._uid property is absent in the instance, an error will be thrown. This provides the opportunity to modify it and utilize a different custom or new unique id property if Vue offers one.

While zxzak's explanation is commendable, it should be noted that _uid is not officially documented as an API property. To prevent potential issues in the event of changes in the future, consider updating your code with a simple modification using a plugin solution as demonstrated below.

Vue.use({
    install: function(Vue, options) {
        Object.defineProperty(Vue.prototype, "uniqId", {
            get: function uniqId() {
                if ('_uid' in this) {
                   return this._uid;
                }
                throw new Error("The _uid property does not exist");
            }
        });
    }
});

npm install lodash.uniqueid

Next, integrate the following code into your project...

<script>
  const uniqueId = require('lodash.uniqueid')

  export default {
    data () {
      return {
        id: ''
      }
    },
    mounted () {
       this.id = uniqueId()
    }
  }
</script>

This method enables you to avoid loading the entire lodash library or storing the complete library in node_modules.

To obtain the id in Vue.js version 3, you can use the following methods:

Within the template: {{ $.uid }}

In the script: this.$.uid

Alternatively, you can create your own function or combine these approaches:

this.componentUid = ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
          (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
        );

This will generate an id like:

aa174375-5b75-4919-acd0-980fcd54003c

To simplify the process, I discovered a method of manually creating a UUID using the uuid package within a global mixin. This eliminates dependency on anything that may change or become outdated in the future, such as this._uid.

Start by installing the uuid package:

npm i uuid

Next, in your main.js, set up a global mixin:

// remaining imports

import { v4 as uuidv4 } from 'uuid';

const app = Vue.createApp(App);

app.mixin({
    data() {
        return {
            componentId: uuidv4()
        }
    },
});

app.use(store).use(router).mount('#app');

Now, you can use it in a component like so:

<template>
   <div>
      <h1>{{ componentId }}</h1>
      <button @click="printId()">Click here for componentId.</button>
   </div>
</template>

<script>
export default {
   methods: {
      printId: function() {
         console.log(this.componentId);
      }
   }
}
</script>

It appears that this solution is effective for me when using nuxtjs

https://www.npmjs.com/package/uuid

Here is an example of the generated output: element: 47bfe557-d75f-455c-9a37-85b7935b297b

package.json

"dependencies": {    
    "uuid": "^8.3.2"
 },

On a child component, it may not be the most optimal approach but it seems to function correctly

...

<ComponentName v-if="element" />

...

import { v4 as uuidv4 } from 'uuid';

...

data() {
  return {
    element: null,
  }
}

...

mounted() {
  this.element = uuidv4();
}

If TypeScript is being used, it's possible to create a unique id for each class component by adding a static id and incrementing it in the created() method. To avoid conflicts with other components using the same approach, a string prefix can be added to the id.

<template>
  <div>
    <label :for="id">Label text for {{id}}</label>
    <input :id="id" type="text" />
  </div>
</template>

<script lang="ts">
  ...
  @Component
  export default class MyComponent extends Vue {
    private id!: string;
    private static componentId = 0;
    ...
    created() {
      MyComponent.componentId += 1;
      this.id = `my-component-${MyComponent.componentId}`;
    }
</script>

An innovative solution that hasn't been mentioned before is:

<template>
  <div>
    <label :for="id">Label description for {{id}}</label>
    <input :id="id" type="text" />
  </div>
</template>

<script>
import uniqueId from 'lodash-es/uniqueId'

export default {
  computed: {
    id () {
      # return this._uid
      return uniqueId('id')
    }
  }
}
</script>

If you're working in Vue2, remember to utilize v-bind.

Imagine having an object that represents a poll

<div class="options" v-for="option in poll.body.options">
  <div class="poll-item">
    <label v-bind:for="option._id" v-bind:style="{color: option.color}">
      {{option.text}}
    </label>
    <input type="radio" v-model="picked" v-bind:value="option._id" v-bind:id="option._id">
  </div>
</div>

If you're struggling with non-unique IDs in your DOM spread across different components, consider checking out this helpful package:

vue-uniq-ids

Using components is a popular trend for their simplicity and modularity, but dealing with the id property can be tricky.

Certain HTML tag attributes require unique ids, such as label[for], input[form], and various aria-* attributes. The issue arises when multiple elements share the same id value, potentially causing conflicts.

VueUniqIds offers a solution to this dilemma by providing directives that automatically generate unique id values, ensuring clarity while avoiding conflicts.

This solution has been effective for me by utilizing https://www.npmjs.com/package/uuid

Here is an example of the output generated: element: 47bfe557-d75f-455c-9a37-85b7935b297b

package.json

"dependencies": {    
    "uuid": "^8.3.2"
 },

component.vue

v-if="element"

...

import { v4 as uuidv4 } from 'uuid';

...

data() {
  return {
    element: null,
  }
}

...

mounted() {
  this.element = uuidv4();
}