Use Nuxt/i18n to Localize Your Nuxt 3 Project with Localazy

🚀 Getting started 🔗

First of all, create a new Nuxt project with the following npx command.

npx nuxi@latest init localazy-nuxt-i18n
cd localazy-nuxt-i18n

Setup @nuxt/i18n 🔗

Before moving on to the configuration, we must install the @nuxtjs/i18n module first.

npm install @nuxtjs/i18n --save-dev

Then, add @nuxtjs/i18n to the modules section in your nuxt.config.ts.

/** nuxt.config.ts */
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/i18n',
  ],
  // ...
})

🎬 Prepare the example app 🔗

At this point, we can start our application by running npm run dev. No error should pop out, and you should be welcomed by the default welcome screen.

I personally like the default design of the new Nuxt application. Did you know that they ship a 404 page as well? To see it, you first need to create pages folder and put a page inside.

Let's create index.vue in pages folder.

// pages/index.vue
<template>
    <NuxtWelcome/>
</template>

<script setup></script>

By doing so, Nuxt will create a router configuration behind the scenes, and for defined routes, relevant pages will be served. And for non-existent, a 404 page will appear.

The 404 component is called Error404 and can be used in our application. Conveniently enough, you can also override the textual content via props, allowing us to translate the content as well 🤗

First of all, create a new i18n/locales folder. Then, create an en.json file inside and paste the following keys inside:

// i18n/locales/en.json
{
  "description": "Oopsie, where am I?",
  "backHome": "Get me back on track"
}

These are going to be the new English 404 labels. To use those, create a new file called 404.vue in the layouts folder.

// layouts/404.vue
<template>
    <Error404  :description="$t('description')" :backHome="$t('backHome')" />
</template>

<script setup>
import Error404 from '../node_modules/@nuxt/ui-templates/dist/templates/error-404.vue'
</script>

And then error.vue in the root folder.

// error.vue
<template>
  <NuxtLayout name="404"/>
</template>

<script setup></script>

Lastly, modify app.vue to enable rendering content in your pages folder.

// app.vue
<template>
  <NuxtPage/>
</template>

<script setup>
</script>

🌎 Configure i18n 🔗

Now, in the folder i18n, create the file i18n.config.ts and configure the i18n module to support English and French. We will set French as the target language and English as the fallback language. For now, we only define strings for English, which we created earlier, and we'll generate the translations momentarily.

/** ./i18n/i18n.config.ts */
import en from "./locales/en.json"

export default defineI18nConfig(() => ({
  legacy: false,
  locales: ['en', 'fr'],
  locale: 'fr',
  fallbackLocale: 'en',
  messages: {
    en
  }
}))

With the config file ready, let's pass it to i18n in nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/i18n'
  ],
  i18n: {
    vueI18n: './i18n/i18n.config.ts'
  }
})

Notice that we are passing the i18n configuration file to the module instead of defining it inlined in nuxt.config.ts. It's generally a good practice to separate code logic into smaller chunks, which is very true in the case of localization assets and configuration files that can grow in size over time. It also allows you to import the configuration in other files as well, which may come in handy, e.g., when you need to use the configuration in custom scripts.

At this point, when you open a non-existing page, e.g. http://localhost:3000/non-existent, you should see a 404 page with our custom labels.

🚩 Connecting to Localazy 🔗

First of all, set up a new account on Localazy and create your new project. Using English as the source language is recommended, but you can choose any other. Turn on the Use community translations (ShareTM) option if you want to get translation suggestions from our shared translation memory.

Proceed to create the project. Afterward, select Nuxt.js on the integration screen. We'll use the powerful CLI tool to manage the upload and download of texts.

Installation is available for Linux, macOS, and Windows. Note the read and write keys in step 2 - we'll need them shortly.

As suggested, create a localazy.json file in the root folder of your project. Copy the recommended configuration and change the translations folder in the path to i18/locales in both the upload and download sections.

Now you are ready to upload the content in the English file. All you need to do is to call localazy upload.

Translating strings 🔗

Now go to Localazy and add the French language. 🙂

Then click on the translate button to start translating. Let's just use the suggested machine translations, which is an amazing feature for multilingual prototyping.

For your real project, you can choose from multiple approaches to translate your content with Localazy:

💪🏻 Translate on your own or invite contributors - You can start translating on your own and use our built-in suggestion system.
🦾 Translate everything in bulk via machine translation - With the Localazy Professional plan, you can instantly translate all strings by running a machine translation over the content. This is great for the first iteration and localization testing of your Nuxt project.
🚩 Fully automate the translation process with the Continuous Localization services - You can order translations from our vetted translators and get your project translated by professionals automatically. The service is also proactive, so you don't have to micromanage translators.

Using translations in Nuxt 🔗

Come back to your application and run localazy download. You should see a newly created fr.json file in the locales folder. Import the fr.json file into the i18n.config.ts file.

/** ./i18n/i18n.config.ts */
import en from "./locales/en.json"
import fr from "./locales/fr.json"

export default defineI18nConfig(() => ({
  legacy: false,
  locales: ['en', 'fr'],
  fallbackLocale: 'en',
  locale: "en",
  messages: {
    en,
    fr
  }
}))

By using 18n's $t function, we'll resolve the key in the currently selected language, which we've defined to be French in the i18n.config.ts

To test it, refresh the http://localhost:3000/non-existent page. The texts, modifiable through Error404's props, have been translated into French. 😍

✔️ Conclusion 🔗

That's it! Now you're all set to serve your visitors content in their language!

Learn more about what Localazy can do for you:

📚 Read the Getting Started Guide.
🏄‍♀️ Never manage translators again: hire our Continuous Localization Team.
✍️ Start with localization in the design phase with the Figma Localization Plugin.
🧩 Integrate additional parts of your ecosystem with one of the 50+ integration options.
💸 See our pricing options or read more on our blog.