Vue.js Integration

Learn how to integrate i18next with Vue.js applications for internationalization.

Integrate vue-i18n with your Vue.js application (v3.x) to support multiple languages using Lengrise-managed translations.

Prerequisites

  • Vue.js application (v3.x)
  • Node.js (v16.0.0+)
  • Package manager (npm,yarn,npm)
  • Translations downloaded from Lengrise

Pull Translation Files

First, you must pull your translation files from Lengrise API. These files will contain all the translated text for your application.

  1. Go to the Installation Guide and follow the steps to download your translations
  2. Place the downloaded JSON files in your project as shown in the project structure below
  3. Ensure that each language has its own JSON file named with the language code (e.g., en.json, es.json)

Integration Setup

After downloading your translation files, install the necessary packages:

npm install vue-i18n@9 --save

Project Structure

package.jsonadd
vite.config.jsadd
main.jsadd
i18n.jsadd
srcadd
App.vueadd
componentsadd
LanguageSwitcher.vueadd
publicadd
localesadd
en.jsonadd
es.jsonadd

Configuration Steps

1. Set up i18n configuration

Create a file called i18n.js in your project:

import { createI18n } from "vue-i18n";

// Function to load locale messages
async function loadLocaleMessages() {
  const locales = import.meta.glob("./public/locales/*.json");
  const messages = {};

  for (const path in locales) {
    const matched = path.match(/([A-Za-z0-9-_]+)\.json$/i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = await locales[path]();
    }
  }

  return messages;
}

const messages = await loadLocaleMessages();

// Create i18n instance
export const i18n = createI18n({
  legacy: false, // Use Composition API
  globalInjection: true, // Add global $t, $tc, etc helpers
  locale: navigator.language.split("-")[0] || "en", // Set locale from browser
  fallbackLocale: "en", // Set fallback locale
  messages, // Set locale messages
});

export default i18n;

2. Initialize i18n in your application

Modify your main.js file to include i18n:

import { createApp } from "vue";
import App from "./App.vue";
import i18n from "./i18n";

createApp(App).use(i18n).mount("#app");

Using Translations

Basic Usage

Use the useI18n composable in your components:

<script setup>
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();
</script>

<template>
  <h1>{{ t("welcome.title") }}</h1>
  <p>{{ t("welcome.description") }}</p>
</template>

Creating a Language Switcher

Create a language switcher component:

<!-- LanguageSwitcher.vue -->
<script setup>
import { useI18n } from "vue-i18n";

const { locale } = useI18n();

const changeLanguage = (lang) => {
  locale.value = lang;
};
</script>

<template>
  <div>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('es')">Español</button>
  </div>
</template>

Using Translation Variables

Vue i18n supports variable interpolation in translations:

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const username = "John";
</script>

<template>
  <p>{{ t("greeting", { name: username }) }}</p>
</template>

Your translation file should contain:

{
  "greeting": "Hello, {name}!"
}

Resources

For more detailed information, check out these resources: