Nuxt typescript translate system

Often a multi-language application can be needed to be able to speak to a wider audience of people and we can use Nuxt translate system for it. It can always be useful to localize your application according to who you want to talk to, while still being able to read to anyone with more classical English.

What is Nuxt translate

Nuxt Translate is an official Nuxt.js module specifically designed for managing translations. It provides:

• Built-in support for popular i18n libraries: Vue-i18n and vue-i18n-next integration.
• Automatic code-splitting: we can load translation files on demand, optimizing initial page load.
• Server-side and client-side rendering: we can render translations on both the server and client, ensuring SEO and responsiveness.
• Automatic URL localization: URLs can be adapted to reflect the chosen language.

Install Nuxt translate

We can use the install command:

npm install @nuxtjs/i18n

Then in nuxt.config.js we need to add:

export default {
  // ...
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    /* module options */
  },
  // ...
}

And in tsconfig.json (in the case of Typescript) we need to add:

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@nuxtjs/i18n",
    ]
  }
}

Create translation files

Create folders within the locales directory for each language (e.g., en, it). Inside each folder, place JSON files named common.json for shared translations and others for specific pages or components.JSON// locales/en/common.json { "hello": "Hello!", "welcome": "Welcome to our website" } // locales/it/common.json { "hello": "Ciao!", "welcome": "Benvenuto sul nostro sito web" }

Translating Your Content

1. Use the $t function:Snippet di codice<template> <p>{{ $t('hello') }}</p> </template> <script> export default { // ... }; </script>
2. Dynamic locale switching:Use $locale to access the current locale and conditionally render content:Snippet di codice<template> <p v-if="$locale === 'en'">English content</p> <p v-else-if="$locale === 'it'">Italian content</p> </template>
3. Formatted date and time:Nuxt Translate integrates with vue-i18n-next for formatted dates and times:Snippet di codice<p>{{ $t('$date', $d, 'medium') }}</p>

Lazy translation

It may happen that for some translations it is necessary to refer to an external source, perhaps not properly under our control. It is in these cases that the “lazy” mode of the translate system comes in handy.
To do this we must add the ad hoc configuration to our nuxt.config.js, also calling up a js that we will define shortly.

export default {
  // ...
  i18n: {
    /* module options */
    locales: [
      {
        code: 'en',
        file: 'i18n.js' // External messages loading.
      },
    ],
    lazy: true,
    defaultLocale: 'en',
    langDir: '~/',
  },
  // ...
}

Inside our javascript we define our default label fetch function.

// i18n.js
export default async (context, locale) => {
  return await fetch(`https://www.example.it/lang/${locale}.json`)
    .then(response => response.json())
    .then(data => data);
}

Advanced Techniques

1. Namespaces: Organize translations for specific modules or components.
2. Custom fallbacks: Define custom logic for missing translations.
3. Server-side rendering: Ensure correct translations on initial page load.

Conclusions on Nuxt translate system

• TypeScript provides excellent type checking for translation keys and values.
• Regularly update translation files to maintain accuracy.
• Consider using a translation management system for large projects.

By following these steps and leveraging the power of Nuxt Translate and TypeScript, you can create robust and scalable multilingual Nuxt.js applications that cater to a global audience.

That’s all.
Try it at home.