vue-localid v1.1.2
vue-localid
Vue plugin to implement component scoped tag IDs.
Use of IDs in Vue components
Sometimes you want or need IDs in your Vue components. That might by OK if such a component is used only once within the browser DOM. However, If such a component is rendered multiple times it produces invalid HTML and possibly unexpected behaviour.
This example shows a very common HTML construct:
<form>
<input type="checkbox" id="cb_enable_something">
<label for="cb_enable_something">
Enable something
</label>
</form>
Many CSS solutions demand such a construct with a label tag next to the input tag. The only possible linkage is an ID. In this case you need IDs, but this code must never appear more than once inside your DOM.
This plugin adds a directive to automatically convert IDs and
several attributes like "for" into application-unique names.
It's implemented as a fire-and-forget solution code:
You can keep your id-based code and just add the directive
v-localid
to the corresponding tags.
Supported attributes:
- id
- for
- form
- aria-activedescendant
- aria-controls
- aria-describedby
- aria-flowto
- aria-labelledby
- aria-owns
Installation
NPM
npm install vue-localid
Usage
Apply the plugin either globally (e.g. in your main.js file) or from a component.
import Vue from 'vue'
import Localid from 'vue-localid'
Vue.use(Localid)
If you prefer a shorter form and don't bother about mixing module syntax, you can use:
import Vue from 'vue'
Vue.use(require('vue-localid').default)
Apply the directive "localid" to tags containing "id" or "for" attributes:
<form>
<input type="checkbox" id="cb_enable_something" v-localid>
<label for="cb_enable_something" v-localid>
Enable something
</label>
</form>
This will be rendered as such:
<!-- render result -->
<form>
<input type="checkbox" id="id_3_cb_enable_something">
<label for="id_3_cb_enable_something">
Enable something
</label>
</form>
The applied number (here: 3) is the _uid
member
of the component instance.
Script access
You can generate compatible IDs from component scripts:
// returns the same ID as from the template id/from attributes
let myId = this.$localid.build("cb_enable_something");
However, addressing the DOM directly, especially with IDs, might be considered a Vue anti-pattern.
Extended usage
Alternate naming
If the name "localid" is in conflict with any other module or construct you can use your own name:
import Vue from 'vue'
import vuelocalid from 'vue-localid'
Vue.use(vuelocalid, { name: 'compid' })
<label for=cb_enable_something" v-compid>
let myId = this.$compid.build("cb_enable_something");
LICENSE
MIT