{"id":23186079,"url":"https://github.com/termosa/vue-uniq-ids","last_synced_at":"2025-08-18T16:32:33.814Z","repository":{"id":58243120,"uuid":"82120552","full_name":"termosa/vue-uniq-ids","owner":"termosa","description":"Vue.js 2.x plugin that helps to use id-related attributes with no side-effect","archived":false,"fork":false,"pushed_at":"2022-09-30T09:18:30.000Z","size":33,"stargazers_count":34,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-12-11T21:40:14.250Z","etag":null,"topics":["aria","id","unique","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/termosa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-16T00:21:04.000Z","updated_at":"2023-03-29T18:38:13.000Z","dependencies_parsed_at":"2022-08-31T01:00:11.105Z","dependency_job_id":null,"html_url":"https://github.com/termosa/vue-uniq-ids","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/termosa%2Fvue-uniq-ids","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/termosa%2Fvue-uniq-ids/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/termosa%2Fvue-uniq-ids/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/termosa%2Fvue-uniq-ids/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/termosa","download_url":"https://codeload.github.com/termosa/vue-uniq-ids/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230252844,"owners_count":18197284,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aria","id","unique","vue"],"created_at":"2024-12-18T10:14:25.591Z","updated_at":"2024-12-18T10:14:26.216Z","avatar_url":"https://github.com/termosa.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","杂","UI Components","Miscellaneous"],"readme":"# VueUniqIds\n\nA [Vue.js](https://vuejs.org/) plugin that helps to use id-related attributes with no side-effect\n\n[![NPM version](https://img.shields.io/npm/v/vue-uniq-ids.svg?style=flat-square)](https://www.npmjs.com/package/vue-uniq-ids)\n![Bower version](https://img.shields.io/bower/v/vue-uniq-ids.svg?style=flat-square)\n\nIt is a trend to use components. Components are cool, they are small, obvious, easy to use and  modular. Untill it comes to the `id` property.\n\nSome HTML tag attributes requires using an `id` property, like `label[for]`, `input[form]` and many of `aria-*` attributes. And the problem with the `id` is that it is not modular. If several `id` properties on the page have the same value they can affect each other.\n\n**VueUniqIds** helps you to get rid of this problem. It provides the set of id-related directives which value is automatically modified by adding [unique string](https://www.npmjs.com/package/qinu) while keeping the attrbitue easy to read.\n\n## Installation\n\n### Via NPM\n\nInstall the package\n\n```bash\n$ npm install vue-uniq-ids\n```\n\n### Via Bower\n\nInstall the package\n\n```bash\n$ bower install vue-uniq-ids\n```\n\nadd script on page\n\n```html\n\u003cscript src=\"/bower_components/vue-uniq-ids/dist/vue-uniq-ids.js\"\u003e\u003c/script\u003e\n```\n\nor you can do it with [RequireJS](http://requirejs.org/) or any similar tool.\n\n## Setup\n\nThere are three ways to setup **VueUniqIds**:\n\n### 1. As a plugin\n\n```js\n// Import the plugin\nimport VueUniqIds from 'vue-uniq-ids'\n// or\nimport { UniqIdsPlugin } from 'vue-uniq-ids'\n\n// Install it with Vue.use()\nimport Vue from 'vue'\nVue.use(VueUniqIds, /* options */)\n```\n\n### 2. As a global mixin\n\n```js\nimport Vue from 'vue'\n\n// Import the mixin generator\nimport { createUniqIdsMixin } from 'vue-uniq-ids'\n\n// Create the mixin\nconst uniqIdsMixin = createUniqIdsMixin(/* options */)\n\n// Install it with Vue.mixin()\nVue.mixin(uniqIdsMixin)\n```\n\n### 3. As a local mixin\n\n```js\nimport Vue from 'vue'\n\n// Import the mixin generator\nimport { createUniqIdsMixin } from 'vue-uniq-ids'\n\n// Create the mixin\nconst uniqIdsMixin = createUniqIdsMixin(/* options */)\n\n// Add it to the instance\nnew Vue({\n  mixins: [uniqIdsMixin],\n  // …\n})\n// … or to the component\nVue.component('name', {\n  mixins: [uniqIdsMixin],\n  // …\n})\n```\n\n## Usage\n\nYou can use those directives at any template if you add this extension by `Vue.use()` or `Vue.mixin()`, and in the template of the component where you specify the extension by `mixin: []` property.\n\nHere is an example of using directives in `*.vue` file:\n\n```html\n\u003ctemplate\u003e\n  \u003cform\u003e\n    \u003c!-- Directives are expecting the string literal or a variable --\u003e\n    \u003clabel v-uni-for=\"'username'\"\u003eUsername\u003c/label\u003e\n    \u003c!-- As well you can pass the list of items by array or a string where ids are separated by space --\u003e\n    \u003cinput v-uni-id=\"'username'\"\n        v-uni-aria-describedby=\"['username-description', 'username-hint']\" /\u003e\n    \u003cp v-uni-id=\"'username-description'\"\u003eYour public name\u003c/p\u003e\n    \u003cp v-uni-id=\"'username-hint'\"\u003eUse only latin characters\u003c/p\u003e\n  \u003c/form\u003e\n\u003c/template\u003e\n```\n\nThis will generate something like an example below:\n\n```html\n  \u003cform\u003e\n    \u003clabel for=\"username-pc0k8g5b\"\u003eUsername\u003c/label\u003e\n    \u003cinput id=\"username-pc0k8g5b\"\n        aria-describedby=\"username-description-dnw4bvwy username-hint-oytscr4i\" /\u003e\n    \u003cp id=\"username-description-dnw4bvwy\"\u003eYour public name\u003c/p\u003e\n    \u003cp id=\"username-hint-oytscr4i\"\u003eUse only latin characters\u003c/p\u003e\n  \u003c/form\u003e\n```\n\nThe list of available attributes:\n* id\n* for\n* form\n* aria-activedescendant\n* aria-controls\n* aria-describedby\n* aria-flowto\n* aria-labelledby\n* aria-owns\n\n## Options and customization\n\nThere are several options to customize the behavior of directives. You can pass them in several ways:\n\n0. With the plugin\n   ```js\n   import VueUniqIds from 'vue-uniq-ids'\n   Vue.use(VueUniqIds, options)\n   ```\n0. With the mixin\n   ```js\n   import { createUniqIdsMixin } from 'vue-uniq-ids'\n   Vue.mixin(createUniqIdsMixin(options))\n   // or\n   new Vue({\n     mixins: [createUniqIdsMixin(options)],\n     // …\n   })\n   ```\n0. By uniqIdsConfig property\n   ```js\n   new Vue({\n     uniqIdsConfig: options\n   })\n   ```\n\nThe options is an object, that can contain several properties from the example below:\n```js\nconst options = {\n\n  /*\n   * scope {object|boolean} — is an object to store a list of generated ids\n   *\n   * If object is passed it will be used to store generated ids, so you can\n   * share the same scope between several components\n   * If the value is not object, but it is equivalent to true, the scope\n   * object will be created automatically for current instance\n   * Otherwise, plugin will use the global scope if the plugin was\n   * initialized by Vue.use or Vue.mixin or it will create a new scope.\n   * \n   * By default it is using the global scope\n   */\n  scope: true,\n\n  /*\n   * prefix {string} — a prefix for directive names\n   * By default it is 'uni-'\n   */\n  prefix: 'uni-',\n\n  /*\n   * attrs: {array} — a list of attributes for which directives will be created\n   * By default it is ['id', 'for', 'form', 'aria-activedescendant', 'aria-controls', 'aria-describedby', 'aria-flowto', 'aria-labelledby', 'aria-owns']\n   */\n  attrs: ['id', 'for'],\n  \n  /*\n   * The rest are options for qinu — a unique string generator\n   * Check the link for more details https://www.npmjs.com/package/qinu\n   */\n\n  /*\n   * template {string} — the template for unique identifiers\n   * \n   * The %qinu% will be replaced with generated uniq code, and %args[N]%'s are\n   * replaced by args and directive value\n   * \n   * By default it is '%arg[0]%-%qinu%'\n   */\n  template: '%arg[0]%-%arg[1]%-%qinu%',\n\n  /*\n   * args {array} — predefined args for template string\n   *\n   * This are values for template string, can be useful when you want to scope\n   * ids with an additional name, or to avoid using value for directives in\n   * the components with one id only.\n   * \n   * By default it is empty\n   */\n  args: [],\n\n  /*\n   * chars {string|array} — a list of characters to generate the unique string\n   */\n  chars: '1234567890abcdef',\n\n  /*\n   * length {integer} — a length of unique string\n   */\n  length: 8\n}\n```\n\n### An example of usage without specifying the value in template\n\n```js\nVue.use(VueUniqIds)\nVue.component('input-section', {\n  props: ['label'],\n  template: '\\n\\\n    \u003cdiv\u003e\\n\\\n      \u003clabel v-uni-for\u003e{{label}}\u003c/label\u003e\\n\\\n      \u003cinput v-uni-id /\u003e\\n\\\n    \u003c/div\u003e',\n  uniqIdsConfig: {\n    args: ['input-section'],\n    scope: true\n  }\n})\n```\n\nThis component will be rendered to code similar to the example below:\n\n```html\n    \u003cdiv\u003e\n      \u003clabel for=\"input-section-97muvl55\"\u003eLABEL\u003c/label\u003e\n      \u003cinput id=\"input-section-97muvl55\" /\u003e\n    \u003c/div\u003e\n```\n\n### Accessing and generating ids via JS\n\nIds generated in template and those that will be generated via `this.uniId()` method have the same scope inside of the same component\n\n```js\nVue.use(VueUniqIds)\nVue.component('input-section', {\n  props: ['label'],\n  template: '\\n\\\n    \u003cdiv\u003e\\n\\\n      \u003clabel v-uni-for=\"textId\"\u003e{{label}}\u003c/label\u003e\\n\\\n      \u003cinput v-uni-id=\"\\'text\\'\" /\u003e\\n\\\n    \u003c/div\u003e',\n  computed: {\n    textId: function () {\n      return this.uniId('text')\n    }\n  }\n})\n```\n\nThis component will be rendered to code similar to the example below:\n\n```html\n    \u003cdiv\u003e\n      \u003clabel for=\"text-97muvl55\"\u003eLABEL\u003c/label\u003e\n      \u003cinput id=\"text-97muvl55\" /\u003e\n    \u003c/div\u003e\n```\n\n## License\n\nMIT © [Stanislav Termosa](https://github.com/termosa)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftermosa%2Fvue-uniq-ids","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftermosa%2Fvue-uniq-ids","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftermosa%2Fvue-uniq-ids/lists"}