I18n Localization for Nuxt.js ! Implement multi-language support to website.

I18n Localization for Nuxt.js ! Implement multi-language support to website.

Understanding I18n Localization in Nuxt 3

In today’s interconnected world, creating web applications that cater to users from diverse linguistic backgrounds is paramount. Whether you’re building a personal blog or a large-scale enterprise platform, ensuring your content is accessible and understandable to users worldwide is crucial. This is where Internationalization (I18n) and Localization come into play. With the release of Nuxt 3, the process of implementing I18n localization has been streamlined, making it easier than ever to reach a global audience.

What is I18n Localization?

I18n, short for “Internationalization,” is the process of designing and developing software applications that can adapt to various languages and cultural contexts without engineering changes. Localization, on the other hand, refers to the adaptation of a product, application, or content to meet the language, cultural, and other requirements of a specific target market or locale. Together, I18n and localization ensure that your web application is not only available in different languages but also culturally relevant and sensitive.

Nuxt 3: Simplifying Localization

Nuxt 3, the latest iteration of the popular Vue.js framework, comes with built-in support for I18n localization, making it easier for developers to create multilingual applications. Let’s delve into how Nuxt 3 simplifies the process:

Configuration-driven Approach

Nuxt 3 adopts a configuration-driven approach for I18n localization. Developers can define locales, language-specific content, and other localization-related settings directly in the Nuxt configuration file (nuxt.config.js), eliminating the need for additional plugins or complex setups.

Locale-based Routing

With Nuxt 3, creating locale-based routes is seamless. Developers can define routes specific to each language/locale, allowing users to navigate the application in their preferred language effortlessly. Nuxt automatically handles route generation and navigation based on the user’s selected locale.

Component-level Localization

Nuxt 3 enables component-level localization, empowering developers to create reusable UI components that adapt to different languages and locales seamlessly. This granular approach to localization enhances code reusability and maintainability while ensuring a consistent user interface across language variations.

Getting Started with Nuxt 3 Localization

Here’s a simplified guide to getting started:

1. Install I18n in Nuxt 3: Begin with installing I18n in your exist project by using npm, yarn or pnpm

npm install @nuxtjs/i18n --save-dev
yarn add --dev @nuxtjs/i18n
pnpm add -D @nuxtjs/i18n

Upon completion of the installation process, it is recommended to remove the package-lock.json and yarn.lock files. Subsequently, reinstallation of dependencies should be carried out to ensure a clean and consistent environment. And Let’s check the package.json to see.

{
  "devDependencies": {
      "@nuxtjs/i18n": "^8.0.0"
  }
}

Following the dependency setup, the creation of the “locale” folder and language-specific JSON files can commence, facilitating the localization process.

1. Configure Localization: Define locales, language-specific content, and other localization settings in the nuxt.config.ts file:

    export default defineNuxtConfig({
      modules: ['@nuxtjs/i18n'],
      i18n: {
        // Module Options
        lazy: true,
        langDir: "locales", 
        strategy: "prefix_except_default",
        defaultLocale: "en", // Default Language
        locales: [
            { code: "tr", iso: "tr-TR", file: "tr.json"},
            { code: "en", iso: "en-US", file: "en.json" },
        ],
      }
    })

Create Language-specific Content: Organize language-specific content in separate JSON files under the locales directory:

./locales/en.json

  {
        "helloWorld" : "Hello World"
    }

• ./locales/tr.json

 {
        "helloWorld" : "Merhaba Dünya"
    }

Finally, now we can use only 1 variable name for 2 language support.

    <div>
      {{ $t("helloWorld") }}
    </div>

1. Output be like, for www...com/ and www...com/tr/

I18n localization is no longer a daunting task, thanks to the advancements in frameworks. By embracing a configuration-driven approach, dynamic content translation, and integrated tooling, Nuxt 3 simplifies the process of creating multilingual applications.

By following these steps, you can leverage the power of Nuxt 3 to create fully localized web applications that resonate with users worldwide.

See you in next article!

References

• https://i18n.nuxtjs.org/docs/getting-started