vue-uid

vue-uid

Unique ID for Vue.js component.

Install

$ yarn add vue-uid

Usage

Plugin or Mixin.

Plugin all components have uid.

Components with mixin have uid. Other components don't have uid.

Plugin

Install plugin

import Vue from 'vue';
import VueUid from 'vue-uid';
 
Vue.use(VueUid);

Use with component

<template>
  <input v-bind:id="`input-${$_uid}`" />
</template>

<script>
export default {
  mounted() {
    const uid = this.$_uid;
    console.log(uid); // 1 (Number)
  },
};
</script>

Mixin

Use with component

<template>
  <input v-bind:id="`input-${$_uid}`" />
</template>

<script>
import { vueUidMixin } from 'vue-uid';

export default {
  mixins: [vueUidMixin],

  mounted() {
    const uid = this.$_uid;
    console.log(uid); // 1 (Number)
  },
};
</script>

Option

name

Change property name.

e.g.

import Vue from 'vue';
import VueUid from 'vue-uid';

Vue.use(VueUid, {
  name: 'uid',
});

when

<template>
  <input v-bind:id="`input-${uid}`" />
</template>

<script>
export default {
  mounted() {
    const uid = this.uid; // changed
  },
};
</script>

Public API

Reset UID

import { uid } from 'vue-uid';

uid.reset();

setName for mixin

import { uid } from 'vue-uid';

uid.setName('uid');

For Nuxt.js

nuxt-uid-module