DEV Community: DevTranslate

Easy Vue internationalization - guide to the Vue I18n plugin

Tomek Poniatowicz — Thu, 26 Oct 2023 13:56:18 +0000

In today's globalized world, it's crucial for web developers to create applications that can be easily localized for users from different regions and cultures. Vue.js is a popular JavaScript framework which provides a powerful internationalization (i18n) plugin called Vue I18n. In this comprehensive guide, we will do a step-by-step exploration of the process of internationalizing a Vue app using the Vue I18n plugin. Whether you're a seasoned Vue developer or just getting started, this guide will get you up to speed on how to create multi-language applications with ease.

What is Vue I18n?

Vue I18n is a localization library for Vue.js that helps developers easily handle application translations. It provides a simple and flexible API to integrate translations into Vue components, which makes creating multi-language apps almost effortless. With Vue I18n, you can define translation messages in different languages and easily switch between them based on the user's locale. It also supports multiple advanced features like dynamic translations or pluralization which makes it a truly comprehensive solution for Vue internationalization.

Getting Started

Before we get to Vue internationalization, we first need to include the necessary scripts in our HTML file. You can include Vue and Vue I18n using either a script tag or a module bundler like Webpack. Here's an example of including the scripts via a script tag:

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>

Now that the scripts are included, we can go ahead and create a Vue instance and configure the Vue I18n plugin. In the following example, we'll define translated messages for English and Japanese:

const messages = {
  en: {
    message: {
      hello: 'Hello, world!'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界！'
    }
  }
};

const i18n = VueI18n.createI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages
});

const app = Vue.createApp({
  // Vue app options
});

app.use(i18n);
app.mount('#app');

In this code snippet, we've defined the translated messages in the messages object, with the keys representing the locales (e.g., en for English and ja for Japanese). We then created an instance of Vue I18n using createI18n and passed in the locale, fallback locale, and messages. Finally, we installed the i18n instance on the Vue app using app.use(i18n) and mounted the app on the DOM element with the ID app. This sets up the Vue app to be aware of the i18n instance and enables the translation functionality.

Translating Text in Templates

Once the setup is done, we can start working on Vue internationalization, first let's go to our templates. Vue I18n injects the $t translation API into each component, letting us easily access translated messages. Here's an example of how to use the $t API in a template:

<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>

In this example, we use the $t API to translate the message with the key "message.hello". The translation is determined automatically based on the current locale set in the Vue I18n instance.

Dynamic Translations

Vue internationalization also supports dynamic translations, enabling passing variables to translated messages. This is useful when you need to include dynamic content in your translations, such as usernames or numbers. Here's an example:

<div id="app">
  <p>{{ $t("message.greeting", { name: userName }) }}</p>
</div>

In this example, we have a dynamic message key "message.greeting" and pass an object with a name property to the $t API. The value of userName will be dynamically inserted into the translated message.

Pluralization

Pluralization is a common requirement in internationalization, and Vue internationalization provides built-in support for handling plural forms in translations. You can define different translations for singular and plural forms of a message and let the Vue I18n plugin automatically select the appropriate translation based on the quantity. Here's an example:

const messages = {
  en: {
    message: {
      apple: 'one apple | {count} apples'
    }
  },
  ja: {
    message: {
      apple: 'りんご一つ | りんご{count}個'
    }
  }
};

In this example, we define translations for the key "message.apple". The English translation has two forms: "one apple" for singular and "{count} apples" for plural. The Japanese translation also has two forms: "りんご一つ" for singular and "りんご{count}個" for plural. Vue I18n will automatically select the appropriate translation based on the value of count.

Using the Composition API

In addition to the options-based API shown in the previous examples, Vue I18n also has a feature called the Composition API, which provides a more flexible and powerful way to handle translations. To use the Composition API, we need to call the useI18n function in our Vue setup function. Here's an example:

import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t, locale } = useI18n();

    return {
      t,
      locale
    };
  }
};

In this example, we import the useI18n function from vue-i18n and call it in the setup function of a Vue component. This gives us access to the t translation function and the locale property, which can then be used in the template or other parts of the component.

Advanced Features with Vue I18n

Vue I18n provides a range of advanced features to handle complex translation requirements. Some of the notable features include:

Custom Formatting: You can define custom formatters to format translated values based on your specific requirements.
Fallback Strategies: Vue internationalization allows you to define fallback strategies for missing translations, ensuring a smooth user experience even when translations are not available.
Number and Date Formatting: Vue I18n provides built-in support for formatting numbers and dates according to the user's locale.
Pluralization Rules: You can customize the pluralization rules for different languages, allowing you to handle complex plural forms.

Bonus - How to easily translate your i18n files

