Part 2 - Configuration of nuxt/i18n

Introduction

In this series, I will set up a Nuxt web application with a homepage and a simple design using TailwindCSS, and add a blog section with nuxt/content. The next step will be configuring nuxt/i18n to add multiple languages to your web application.

This part of the series builds on Part 1 and focuses on correctly configuring the packages integrated in the previous part. Running npm run dev again now will give you the following warning:

> dev
> nuxt dev

Nuxt 3.11.2 with Nitro 2.9.6
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Using default Tailwind CSS file
  ➜ DevTools: press Shift + Option + D in the browser (v1.3.3)

ℹ Tailwind Viewer: http://localhost:3000/_tailwind/
ℹ Re-optimizing dependencies because lockfile has changed

WARN
[21:48:31]  WARN  warn - No utility classes were
            detected in your source files. If
            this is unexpected, double-check the
            content option in your Tailwind CSS
            configuration.

 WARN warn - https://tailwindcss.com/docs/content-configuration

ℹ Vite server warmed up in 976ms
✔ Nuxt Nitro server built in 855 ms
ℹ Vite client warmed up in 1684ms

Next, we will properly configure both TailwindCSS and i18n.

Instruction

Prerequisites

You have included the packages TailwindCSS, Nuxt/i18n, and NuxtContentv2 in your project. If not, you can find the description here (Part 1) or use the code from GitHub as a foundation.

Step 1: Adjusting the Project Structure

In Nuxt, the app.vue file is the default entry point. Therefore, we need to make adjustments here to incorporate our pages, which we will later create in the pages/ folder. Initially, right after creating the project, the file looks like this:

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

This needs to be changed to:

<template>
  <NuxtPage />
</template>

For more information, refer to the official documentation on Pages and File-System Routing.

Step 1.1:

To allow Nuxt to load a page, you need to create a file in the pages folder. If the folder doesn't exist yet, create it in the root directory of your project.

Create an index.vue file in the pages folder. The code in this file can look like this for now:

<template>
  <div>
    <h1 class="mt-4 text-4xl font-bold text-center">
      Welcome to Nuxt Tailwindcss Content i18n
    </h1>
    <p class="text-center">This is the index page</p>
  </div>
</template>

When you now run npm run dev, you'll notice that the TailwindCSS warning is gone. This is because you are now using TailwindCSS in your code. Previously, it complained that no TailwindCSS utility classes were used. In this code snippet, TailwindCSS classes are now being used, and the warning is gone. Additionally, the Nuxt Welcome Page is no longer displayed, but instead, the content of the newly created index.vue file is shown.

Step 2: Configuring nuxt/i18n

Create a new folder named locales in the root directory. In this folder, create JSON files for the respective languages. In my example, I will create translation files for German and English (US). I recommend naming the files according to the language ISO format. The locales folder should look like this:

locales
├── de-DE.json
└── en-US.json

Now, add the translations to the files. Here is the text from the previous code example:

en-US.json

{
  "headline": "Welcome to Nuxt Tailwindcss Content i18n",
  "subheadline": "This is the index page"
}

de-DE.json

{
  "headline": "Willkommen zu Nuxt Tailwindcss Content i18n",
  "subheadline": "Das ist die Indexseite"
}

Step 2.1: Adjusting the nuxt.config.ts

To make the i18n module use the translation files, they need to be registered in the i18n configuration. Open the nuxt.config.ts file and add the following JSON object:

i18n: {
  locales:[
    {
      code: 'en',
      iso: 'en-US',
      name: 'English',
      file: 'en-US.json'
    },
    {
      code: 'de',
      iso: 'de-DE',
      name: 'Deutsch',
      file: 'de-DE.json'
    }
  ],
  langDir: 'locales/',
  defaultLocale: 'en',
  strategy: 'prefix_except_default',
}

In the array, the languages you want to make available to your users are defined. Each language is specified by the language code, ISO code, a name, and the associated translation file. langDir indicates the path to the translation files created in step 2.0. defaultLocale sets the default language. The strategy field is relevant for routing. In this example, a language prefix is added to the route, except for the default language.

Step 2.2: Using the Translation

To ensure the text is properly translated, both the template and script sections in our index.vue file need to be adjusted. In the script section, include i18n:

<script setup lang="ts">
  const {locale} = useI18n();
</script>

This binds the i18n module to your component. The locale variable holds the currently selected language. Since English is selected as the defaultLocale in my nuxt.config.ts, en is output.

I will now use this variable in the template to switch languages. The adjusted code looks like this:

<template>
  <div>
    <h1 class="mt-4 text-4xl font-bold text-center">{{ $t("headline") }}</h1>
    <p class="text-center">{{ $t("subheadline") }}</p>
    <form>
      <select class="text-center" v-model="locale">
        <option value="en">English</option>
        <option value="de">Deutsch</option>
      </select>
    </form>
  </div>
</template>

To output the correct language, use {{ $t("headline") }}. $t is the global variable for translations. It checks which language is selected and then looks for the key headline in the corresponding file, returning the associated value.

To change the language, the locale variable must be adjusted. This example uses a dropdown with two options. Depending on the selected option, the value of the locale variable is assigned, and the corresponding language file is selected in the background, updating the values on the website.

You can also achieve this with buttons by calling the setLocale() function. For more details, refer to the official documentation.

Summary

In the first part of the series, the project was created and the necessary packages were integrated. This part focused on configuring and internationalizing the web application.

In the next part, a small landing page will be created, which can be translated into the respective language using a language switcher.

The code of this tutorial you can find on Github