{"id":12620,"library":"vue-uuid","title":"Vue UUID Integration","description":"vue-uuid is a specialized library for integrating UUID generation capabilities directly into Vue.js applications. The current stable version, 3.0.0, exclusively supports Vue 3, with previous versions like 2.1.0 available for Vue 2 compatibility. It provides convenient access to UUID generation methods (v1, v3, v4, v5) directly on the Vue instance via `$uuid`, making them readily available within component templates and scripts. Additionally, it exports a standalone `uuid` object for use outside the Vue instance. While many general-purpose UUID libraries exist, vue-uuid differentiates itself by streamlining the integration specifically for the Vue ecosystem, abstracting away common setup boilerplate and providing a consistent API within the Vue context. Its release cadence appears to be tied to major Vue version updates, ensuring compatibility with the latest framework changes.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/VitorLuizC/vue-uuid","tags":["javascript","vue","vue-uuid","uuid","typescript"],"install":[{"cmd":"npm install vue-uuid","lang":"bash","label":"npm"},{"cmd":"yarn add vue-uuid","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-uuid","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for Vue integration. Version 3.0.0+ is required for vue-uuid v3.0.0.","package":"vue","optional":false}],"imports":[{"note":"The main plugin function `withUUID` is a default export. For CommonJS, direct `require` might work, but ESM is recommended since v2.1.0 started using `.mjs` extensions.","wrong":"import { withUUID } from 'vue-uuid';\nconst withUUID = require('vue-uuid');","symbol":"withUUID","correct":"import withUUID from 'vue-uuid';"},{"note":"The standalone `uuid` object is a named export, useful for generating UUIDs outside of a Vue instance without relying on `$uuid`.","wrong":"import uuid from 'vue-uuid';\nconst { uuid } = require('vue-uuid');","symbol":"uuid","correct":"import { uuid } from 'vue-uuid';"},{"note":"Accessible on the Vue instance after `withUUID` is applied to the app. This is an instance property, not directly imported.","symbol":"$uuid","correct":"this.$uuid.v4();"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport withUUID from 'vue-uuid';\n\nconst NAMESPACE = \"65f9af5d-f23f-4065-ac85-da725569fdcd\";\n\nconst app = withUUID(\n  createApp({\n    data() {\n      return {\n        NAMESPACE,\n        uuid: '',\n      };\n    },\n    mounted() {\n      // Access $uuid on the instance\n      this.uuid = this.$uuid.v1();\n    },\n    template: `\n      <div class=\"uuid-panel\">\n        <h3 class=\"uuid\">{{ uuid }}</h3>\n        <button @click=\"uuid = $uuid.v1()\">Generate V1</button>\n        <button @click=\"uuid = $uuid.v3()\">Generate V3</button>\n        <button @click=\"uuid = $uuid.v4()\">Generate V4</button>\n        <button @click=\"uuid = $uuid.v5('Name 1', NAMESPACE)\">Generate V5</button>\n      </div>\n    `\n  })\n);\n\napp.mount('#app');","lang":"javascript","description":"Demonstrates how to install `vue-uuid` by wrapping `createApp` with `withUUID` and then accessing UUID generation methods via `$uuid` within a component's template and script."},"warnings":[{"fix":"For Vue 2 projects, downgrade to `npm i vue-uuid@2.1.0`. For Vue 3 projects, ensure your Vue version is 3.0.0 or higher.","message":"Version 3.0.0 of `vue-uuid` exclusively supports Vue 3. For applications using Vue 2, you must use `vue-uuid@2.1.0` or an earlier compatible version.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Update direct references to the new bundle names: `dist/vue-uuid.es.js` -> `dist/index.esm.js`, `dist/vue-uuid.cjs.js` -> `dist/index.js`, `dist/vue-uuid.js` -> `dist/index.umd.js`.","message":"In version 2.0.0, the package's output bundle filenames were renamed. If you were directly referencing specific bundle paths (e.g., `dist/vue-uuid.es.js`), these paths will no longer be valid.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Prefer ES Module `import` syntax (e.g., `import withUUID from 'vue-uuid';`) over CommonJS `require()` where possible, especially in modern Node.js or bundler setups.","message":"Since version 2.1.0, the package sources use `.mjs` extensions, which can affect CommonJS `require()` resolution in some environments. It primarily favors ESM `import` statements.","severity":"gotcha","affected_versions":">=2.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `withUUID` wraps your `createApp` call correctly: `const app = withUUID(createApp(...));`. Also verify that your Vue version is compatible with the `vue-uuid` version you are using (v3.0.0+ for Vue 3).","cause":"Attempting to access `$uuid` (e.g., `this.$uuid.v1()`) before the `vue-uuid` plugin has been correctly installed on the Vue application instance, or when using a Vue 2 application with `vue-uuid` v3.0.0.","error":"TypeError: Cannot read properties of undefined (reading 'v1')"},{"fix":"Ensure `vue-uuid` is correctly installed and that your `tsconfig.json` includes `vue-uuid` in its type roots or references. Sometimes, restarting the TypeScript server or IDE can resolve type inference issues.","cause":"A TypeScript error indicating that the `$uuid` property is not recognized on the Vue instance type. This typically happens when the plugin's type declarations haven't been correctly picked up or merged.","error":"Property '$uuid' does not exist on type 'ComponentPublicInstance<...>'"},{"fix":"Do not use `app.use(withUUID)`. Instead, wrap your `createApp` call directly: `const app = withUUID(createApp({ ... }));`.","cause":"Incorrect plugin installation pattern. `vue-uuid` uses a function wrapper (`withUUID`) for integration rather than the standard `app.use()` method commonly seen with other Vue plugins.","error":"TypeError: app.use is not a function"}],"ecosystem":"npm"}