To learn more about Vue internationalization and its features, refer to the official documentation of Vue.js. Additionally, you can use tools like DevTranslate to automate the translation process and manage your Vue files efficiently.

Conclusion

In this comprehensive guide, we explored the process of Vue internationalization using the Vue I18n plugin. We learned how to set up the whole process, translate text in templates, handle dynamic translations and pluralization, and use advanced features provided by the plugin. With Vue I18n, developers can easily create multi-language apps that cater to a global audience. By following the steps outlined in this guide and leveraging the power of Vue internationalization, you can ensure a seamless localization experience for your Vue projects.

The Ultimate Guide on Localizing Your React/Next.js App

Tomek Poniatowicz — Thu, 31 Aug 2023 11:39:27 +0000

Introduction

In today's globalized world, it's crucial for businesses to reach a diverse audience. This is where localization comes into play. Localization involves adapting a product or application to a specific market or region, including translating the content, adapting design elements, and considering cultural nuances. For developers working with React and Next.js, there are various techniques and tools available to simplify the process of localizing their applications. In this ultimate guide, we will explore everything you need to know about localizing your React/Next.js app.

Understanding Next.js Internationalization (i18n)

Next.js is a popular open-source framework built on top of React that offers an out-of-the-box solution for server-side rendering (SSR) and static site generation (SSG). It also provides a solid foundation for internationalization (i18n) that complements well with existing i18n libraries. Internationalization is the process of designing and developing a software application to be adapted and translated into multiple languages and cultures. Next.js simplifies the implementation of i18n features such as translations and routing by offering built-in support.

Getting Started: Creating a New Next.js Project

To begin localizing your React/Next.js app, you need to create a new Next.js project. The process is straightforward using the create-next-app CLI tool. Open your terminal and run the following command:



npx create-next-app nextjs-i18n-example

This command will create a new Next.js project called nextjs-i18n-example in a folder with the same name.

Adding React Intl Dependency

Next.js works seamlessly with various i18n libraries such as react-intl, lingui, and next-intl. In this guide, we will focus on using the react-intl library. React-intl is a popular i18n library that supports ICU syntax and provides formatting options. To add react-intl to your Next.js project, navigate to the project folder using your terminal and run the following commands:



cd nextjs-i18n-example
npm i react-intl

These commands will change the current working directory to nextjs-i18n-example and install the react-intl dependency.

Configuring Internationalized Routing

Translations and routing are two essential aspects of internationalization. Next.js offers built-in support for internationalized routing, which simplifies the process of handling different locales in your application. Next.js supports two types of internationalized routing: sub-path routing and domain routing.

Sub-Path Routing

Sub-path routing involves adding the locale to the URL path. For example, /blog represents the default locale, /fr/blog represents the French locale, and /nl-NL/blog represents the Dutch (Netherlands) locale.

Domain Routing

Domain routing uses different domains for serving content in different locales. For example, example.com/blog serves content in the default locale, example.fr/blog serves content in the French locale, and example.nl/blog serves content in the Dutch (Netherlands) locale.

In our case, we will use sub-path routing as it is less complex and more commonly used for average websites. To configure sub-path routing in your Next.js app, you need to update the next.config.js file with the i18n config. Open the next.config.js file and add the following code:



/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ["ar", "en", "fr", "nl-NL"],
    defaultLocale: "en",
  },
};

module.exports = nextConfig;

In this code, locales represents the list of locales supported in your app, and defaultLocale represents the default locale. This means that all pages for Arabic, French, and Dutch (Netherlands) will be prefixed with ar, fr, and nl-NL in the URL path.

Automatic Locale Detection

Next.js offers automatic locale detection, which determines the user's preferred locale based on the Accept-Language header. This feature simplifies the process of handling user preferences for language and ensures that the app is displayed in the appropriate language by default.

Leveraging the Power of Next-i18next

Next-i18next is a powerful library that complements Next.js by providing translation management and functionality. While Next.js handles the localization of URLs and locales, Next-i18next takes care of translating content, managing translation files, and providing translation components/hooks for React components.

Next-i18next utilizes i18next and react-i18next under the hood, offering a simplified approach to internationalization in Next.js apps. Developers only need to include their translation content as JSON files and let Next-i18next handle the rest.

To use Next-i18next in your React/Next.js app, follow the steps below:

Step 1: Installation

Before you can start using Next-i18next, you need to install it along with the required dependencies. Open your terminal and run the following command:



yarn add next-i18next react-i18next i18next

Ensure that you have react and next installed as well.

Step 2: Configuration

Next-i18next requires a configuration file to define its behavior. Create a file named next-i18next.config.js in the root of your project and add the following code:



