├── .travis.yml ├── .gitignore ├── .editorconfig ├── test.mjs ├── LICENSE ├── index.d.ts ├── index.mjs ├── package.json └── README.md /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - node 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node.js dependencies 2 | node_modules/ 3 | 4 | # Bundles 5 | dist/ 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | # Default editor's settings 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | -------------------------------------------------------------------------------- /test.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import test from "ava"; 4 | import { v1, v3, v4, v5 } from "uuid"; 5 | 6 | import withUUID from "./index.mjs"; 7 | 8 | function createApp() { 9 | return { 10 | config: { 11 | globalProperties: {}, 12 | }, 13 | }; 14 | } 15 | 16 | test("Exposes uuid as Vue's property $uuid", (context) => { 17 | const app = createApp(); 18 | 19 | withUUID(/** @type {import('vue').App} */ (app)); 20 | 21 | context.true(typeof app.config.globalProperties.$uuid === "object"); 22 | }); 23 | 24 | test("Exposed $uuid's methods v1, v3, v4 & v5 are UUID functions", (context) => { 25 | const app = createApp(); 26 | 27 | withUUID(/** @type {import('vue').App} */ (app)); 28 | 29 | context.is(app.config.globalProperties.$uuid.v1, v1); 30 | context.is(app.config.globalProperties.$uuid.v3, v3); 31 | context.is(app.config.globalProperties.$uuid.v4, v4); 32 | context.is(app.config.globalProperties.$uuid.v5, v5); 33 | }); 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017-present Vitor Luiz Cavalcanti 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import type { App } from "vue"; 2 | import type { v1, v3, v4, v5 } from "uuid"; 3 | 4 | export interface UUID { 5 | v1: typeof v1; 6 | v3: typeof v3; 7 | v4: typeof v4; 8 | v5: typeof v5; 9 | } 10 | 11 | declare module "@vue/runtime-core" { 12 | export interface ComponentCustomProperties { 13 | /** 14 | * An object with uuid's v1, v3, v4 and v5 functions. 15 | */ 16 | $uuid: UUID; 17 | } 18 | } 19 | 20 | /** 21 | * An object with uuid's v1, v3, v4 and v5 functions. 22 | */ 23 | export const uuid: UUID; 24 | 25 | /** 26 | * Defines '$uuid' property globally, to be accessed in any component instance 27 | * inside the application. The '$uuid' is an object with uuid's v1, v3, v4 and 28 | * v5 functions. 29 | * 30 | * @example 31 | * import Vue from 'vue'; 32 | * import withUUID from 'vue-uuid'; 33 | * 34 | * const app = withUUID( 35 | * createApp({ 36 | * // ... 37 | * }), 38 | * ); 39 | * 40 | * app.component('c-button', { 41 | * created() { 42 | * this.id = this.$uuid.v4(); 43 | * } 44 | * }); 45 | */ 46 | export default function withUUID( 47 | app: App 48 | ): App; 49 | -------------------------------------------------------------------------------- /index.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import { v1, v3, v4, v5 } from "uuid"; 4 | 5 | /** 6 | * @typedef {Object} UUID 7 | * @property {typeof v1} v1 8 | * @property {typeof v3} v3 9 | * @property {typeof v4} v4 10 | * @property {typeof v5} v5 11 | */ 12 | 13 | /** 14 | * An object with uuid's v1, v3, v4 and v5 functions. 15 | * @type {UUID} 16 | */ 17 | export const uuid = { v1, v3, v4, v5 }; 18 | 19 | /** 20 | * @typedef {import('vue').App} App 21 | * @template HostElement 22 | */ 23 | 24 | /** 25 | * Defines '$uuid' property globally, to be accessed in any component instance 26 | * inside the application. The '$uuid' is an object with uuid's v1, v3, v4 and 27 | * v5 functions. 28 | * 29 | * @example 30 | * import Vue from 'vue'; 31 | * import withUUID from 'vue-uuid'; 32 | * 33 | * const app = withUUID( 34 | * createApp({ 35 | * // ... 36 | * }), 37 | * ); 38 | * 39 | * app.component('c-button', { 40 | * created() { 41 | * this.id = this.$uuid.v4(); 42 | * } 43 | * }); 44 | * @param {App} app 45 | * @returns {App} 46 | * @template HostElement 47 | */ 48 | export default function withUUID(app) { 49 | app.config.globalProperties["$uuid"] = uuid; 50 | return app; 51 | } 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-uuid", 3 | "version": "3.0.0", 4 | "description": "Add UUID to Vue instance.", 5 | "cdn": "dist/index.umd.min.js", 6 | "main": "dist/index.js", 7 | "unpkg": "dist/index.umd.min.js", 8 | "types": "index.d.ts", 9 | "module": "dist/index.esm.js", 10 | "jsdelivr": "dist/index.umd.min.js", 11 | "umd:main": "dist/index.umd.js", 12 | "scripts": { 13 | "test": "ava", 14 | "build": "bili index.mjs --format esm,cjs,umd,umd-min --moduleName VueUUID", 15 | "prepublishOnly": "npm run build && npm run test" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/VitorLuizC/vue-uuid.git" 20 | }, 21 | "keywords": [ 22 | "vue", 23 | "vue-uuid", 24 | "uuid" 25 | ], 26 | "author": "Vitor Luiz Cavalcanti", 27 | "license": "MIT", 28 | "bugs": { 29 | "url": "https://github.com/VitorLuizC/vue-uuid/issues" 30 | }, 31 | "homepage": "https://github.com/VitorLuizC/vue-uuid#README", 32 | "ava": { 33 | "require": [ 34 | "esm" 35 | ] 36 | }, 37 | "dependencies": { 38 | "@types/uuid": "^8.3.4", 39 | "uuid": "^8.3.2" 40 | }, 41 | "devDependencies": { 42 | "ava": "^4.0.1", 43 | "bili": "^5.0.5", 44 | "esm": "^3.2.25", 45 | "vue": "^3.2.30" 46 | }, 47 | "peerDependencies": { 48 | "vue": ">= 3.0.0" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue UUID 2 | 3 | Add UUID to Vue instance. 4 | 5 | [![Build Status](https://travis-ci.org/VitorLuizC/vue-uuid.svg?branch=master)](https://travis-ci.org/VitorLuizC/vue-uuid) 6 | 7 | ## Install 8 | 9 | Installation is very easy, you just need to install using NPM or Yarn. 10 | 11 | ```sh 12 | npm i vue-uuid 13 | ``` 14 | 15 | Vue's `use` method will do the trick adding to Vue. 16 | 17 | ```js 18 | import { createApp } from "vue"; 19 | import withUUID from "vue-uuid"; 20 | 21 | const app = withUUID( 22 | createApp({ 23 | // ... 24 | }), 25 | ); 26 | ``` 27 | 28 | ## Usage 29 | 30 | After installation `$uuid` is available on instance, so you can use inside 31 | components **template** and script, like the example below. 32 | 33 | ```vue 34 | 55 | 56 | 75 | ``` 76 | --------------------------------------------------------------------------------