Vue Component Library

Appearance

Using Common Utilities ​

This guide shows you how to use the useCommonUtilities composable to access various utility functions for common tasks in your Vue 3 projects.

Overview ​

The useCommonUtilities composable provides a collection of utility functions for string manipulation, file handling, date formatting, clipboard operations, and more. These utilities help streamline common development tasks.

Setup ​

Import useCommonUtilities from your composables folder:

js
import { useCommonUtilities } from "@/composables/useCommonUtilities";

Basic Usage ​

js
import { useCommonUtilities } from "@/composables/useCommonUtilities";

const {
  capitalizeFirstLetter,
  copyToClipboard,
  formatDate,
  formatDateStringToAgo,
  cloneObject,
  debounce,
  getRandomId,
  // ... and more
} = useCommonUtilities();

// Capitalize first letter
const capitalized = capitalizeFirstLetter("hello"); // "Hello"

// Copy to clipboard
await copyToClipboard("Text to copy");

// Format date
const formatted = formatDate(new Date()); // "2024-01-15 14:30:45"

// Clone object
const cloned = cloneObject({ name: "John" });

Available Methods ​

MethodDescription
capitalizeFirstLetter(string)Capitalize the first letter of a string
copyToClipboard(textToCopy)Copy text to clipboard (async)
uploadImageUsingSignedUrl(url, file)Upload image using signed URL (async)
convertObjectUrlsToFiles(urls)Convert object URLs to File objects (async)
formatDateStringToAgo(dateString)Format date as "X ago" (e.g., "2 days ago")
formatDate(timestamp)Format timestamp to "YYYY-MM-DD HH:mm:ss"
getExtensionFromDataURI(dataURI)Get file extension from data URI
getDataURIType(dataURI)Get MIME type from data URI
cloneObject(object)Deep clone an object using JSON
debounce(func, wait)Create a debounced function
getRandomId()Generate a random UUID
prepareUniqueSvg(svgString)Make SVG IDs unique to avoid conflicts
mimeToExtensionObject mapping MIME types to file extensions

Use Cases ​

1. String Manipulation

  • Capitalize user input
  • Format display names
  • Normalize text formatting
  • Display user-friendly text

2. Clipboard Operations

  • Copy shareable links
  • Copy generated content
  • Copy user data
  • Copy formatted text

3. File Handling

  • Upload images to cloud storage
  • Convert blob URLs to files
  • Extract file extensions from data URIs
  • Handle image MIME types

4. Date Formatting

  • Display relative time ("2 hours ago")
  • Format timestamps for display
  • Show last updated times
  • Format dates in lists and cards

5. Object Manipulation

  • Deep clone objects to avoid mutations
  • Create copies of form data
  • Clone state objects
  • Prevent reference issues

6. Performance Optimization

  • Debounce search inputs
  • Debounce resize handlers
  • Debounce scroll events
  • Optimize frequent function calls

7. Unique Identifiers

  • Generate unique IDs for elements
  • Create unique keys for lists
  • Generate temporary identifiers
  • Create unique SVG IDs

8. SVG Handling

  • Prepare SVGs for reuse
  • Avoid ID conflicts in multiple SVGs
  • Make SVG components unique
  • Handle SVG references

Best Practices ​

  1. Async operations - copyToClipboard, uploadImageUsingSignedUrl, and convertObjectUrlsToFiles are async, use await
  2. Error handling - Wrap async operations in try-catch blocks
  3. Debouncing - Use debounce for expensive operations like search or resize handlers
  4. Object cloning - Use cloneObject when you need to avoid mutating original objects
  5. Date formatting - Use formatDateStringToAgo for user-friendly relative times
  6. SVG uniqueness - Always use prepareUniqueSvg when rendering the same SVG multiple times

📖 Related Documentation: