Vue Component Library

Appearance

Using Vue Common Utilities ​

This guide shows you how to use the useVueCommonUtilities composable to access router navigation and internationalization utilities in your Vue 3 projects.

Overview ​

The useVueCommonUtilities composable provides convenient wrappers for Vue Router navigation and Vue I18n text retrieval. It simplifies common routing and internationalization tasks in your components.

Setup ​

Import useVueCommonUtilities from your composables folder. This composable requires Vue Router and Vue I18n to be set up in your application.

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

Basic Usage ​

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

const { goToRoute, getI18nText } = useVueCommonUtilities();

// Navigate to a route
goToRoute("/dashboard");

// Get internationalized text with fallback
const text = getI18nText("welcome.message"); // Returns translated text or original key if not found

Available Methods ​

MethodDescription
goToRoute(path)Navigate to a route using Vue Router
getI18nText(text)Get internationalized text, returns original key if not found

Use Cases ​

1. Programmatic Navigation

  • Navigate after form submission
  • Redirect after authentication
  • Navigate based on user actions
  • Deep linking and route management

2. Internationalization with Fallback

  • Display translated text with automatic fallback
  • Handle missing translations gracefully
  • Show original keys when translations are unavailable
  • Support multi-language applications

3. Component Navigation

  • Button click handlers that navigate
  • Form submission redirects
  • Conditional routing based on state
  • Dynamic route generation

4. Text Display

  • Display user-facing text with i18n support
  • Handle translation keys safely
  • Provide fallback for missing translations
  • Support development workflow (showing keys when translations missing)

Best Practices ​

  1. Use for navigation - Prefer goToRoute over direct router access for consistency
  2. Handle missing translations - getI18nText automatically falls back to the key, making it safe to use
  3. Type safety - Consider adding TypeScript types for route paths and i18n keys
  4. Error handling - Router navigation can fail, handle errors appropriately
  5. Performance - These utilities are lightweight and can be used in any component

📖 Related Documentation: