Localization

For localization we are using @nuxtjs/i18n.

Configuration

nuxt.config.ts

{
    i18n: {
        locales: [
            {
                code: "sk",
                file: { path: "sk-SK.ts" },
                name: "SK",
            },
            {
                code: "en",
                file: { path: "en-US.ts" },
                name: "EN",
            },
        ],
        lazy: true,
        langDir: "locales/",
        defaultLocale: "sk",
        vueI18n: "./i18n.config.ts",
    },
}

i18n.config.ts

export default defineI18nConfig(() => ({
  legacy: false,
}));

Translation files

Locale files are located at i18n/locales. This is an example of translation file for locale:

en.ts

export default defineI18nLocale(async () => {
  return {
    welcome: "Welcome",
    login: "Log in",
    apple: "You have {count} apple | You have {count} apples",
    navigation: {
      links: {
        aboutUs: "About us",
        catalog: "Catalog",
        contact: "Contact",
        documentation: "Documentation",
      },
    },
  };
});

Usage

To use translation, we have $t available in our components.

<template>
<ul class="c-navbar__links">
    <li>
        <RLink href="/" intent="font">
            {{ $t("navigation.links.aboutUs") }}
        </RLink>
    </li>
    <li>
        <RLink href="/katalog" intent="font">
            {{ $t("navigation.links.catalog") }}
        </RLink>
    </li>
</ul>
</template>

For more informations refere to @nuxtjs/i18n documentation.