vui18n

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

Installation

You can install it with npm

npm i vui18n

Only for Vue.js 3

Get started

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",
      file: "/languages/en.json",
    },
    {
      code: "de",
      file: "/languages/de.json",
    },
  ],
});
const app = createApp(App);
app.mount("#app");

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. When you switch language the other file gets lazy loaded. You can import your JSON, js or tsc file directly:

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

The translation is now directly loaded without lazy load.

Use it in your app

<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

Switch languages

You can switch the languages:

<script setup lang="ts">
  import {switchLang} from "vui18n"
</script>
<template>
<button @click="switchLang('de')">Switch to german</button>
</template>

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

Get selected language

You can get the current language with getSelectedLanguage

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

Get all languages

You can access all languages with getLanguages

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

Available options

Here are every options you can pass to initLanguage

<script lang="ts" setup>
import { initLanguage } from "vui18n"
initLanguage(
  {
    persistLocalstorage: true,
    persistCookie: true,
    setLanguage: "de",
    defaultLanguage: "en",
    defaultTranslation: "no_translation_found",
    languages: [
      {
        code: "en",
        file: "/languages/en.json",
      },
      {
        code: "de",
        file: "/languages/de.json",
      },
    ],
  }
);
</script>

persistLocalstorage - Saves the selected language into the localStorage. Loads the saved langauge after refreshing the browser persistCookie - Saves the selected language into an cookie. Loads the saved language after refreshing the browser setLanguage - Set the language defaultLanguage - Set the default language defaultTranslation - If no translation is found, this value will be displayed languages - Set your languages

Nuxt 3

This app currently does not work with Nuxt 3 because of an bug. Unnamed imports are not supported by Nuxt 3 currently. I will stay up to date and update this library as soon as it work.