vue-uuid

library3.0.0jsnpmunverified

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.

web-framework

npm install vue-uuid

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-UUID

vue-uuid

web-frameworkjavascriptv3.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

withUUID

✓ import withUUID from 'vue-uuid';

✗ import { withUUID } from 'vue-uuid'; const withUUID = require('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

✓ import { uuid } from 'vue-uuid';

✗ import uuid from 'vue-uuid'; const { uuid } = require('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.

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');

Debug

Known issues

breakingVersion 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.

affects: >=3.0.0

breakingIn 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`.

affects: >=2.0.0

gotchaSince 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.

affects: >=2.1.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'v1')

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<...>'

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

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({ ... }));`.

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

vuerequiredRuntime peer dependency for Vue integration. Version 3.0.0+ is required for vue-uuid v3.0.0.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/VitorLuizC/vue-uuid ↗

packagehttps://www.npmjs.com/package/vue-uuid ↗