---

Vue Configuration

Installation

Install using Yarn:

yarn add @resourge/translations

or NPM:

npm install @resourge/translations --save

Configuration

To set up translations for Vue, follow these steps:

1. Install the necessary dependencies:

yarn add @resourge/vue-translations

or

npm install @resourge/vue-translations --save

2. Import the required functions and types from @resourge/vue-translations and use the SetupVueTranslations function:

import { SetupVueTranslations, languageLocalStorage, navigatorLanguageDetector } from '@resourge/vue-translations';

const { TranslationInstance, useTranslation } = SetupVueTranslations({
  langs: ['pt', 'en', 'es'],
  defaultLanguage: 'pt',
  plugins: [
    navigatorLanguageDetector({
      onLanguage: (language) => language.split('-')[0]
    }),
    languageLocalStorage()
  ],
  translations: {
    global: {
      hello: { pt: 'Olá', en: 'Hello', es: 'Ola' }
    }
  }
});

export { TranslationInstance, useTranslation };

Usage in Vue Component

To use the translation functionalities in your Vue component:

1. Import the TranslationProvider from @resourge/vue-translations.

2. Define the TranslationInstance in your component.

3. Wrap your application’s root component with the TranslationProvider, passing TranslationInstance as a prop.

<template>
  <Suspense>
    <TranslationProvider :TranslationInstance="(TranslationInstance as any)">
      <RouterView />
    </TranslationProvider>
  </Suspense>
</template>

Replace (TranslationInstance as any) with your actual implementation.

Example

These components demonstrate how to use the T object to access translations for the hello key in the global namespace. The buttons trigger the changeLanguage function to switch between languages.

<template>
  <div>
    <div>{{ T.global.hello }}</div>
    <button @click="changeLanguage('en')">Change Language to English</button>
    <button @click="changeLanguage('pt')">Mudar Idioma para Português</button>
    <button @click="changeLanguage('es')">Cambiar Idioma a Español</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useTranslation } from '@resourge/vue-translations';

export default {
  setup() {
    const { T, changeLanguage } = useTranslation();

    return { T, changeLanguage };
  }
}
</script>

---