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:

``javascript
import UniqueId from 'vue-unique-id';
// or
const UniqueId = require('vue-unique-id');

Vue.use(UniqueId);
`

Examples

$3

Each Vue component has a unique uid property.

`javascript
const MyComponent = {
created() {
console.log("This component's unique id is: " + this.uid);
},
};
`

$3

In order for an 's to work correctly, a unique id must be assigned to the and referenced by the . This example shows how a reusable Vue component containing labelled s can generate a unique id for each of its elements.

Vue template:
`html
Field 1


Field 2

`

Rendered output:
`html
Field 1


Field 2

`

$3

In this example, a unique id is assigned to the div.collapse element and referenced by the toggle buttons.

Vue template:
`html

Link with href


Button with data-target

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.

`

Rendered output:
`html

Link with href


Button with data-target

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.

`

API

$3

Immutable string containing the component's unique identifier. The uid property name can be changed with the plugin options.

$3

Component-scoped HTML id generator. The optional id parameter specifies the id to scope to the component.

$3

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

`javascript
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.

License

ISC