Vue UUID Integration

3.0.0 · active · verified Sun Apr 19

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.

Common errors

```
TypeError: Cannot read properties of undefined (reading 'v1')
```
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.

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).
```
Property '$uuid' does not exist on type 'ComponentPublicInstance<...>'
```
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.

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.
```
TypeError: app.use is not a function
```
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.

fix Do not use `app.use(withUUID)`. Instead, wrap your `createApp` call directly: `const app = withUUID(createApp({ ... }));`.

Warnings

breaking 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.
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.
breaking 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.
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`.
gotcha 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.
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.

Install

npm install vue-uuid npm
yarn add vue-uuid yarn
pnpm add vue-uuid pnpm

Imports

withUUID
wrong:
```
import { withUUID } from 'vue-uuid';
const withUUID = require('vue-uuid');
```
correct:
```
import withUUID from 'vue-uuid';
```
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.
uuid
wrong:
```
import uuid from 'vue-uuid';
const { uuid } = require('vue-uuid');
```
correct:
```
import { uuid } from 'vue-uuid';
```
The standalone `uuid` object is a named export, useful for generating UUIDs outside of a Vue instance without relying on `$uuid`.
$uuid
```
this.$uuid.v4();
```
Accessible on the Vue instance after `withUUID` is applied to the app. This is an instance property, not directly imported.

Quickstart

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.

import { createApp } from 'vue';
import withUUID from 'vue-uuid';

const NAMESPACE = "65f9af5d-f23f-4065-ac85-da725569fdcd";

const app = withUUID(
  createApp({
    data() {
      return {
        NAMESPACE,
        uuid: '',
      };
    },
    mounted() {
      // Access $uuid on the instance
      this.uuid = this.$uuid.v1();
    },
    template: `
      <div class="uuid-panel">
        <h3 class="uuid">{{ uuid }}</h3>
        <button @click="uuid = $uuid.v1()">Generate V1</button>
        <button @click="uuid = $uuid.v3()">Generate V3</button>
        <button @click="uuid = $uuid.v4()">Generate V4</button>
        <button @click="uuid = $uuid.v5('Name 1', NAMESPACE)">Generate V5</button>
      </div>
    `
  })
);

app.mount('#app');

view raw JSON →