mya-ake / vue-uid

Unique ID for Vue.js component

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>
  <div>
    <div>
      <label v-bind:for="`input-${$_uid}`">Name</label>
      <input v-bind:id="`input-${$_uid}`" />
    </div>
    or
    <div>
      <label v-bind:for="id">Name</label>
      <input v-bind:id="id" />
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    id() {
      return `input-${this.$_uid}`;  // e.g. input-1
    },
  },
};
</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>

Options

name (option)

• type: String
• default: $_uid

Change property name.

e.g.

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

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

when

<template>
  <div>
    <div>
      <label v-bind:for="`input-${uid}`">Name</label>
      <input v-bind:id="`input-${uid}`" />
    </div>
    or
    <div>
      <label v-bind:for="id">Name</label>
      <input v-bind:id="id" />
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    id() {
      // change property name
      return `input-${this.uid}`;  // e.g. input-1
    },
  },
};

Public API

reset()

Rest UID count.

import { uid } from 'vue-uid';

uid.reset();

setName(name: String)

Same as name option. This method is for mixin.

import { uid } from 'vue-uid';

uid.setName('uid');

For Nuxt.js

nuxt-uid-module

Contribution

If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

License

MIT