vui18n is internationalization module. It easily integrates some localization features to your Vue.js Application.

You can install it with npm

npm i vui18n

Only for Vue.js 3

To get started, you need to initialize the module. You can do it inside main.ts file:

import { createApp, ref } from "vue";
import { initLanguage } from "vui18n";
import App from "./App.vue";
initLanguage(
  {
    languages: [
      {
        code: "en",
        path: "/languages/en.json",
      },
      {
        code: "de",
        path: "/languages/de.json",
      },
    ],
  },
  ref
);
const app = createApp(App);
app.mount("#app");

Its important to pass ref as the second argument to the initLanguage function. This is your starting point. The translation files are lazy loaded by default. This means only the translation file that is being used is loaded.

<script setup lang="ts">
import { t } from "vui18n"
</script>
<template>
    <div>
        <p>{{ t("name") }}</p>
    </div>
</template>

The text will no be translated. The default language is en

You can switch the languages:

<script setup lang="ts">
  import {switchLang} from "vui18n" 
  switchLang("de")
</script>

You need to pass the locale code. switchLang returns an promise. It lazy load the translation file.

You can get the current language with getSelectedLanguage

<script setup lang="ts">
  import {getSelectedLanguage} from "vui18n"
</script>

You can access all languages with getLanguages

<script setup lang="ts">
  import {getLanguages} from "vui18n"
</script>