Posted onAug 15, 2022 • Originally published atlocalazy.com

How to localize Nuxt v3 projects using Localazy

Vue 3 became the new default recommended version for new projects in February. With this new era, loads of frameworks, plugins, and libraries have also started focusing on the new Vue.Nuxt is no exception, and the team is nearing the stable release, which is planned for this summer.

Readmore articles about Nuxt.js

Naturally, such a large transition requires a lot of development time and dedication. This is especially true for Nuxt, the largest and most popular framework built on Vue. As the previous version 2, Nuxt is an open-source hybrid Vue framework that eases the development of web applications with extra emphasis on performance, SEO optimizations, and ease & speed of development.

At Localazy, we've been using Nuxt since the beginning, and we are excited to try the new version for our next projects too. And naturally, the implementation of i18n support is the crucial aspect we will be focusing on.

🥳 Getting started

Let's begin by creating a new Nuxt project. The new version of Nuxt also comes with a new CLI tool, which makes the process seamless. Run the following commands to create a new project and install the dependencies:

npx nuxi init localazy-nuxt3cdlocalazy-nuxt3npm i

Note that at the time of writing this article the Nuxt v3 has not released a stable version yet. It's possible that the API might change in the future, although it's unlikely given how close we are to the release day. This example runs onNuxt version 3.0.0-rc.6 and@intlify/nuxt3 version 0.2.3.

Prepare i18n module

Next, let's add support for the localization of your project. In this example, we're going to use@intlify/nuxt3, which is built onvue-i18n-next. Currently, this is the most stable i18n plugin for Nuxt that supports content localization.

To install it to our project, runnpm install --save-dev @intlify/nuxt3 and then include itmodules options in yournuxt.config.[ts|js]

// nuxt.config.tsimport{defineNuxtConfig}from'nuxt'exportdefaultdefineNuxtConfig({// ...modules:['@intlify/nuxt3']// ...})

Note that it does not support route localization and SEO i18n enhancement like@nuxtjs/i18n did with Nuxt v2. As the authors from intlify state themselves, one of the purposes of the @intilify/nuxt3 module is "...finding issues on the vue-i18n-next so that@nuxtjs/i18n can support Nuxt3."

Nonetheless, adding support for route localization can be implemented manually, and it's also the approach we've decided to take at Localazy. Let us know in the comments if you would like us to elaborate on how we've done it. 🙋‍♂️

Going multilingual

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

This component is calledNuxtWelcome, and it is used inapp.vue. When you inspect this component innode_modules , you'll find out that it accepts several props which can modify most of the textual content inside. Let's make use of it and translate it 🤗

First of all, create a newlang folder in the root folder of your project. Then create anen.json file inside and paste in the following.

{"title":"Welcome to Nuxt 3!","readDocs":"We highly recommend you take a look at the Nuxt documentation, whether you are new or have previous experience with the framework.","followTwitter":"Follow the Nuxt Twitter account to get latest news about releases, new modules, tutorials and tips.","starGitHub":"Nuxt is open source and the code is available on GitHub, feel free to star it, participate in discussions or dive into the source."}

This is the default English content on the welcome screen, which we will translate momentarily. Lastly, configure thelang directory to be the i18n source for the@intlify/nuxt3 in yournuxt.config.[js|ts]. Additionally, we'll change the locale toes so that it will set the language to Spanish by default.

import{defineNuxtConfig}from'nuxt'exportdefaultdefineNuxtConfig({// ...modules:['@intlify/nuxt3'],intlify:{localeDir:'lang',vueI18n:{locale:'es'}}// ...})

We don't have the Spanish translations yet, and that's where Localazy comes in.

🚩 Connecting to Localazy

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

ShareTM is a highly accurate shared translation memory that can help you accurately translate a significant portion of your project. Thanks to it, most of the new projects have as much as 50% of their strings automatically available as suggestions for translation into 80+ languages.

Proceed to create the project. Afterward, selectNuxt.js on the integration screen. We'll use thepowerful 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 alocalazy.json file in the root folder of your project. Copy the recommended configuration and change thetranslations folder tolang folder in both the upload and download sections.

{"writeKey":"<your-write-key>","readKey":"<your-read-key>","upload":{"type":"json","files":"lang/en.json"},"download":{"files":"lang/${lang}.json"}}

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

Translating strings

Now go to Localazy and add the Spanish 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 project with Localazy:

💪🏻Translate on your own or invite contributors - You canstart translating on your own and use our built-in suggestion system.
🦾Translate everything in bulk via machine translation - With the LocalazyAutopilot plan, you can instantly translate all strings byrunning 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 theContinuous 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 runlocalazy download. You should see a newly createdes.json file in thelang folder.

By using vue-i18n's$t the function, we'll resolve the key in the currently selected language, which we've defined to be Spanish in thenuxt.config.[js|ts]. To test it, change theapp.vue content to the following.

<template><div><NuxtWelcome:title="$t('title')":readDocs="$t('readDocs')":followTwitter="$t('followTwitter')":starGitHub="$t('starGitHub')"/></div></template>