Hello and welcome to this Nuxt i18n guide that will cover translating your Nuxt.js app into multiple languages. We'll cover everything you need to know to make your Nuxt.js app multilingual. We'll start by setting up the i18n package and managing translation files. You'll learn how to switch languages, localize routes, and save language preferences.
We'll also dive into supporting right-to-left languages, handling pluralization, and localizing dates, times, and currencies. Let's get started on making your app truly global!
What is internationalization (i18n) and localization (l10n)?
Internationalization (often abbreviated as i18n) and localization (l10n) are essential practices for making software applications usable in multiple languages and regions.
Internationalization (i18n) is the process of designing your application so it can be easily adapted to various languages and regions without engineering changes. This involves preparing your codebase and resources to handle different languages, character sets, date formats, and more.
Localization (l10n) is the process of adapting your internationalized application to a specific language and region. This includes translating text, adjusting date and time formats, adapting layouts to fit text length, and ensuring cultural relevance.
Why you should care about i18n/l10n in your Nuxt.js app
Reach a wider audience: By supporting multiple languages, you can reach users from different parts of the world, expanding your app’s user base.
Improve user experience: Users are more comfortable and find applications more intuitive when they can use them in their native language. This can lead to higher user satisfaction and retention.
Compliance and accessibility: In some regions, providing content in the local language is a legal requirement. Ensuring your app is accessible to non-English speakers can help you comply with local regulations.
Competitive advantage: Offering a localized experience can give you an edge over competitors who only support one language, making your app more attractive to a global audience.
In the next sections, we’ll cover how to set up and implement i18n and l10n in your Nuxt.js app, ensuring it’s ready for a global audience.
Prerequisites for Nuxt i18n
Before diving into internationalization and localization in your Nuxt.js app, make sure you have the following:
Basic JavaScript and/or TypeScript knowledge: Understanding JavaScript fundamentals is essential since Nuxt.js is built on top of Vue.js and uses JS or TS (depending on your setup) for development.
Familiarity with Vue.js: Nuxt.js is a framework for Vue.js, so knowing the basics of Vue.js will help you follow along more easily.
Code editor: Use any code editor you are comfortable with. Popular choices include Visual Studio Code, Sublime Text, and Atom.
Node.js and npm/yarn: Make sure you have Node.js 18+ and either npm or yarn installed on your machine. These are required to set up and manage your Nuxt.js project.
With these prerequisites covered, you're ready to start internationalizing and localizing your Nuxt.js app. In the next section, we’ll get started by setting up a new Nuxt.js project.
Installation
Setting up Nuxt.js
To get started with internationalization and localization in your Nuxt.js app, you first need to set up Nuxt.js on your local machine and create a new project. Follow these steps.
First, initialize a new project with the following command:
npx nuxi@latest init lokalise-nuxt-i18n
Replace lokalise-nuxt-i18n with your desired project name.
Then follow the wizard's instructions:
Choose the package manager (e.g., npm)
Enable or disable telemetry
Decide whether to initialize a Git repository
To make sure everything is running smoothly, navigate into the project folder and start a local server:
cd lokalise-nuxt-i18nnpm run dev
Open your browser and navigate to http://localhost:3000. You should see a welcome page, indicating that the app is ready to go!
A bit of styling
Create assets/style.scss file with the following content:
vueI18n specifies the location of your i18n config file.
Note that you can provide other configuration options. For example, it's possible to adjust language detection and control how the preferred locale will be saved.
Prepare TypeScript types: You might need to run the following command to prepare TypeScript types:
npx nuxt prepare
With this setup, your Nuxt.js app is ready to handle multiple languages. In the next section, we’ll cover how to create translation files and use them in your components.
Performing simple translations
Now that we have the i18n module installed and configured, let's translate the texts inside pages/index.vue.
First of all, replace your markup inside the index.vue file with:
Start your development server if it’s not already running, open your browser and navigate to http://localhost:3000. You should see the "Welcome!" message and the paragraph translated based on the default locale (English).
Adding language switcher
Currently we don't provide an option to set the locale, so let's take care of it now.
Simple switcher
Create a components folder in the project root and add a LanguageSwitcher.vue inside:
Setting language preference: Upon clicking on the language name, we set the language preference in local storage.
Updating dir attribute: Whenever the locale changes, we update the dir (direction) attribute accordingly. For example, when the Arabic version is requested, the HTML tag will have the dir attribute set to rtl. As long as our styles specify direction: rtl for this case, the text should be displayed properly.
Using onMounted hook: We use the onMounted hook to set the preferred locale if it's found in local storage.
Localized routes in Nuxt i18n
Next, let's see how to work with localized routes, which is crucial if your app has multiple pages.
You can see that here we use interpolation once again. Depending on the count we will display one of the messages.
Now update the script for the main page:
import { ref } from 'vue'import GlobalMenu from '~/components/GlobalMenu.vue'const count = ref(0)const incrementCount = () => { count.value++}
Next let's provide English translation:
{ "buttonPressed": "You've pressed the button {count} time | You've pressed the button {count} times"}
The pipe | character serves as a separator and provides two plural forms: when the button has been pressed once and when it has been pressed multiple times or zero times.
Now French translations:
{ "buttonPressed": "Vous avez appuyé sur le bouton {count} fois | Vous avez appuyé sur le bouton {count} fois"}
With Arabic translations, things are somewhat more complex because it has more than two plural forms. To overcome this problem, let's write a custom pluralization rule. Create a new i18n/plurals.ts file:
export const arabicPlurals = (choice: number): number => { if (choice === 0) { return 0 // Zero times } if (choice === 1) { return 1 // One Time } if (choice === 2) { return 2 // Two Times } if (choice >= 3 && choice <= 10) { return 3 // Many Times (3-10) } return 4 // 11 and above}
{ "buttonPressed": "لم يتم الضغط على الزر | مرة واحدة | مرتين | {count} مرات | {count} مرة"}
With these steps, you've learned how to use placeholders for dynamic values and handle pluralization in multiple languages, including languages with complex pluralization rules like Arabic.
Localizing date and time
Datetime localization in Nuxt can be performed easily. First, let's add two new paragraphs to index.vue:
We utilize useHead() function to translate title, description and og meta tags.
Now let's provide English translations:
{ "meta": { "title": "Welcome to Our Site", "description": "This is the best site ever made for tutorials." }}
fr.json:
{ "meta": { "title": "Bienvenue sur notre site", "description": "C'est le meilleur site jamais créé pour les tutoriels." }}
And ar.json:
{ "meta": { "title": "مرحبًا بكم في موقعنا", "description": "هذا هو أفضل موقع تم إنشاؤه على الإطلاق للحصول على الدروس." }}
You can use similar approach on other pages of your site. Great!
Use Lokalise for Nuxt i18n
As your app grows, managing your translations becomes increasingly complex. If you need support for more locales, hiring a professional or using AI for translation becomes essential. That's why we've created the Lokalise translation management system. It does all the heavy lifting for you and provides many features, including collaborative access, the ability to hire translators, use AI, and integrate with third-party tools and services like GitHub, Figma, Asana, and many others.
To get started, grab your free trial. Follow the wizard's instructions to create your first project. Then proceed to the Upload page and upload your translation files. Once done, you can modify your texts, add more languages, utilize AI to translate more data, and so on. When you're ready, simply proceed to the Download page and export your texts back to the project.
That's it for today! We have seen how to perform Nuxt i18n easily with the help of the i18n module. We've covered all the main features and approaches, and hopefully by now you're ready to put your knowledge into practice.
Ilya is a lead of content/documentation/onboarding at Lokalise, an IT tutor and author, web developer, and ex-Microsoft/Cisco specialist. His primary programming languages are Ruby, JavaScript, Python, and Elixir. He enjoys coding, teaching people and learning new things. In his free time he writes educational posts, participates in OpenSource projects, goes in for sports and plays music.
Ilya is a lead of content/documentation/onboarding at Lokalise, an IT tutor and author, web developer, and ex-Microsoft/Cisco specialist. His primary programming languages are Ruby, JavaScript, Python, and Elixir. He enjoys coding, teaching people and learning new things. In his free time he writes educational posts, participates in OpenSource projects, goes in for sports and plays music.
An SRT file is a plain text file used to add subtitles to videos. It’s one of the simplest and most common formats out there. If you’ve ever turned on captions on a YouTube video, there’s a good chance it was using an SRT file behind the scenes. People use SRT files for all kinds of things: social media clips, online courses, interviews, films, you name it. They’re easy to make, easy to edit, and they work pretty much everywhere without hassle. In this post, we’ll
Libraries and frameworks to translate JavaScript apps
In our previous discussions, we explored localization strategies for backend frameworks like Rails and Phoenix. Today, we shift our focus to the front-end and talk about JavaScript translation and localization. The landscape here is packed with options, which makes many developers a
Syncing Lokalise translations with GitLab pipelines
In this guide, we’ll walk through building a fully automated translation pipeline using GitLab CI/CD and Lokalise. From upload to download, with tagging, version control, and merge requests. Here’s the high-level flow: Upload your source language files (e.g. English JSON files) to Lokalise from GitLab using a CI pipeline.Tag each uploaded key with your Git branch name. This helps keep translations isolated per feature or pull request