vue-dynamic-localization

vue-dynamic-localization is a lightweight and flexible localization package for Vue 3 applications. It enables you to dynamically load and switch between locales at runtime, making it easy to internationalize your Vue projects.

Features

• Dynamic Locale Switching: Change languages dynamically without reloading the application.
• Runtime Locale Loading: Load locale files from the main project at runtime.
• Reactive Translations: Automatically updates the UI when the locale changes.
• Customizable: No predefined locales – fully customizable for your project's needs.
• Lightweight: Simple and minimal API for easy integration.

Installation

Install the package via npm:

npm install vue-dynamic-localization

Usage/Examples

Getting Started Follow these steps to set up and use the vue-dynamic-localization package in your Vue project.

1. Set up the package in your Vue project In your main.js or main.ts, import and configure the package:

import { createApp } from 'vue';
import App from './App.vue';
import Localization from 'vue-dynamic-localization';
import en from './locales/en.json';
import es from './locales/es.json';
import hi from './locales/hi.json'; // Add your custom locales here

const app = createApp(App);

// Use the localization package
app.use(Localization);

// Load locales dynamically
app.config.globalProperties.$localization.loadLocale('en', en);
app.config.globalProperties.$localization.loadLocale('es', es);
app.config.globalProperties.$localization.loadLocale('hi', hi);

// Set the initial locale
app.config.globalProperties.$localization.setLocale('en');

app.mount('#app');

2. Create locale files Create your locale files (e.g., en.json, es.json, hi.json) in the locales folder of your project. Each file should contain key-value pairs for translations.

Example: locales/en.json
json
{
  "hello": "Hello",
  "welcome": "Welcome to Vue!"
}
Example: locales/es.json
json
{
  "hello": "Hola",
  "welcome": "¡Bienvenido a Vue!"
}
Example: locales/hi.json
json
{
  "hello": "नमस्ते",
  "welcome": "Vue में आपका स्वागत है!"
}

3. Use translations in your components In any of your Vue components, you can use the $localization.t() method to get the translated text:

<template>
  <div>
    <p>{{ $localization.t('hello') }}</p>
    <p>{{ $localization.t('welcome') }}</p>
  </div>
</template>

4. Switch languages dynamically You can dynamically switch the language in your Vue components. For example, you can use a select dropdown to allow the user to change the language:

<template>
  <div>
    <select @change="changeLanguage($event)">
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="hi">हिन्दी</option>
    </select>
  </div>
</template>

<script>
export default {
  methods: {
    changeLanguage(event) {
      const locale = event.target.value;
      this.$localization.setLocale(locale);
    }
  }
}
</script>

5.Key Methods loadLocale(locale, messages): Load translations for a specific locale. setLocale(locale): Set the active locale. t(key): Fetch a translation for a given key based on the current locale.