vue-unique-id
v3.2.1
Published
Component and HTML unique id generation plugin for Vue.js
Downloads
24,626
Maintainers
Readme
vue-unique-id
Vue.js plugin that generates component-scoped HTML identifiers for use in form inputs, labels, jQuery plugins, etc. This solves the problem of generating unique HTML ids for DOM elements when creating reusable Vue components that can be instantiated multiple times in a page.
As a bonus, this plugin also generates a unique id property (uid
by default) for each Vue.js component.
This plugin has no external dependencies.
Installation
via npm (node package manager)
$ npm install vue-unique-id
Then configure Vue to use the plugin:
import UniqueId from 'vue-unique-id';
// or
const UniqueId = require('vue-unique-id');
Vue.use(UniqueId);
Examples
Unique Component Identifier
Each Vue component has a unique uid
property.
const MyComponent = {
created() {
console.log("This component's unique id is: " + this.uid);
},
};
Form Inputs with Labels
In order for an <input>
's <label>
to work correctly, a unique id must be assigned to the <input>
and referenced by the <label>
. This example shows how a reusable Vue component containing labelled <input>
s can generate a unique id for each of its <input>
elements.
Vue template:
<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" />
Rendered output:
<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" />
Bootstrap Collapse Button
In this example, a unique id is assigned to the div.collapse
element and referenced by the toggle buttons.
Vue template:
<p>
<a class="btn btn-primary" data-toggle="collapse" :href="$idRef('collapseExample')">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" :data-target="$idRef('collapseExample')">
Button with data-target
</button>
</p>
<div class="collapse" :id="$id('collapseExample')">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
Rendered output:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#uid-42-collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#uid-42-collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="uid-42-collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
API
vm.uid
Immutable string containing the component's unique identifier. The uid
property name can be changed with the plugin options.
vm.$id(id = '')
Component-scoped HTML id generator. The optional id parameter specifies the id to scope to the component.
vm.$idRef(id = '')
Component-scoped HTML id reference (href) generator. The optional id parameter specifies the id to scope to the component. Prepends '#'
to the id generated by vm.$id(id)
.
Plugin Options
const DEFAULTS = {
// {string} Property name of the component's unique identifier. Change this if 'vm.uid' conflicts
// with another plugin or your own props.
uidProperty: 'uid',
// {string} Prefix to use when generating HTML ids. Change this to make your ids more unique on a
// page that already uses or could use a similar naming scheme.
uidPrefix: 'uid-',
};
Run Unit Tests
$ npm test
Contributing
Contributors are welcome! See here for more info.