module.exports = {
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr", "de"],
  },
};

In this configuration file, you can set the default locale and list all the locales supported by your app.

Step 3: Wrapping Your App

To enable translation support in your Next.js app, you need to wrap your app with the appWithTranslation higher-order component provided by Next-i18next. Open the pages/_app.js file and modify it as follows:

tsx```

import { appWithTranslation } from "next-i18next";

function MyApp({ Component, pageProps }) {
// Your app component code here
}

export default appWithTranslation(MyApp);


Now your app is ready to be translated using Next-i18next.


### Step 4: Translating Your Content

Next-i18next provides hooks and components that make it easy to translate your React components. The main hook you'll use is the useTranslation hook, which gives you access to the t function for translating your content. Here's an example of how to use the useTranslation hook:

import { useTranslation } from "next-i18next";

function MyComponent() {
const { t } = useTranslation();

return

{t("hello")};
}


In this example, the t function is used to translate the string "hello". The translation is sourced from the JSON files you provide.


With Next-i18next, you can easily translate your React components and manage your translation content.


## Best Practices for Localizing Your React/Next.js App

When localizing your React/Next.js app, there are several best practices you should follow to ensure a smooth and effective localization process. Let's explore some of these best practices:


### 1. Plan Ahead

Before starting the localization process, it's essential to plan ahead and identify the target languages and regions for your app. This will help you determine the scope of the localization effort and allocate resources accordingly.


### 2. Separate Content from Code

To facilitate the translation process, it's important to separate content from code. Keep all translatable text in separate JSON or CSV files, making it easier for translators to work with the content.


### 3. Use Contextual English

When writing content that will be translated, use contextual English that can be easily understood by translators. Avoid ambiguous or idiomatic language that may be difficult to translate accurately.


### 4. Use Translation Keys

To maintain consistency and facilitate translation updates, use translation keys instead of hardcoding translated text directly into your code. Translation keys act as placeholders for the actual translated content and can be easily updated without modifying the code.


### 5. Test and Validate Translations

Once the translation process is complete, thoroughly test and validate the translated content in your app. Check for any text truncation, layout issues, or missing translations. This step is crucial to ensure a high-quality localized experience for your users.


## Automating Localization with DevTranslate.app

Localizing a React/Next.js app can be a time-consuming and complex task. However, with the help of automated translation tools like DevTranslate.app, you can streamline the localization process significantly. [DevTranslate.app](https://devtranslate.app/) is an automatic translation tool that offers seamless integration with React apps. It simplifies the process of translating your app's content by automatically detecting translatable strings and providing translations in multiple languages. Integrating DevTranslate.app into your localization workflow can save you valuable time and resources.


## Go global

Localizing your React/Next.js app is essential to reach a global audience and provide a personalized experience to users in different languages and regions. By following the best practices and utilizing the right tools, you can simplify the localization process and create a successful internationalized application. Next.js, combined with libraries like Next-i18next, provides a solid foundation for implementing localization features. With the help of automated translation tools like DevTranslate.app, you can further streamline the localization process and enhance the efficiency of your development workflow. Embrace localization and unlock the full potential of your React/Next.js app in the global market.

---

## Speed up your apps & websites translation

**DevTranslate** online JSON, XML, STRINGS & ARB files translator app for developers, product managers, content creators. Use automated multi language translation instead of wasting time copy-pasting all your text into online translators. **[Try DevTranslate for free!](https://devtranslate.app)**

[![Try DevTranslate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kchvi5c8vv4ix6aahxsu.png)](https://devtranslate.app)

Quick guide to Next.js i18n

Tomek Poniatowicz — Mon, 20 Feb 2023 12:22:54 +0000

Internationalization or i18n is an essential aspect of web & app development, as it enables reaching a global audience by opening up our application to users who prefer content in their native language. That makes it easy to find a niche by catering to users who are overlooked by everyone who just goes with the generic approach of providing everything only in English.

Next.js

When thinking about applications the best practice currently is using Next.js - a popular React-based framework, which provides a number of technological benefits like pre-rendering, server-side rendering, code splitting, easy routing and static exports. Together that means one thing: speed, the app will work blazingly fast while also providing React-based functions.

More importantly for our use case, it provides built-in support for i18n, making it easier for developers to create apps that can be easily translated into any number of different languages.

next-i18next

There are several strategies for implementing Next.js i18n. The chosen approach will likely depend on the specific needs of the app and our own preferences. Opting for a custom solution is always possible, that said there is a widely used and popular strategy: using the next-i18next library, which provides a simple and efficient way to add i18n support to Next.js.

Installation & configuration

To get started with next-i18next, we need to install the library as a dependency in our project via a simple command (having React and Next installed is also required):

yarn add next-i18next react-i18next i18next

We also need to organize our translations. In almost every case this will be made via the /locales folder with subfolders for various languages like /en, /pl and the like. Though for those intent on keeping some other folder structure it’s quite simple to do so - all it requires is specifying the paths in localePath and localeStructure.

Next we need to create a configuration file, this file should specify what our default language is and what other languages we want to use in our project. The structure is pretty self-explanatory:

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
}

Once we have the configuration file, we can then use the next-i18next library to add i18n support to Next.js in our app. This also requires just a few simple additions to the Next.js config file:

const { i18n } = require('./next-i18next.config')

module.exports = {
  i18n,
}

The final step is wrapping the project with the appWithTranslation component. This provides i18next context to every page in it and should be included in the _app file like so:

import { appWithTranslation } from 'next-i18next'

const MyApp = ({ Component, pageProps }) => (
  <Component {...pageProps} />
)

export default appWithTranslation(MyApp)

With just these few simple steps, we now have a working i18n setup in our Next.js application. We can be sure the translations will be working as they should, but here comes the caveat: where do we get them from?

Yes, there’s always the option of either relying on the services of a translator or painstakingly copy-pasting everything into google translate and then back again into each and every string in our json files.

DevTranslate

But it would be a bummer to go through that setup for next-i18next just to then do the actual translations manually and waste so much time and effort on it. Fortunately, there’s DevTranslate which lets you automate the translation process by requiring just a few clicks to translate your json file into up to 26 languages while keeping the syntax and order intact. This way all you have to do is:

open your default language folder
upload the files from there to our in-browser translator
click play & wait a few seconds
download the translated files
put them in the corresponding subfolders for each language

With that your app is now internationalized! To sum it up implementing i18n in Next.js is a straightforward process thanks to the built-in support and the next-i18next library. On top of that DevTranslate provides an easy way to automate the translation process as well giving you a fully internationalized app with minimal effort. Your app is now open to a broader and more diverse audience and feels more tailored to the users. With how simple Nextjs i18n is if you havent done it yet means you're losing out.

Speed up your app's translation and localization

Use automated multi language translation for all your json, xml, arb and strings files instead of wasting time copy-pasting all your text into online translators.
Try DevTranslate for free!

What are the differences between translation and localization?

Tomek Poniatowicz — Fri, 16 Dec 2022 15:10:13 +0000

While both terms are similar, localization goes beyond just translating and ensures your product feels local and caters to the users in a particular region. Reaching more markets usually requires adapting your app to the users there. While it’s true that today mobile users usually know English, studies show most still prefer to use their local language for their devices and applications. The obvious solution that comes to mind might be translation, but that’s not enough!

Translation

Odds are you’ve used google translate on more than one occasion, while it’s definitely a popular tool it’s often not enough for business uses and most opt for either professional translation tools or simply the services of a translator. For applications however neither is the optimal way of doing things.

Localization

Localization or as it’s called in the business l10n is a process of not only translating everything to the local language but also adopting everything to the local customs. What exactly does that mean? To put it simply, localization is translation and then some: tailoring everything to the specific customs, tastes and preferences of a given culture and language. This is especially true for software where it extends to UX/UI as well. The purpose is to make the user feel right at home as if they were using a local app from that region.

Why is localization necessary?

To look at a simple use case for localization we can compare even countries using the same language like English. The US uses a 12-hour clock and the imperial system instead of metric (pounds, ounces, feet, miles, fahrenheit instead of celsius etc.) additionally you have different spelling (localisation for British English, localization for US, armour and armor and many others) and completely different words (lift/elevator and such) and idioms. Often the same word can have a completely different meaning depending on the region.

For a few examples football in the US means NFL and soccer in most other countries, the first floor is the ground floor in the US and the first floor above ground level in the UK and most importantly pants are trousers in the US and underwear in the UK. The same is obviously even more true for different languages where the text length might be completely different, the font size might look bad with the particular alphabet or the UI can become less readable. Basically every localization requires a number of solutions and tweaks to keep everything smooth for every language.

In short the benefits of localization are numerous and by catering to local needs you can:

reach new markets effectively by providing the same user experience as local apps
communicate with users who would otherwise wither face a language barrier of be forced to use a language contrary to their preferences
avoid misconceptions and faux pas related to specific customs and particularities of different languages and cultures
optimize your product to fit locally used search terms and keywords

Speed up your apps & websites translation

DevTranslate online JSON, XML, STRINGS & ARB files translator app for developers, product managers, content creators. Use automated multi language translation instead of wasting time copy-pasting all your text into online translators. Try DevTranslate for free!