vue-uid
TypeScript icon, indicating that this package has built-in type declarations

0.4.5 • Public • Published

vue-uid

npm version License: MIT

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.4.5
    569
    • latest

Version History

Package Sidebar

Install

npm i vue-uid

Weekly Downloads

569

Version

0.4.5

License

MIT

Unpacked Size

194 kB

Total Files

19

Last publish

Collaborators

  • mya-ake