useRandomUUID

Description

The useRandomUUID composable provides a simple utility to generate a random UUID (version 4) string. It is designed for use in Vue 3 Composition API setups and can be used anywhere a unique identifier is required, such as form fields, temporary keys, or tracking elements.

FEATURE GOALS

• Generate a universally unique identifier (UUID v4) on demand.
• Provide a lightweight, reusable utility with no reactive dependencies.
• Use a battle-tested library (uuid) for consistent and compliant UUID generation.

FEATURE EXPECTATIONS

• Always returns a valid UUID v4 string.
• Safe to use across client-side and server-side rendering (SSR) contexts.
• Minimal overhead, pure function with no side effects.

DEV STRATEGIES

1. Composables Logic

const uniqueId = useRandomUUID();

• Generates a new UUID every time it’s called.
• Can be used inline for generating dynamic keys, identifiers, etc.

2. Implementation

import { v4 as uuidv4 } from 'uuid';

export const useRandomUUID = (): string => {
  return uuidv4();
};

• Imports v4 from the uuid package.
• Wraps the function in a composable to align with Composition API usage.

3. DEFAULT BEHAVIOR

FLOW SUMMARY

• Imports and wraps uuidv4 to provide a clean and composable API.
• Returns a new UUID string each time the function is invoked.
• No dependencies on Vue internals—can be used in any JS/TS context.