Everything you need to know about localization

DevTranslate: simple & free online xml translator. Just upload your file and you'll instantly receive output files with translations in the chosen languages

Blog | DevTranslate online json translator

Terms of use

Privacy policy

Contact us

Angular localization

React localization

Vue.js localization

Android localization

iOS localization

React Native localization

Flutter localization

Use cases

JSON Translator

XML Translator

ARB Translator

Strings Translator

Solutions

Application

Help Center

Blog

Resources

DevTranslate is a arb, strings, xml & json translator which handles simultaneous multi language translation into 26 languages.

Don't waste your time! Use our hassle-free online arb, strings xml & json translator.

Translate your <br> application

Features

Pricing

Guides

Contact

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 = {
&#x9;en: {
&#x9;	message: {
&#x9;		hello: 'Hello, world!',
&#x9;	},
&#x9;},
&#x9;ja: {
&#x9;	message: {
&#x9;		hello: 'こんにちは、世界！',
&#x9;	},
&#x9;},
};

const i18n = VueI18n.createI18n({
&#x9;locale: 'ja',
&#x9;fallbackLocale: 'en',
&#x9;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">
&#x20; \<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">
&#x20; \<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 = {
&#x9;en: {
&#x9;	message: {
&#x9;		apple: 'one apple | {count} apples',
&#x9;	},
&#x9;},
&#x9;ja: {
&#x9;	message: {
&#x9;		apple: 'りんご一つ | りんご{count}個',
&#x9;	},
&#x9;},
};

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 {
&#x9;setup() {
&#x9;	const { t, locale } = useI18n();

&#x9;	return {
&#x9;		t,
&#x9;		locale,
&#x9;	};
&#x9;},
};

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.

Easy Vue internationalization - guide to the Vue I18n plugin

Constantly restarting to see the changes you've made to your json files can get tiresome really fast - fortunately theres a neat trick available with next-i18next to avoid that.

If you just want to see the code, here is what we use:

import nextI18nextConfig from '@/../next-i18next.config';
import { MyResources } from '@/types/next-i18next';
import { i18n } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

interface ContextModel {
&#x9;params: { locale: string };
}

const getI18nPaths = () =>
&#x9;nextI18nextConfig.i18n.locales.map((lng) => ({
&#x9;	params: {
&#x9;		locale: lng,
&#x9;	},
&#x9;}));

export const getStaticPaths = () => ({
&#x9;fallback: false,
&#x9;paths: getI18nPaths(),
});

async function getI18nProps(ctx: ContextModel, ns: Array\<keyof MyResources> = \['common']) {
&#x9;const locale = ctx?.params?.locale || 'en';
&#x9;if (process.env.NODE\_ENV === 'development') {
&#x9;	await i18n?.reloadResources();
&#x9;}
&#x9;const props = {
&#x9;	...(await serverSideTranslations(locale, ns)),
&#x9;};

&#x9;return props;
}

export function makeStaticProps(ns: Array\<keyof MyResources>) {
&#x9;return async function getStaticProps(ctx: ContextModel) {
&#x9;	return {
&#x9;		props: await getI18nProps(ctx, ns),
&#x9;	};
&#x9;};
}

The gist of it is the part with `reloadResources` here:

async function getI18nProps(ctx: ContextModel, ns: Array\<keyof MyResources> = \['common']) {
&#x20;   const locale = ctx?.params?.locale || 'en';
&#x20;   if (process.env.NODE\_ENV === 'development') {
&#x20;       await i18n?.reloadResources();
&#x20;   }
&#x20;   const props = {
&#x20;       ...(await serverSideTranslations(locale, ns)),
&#x20;   };

Simple as that, with this little addition we can say goodbye to restarting the server every time to see the translations (which gets tiresome really fast)

Additionally if you want to you can also pass an array of languages or namespaces into the brackets after reloadResources if you only want to reload content in some particular language or some specific space instead of reloading everything. If you ever had to restart the server multiple times to see the translations I bet I don't have to sell you on this.

Auto reload locales in Nextjs without restarting the server

JSON (JavaScript Object Notation) is a lightweight data-interchange format that has become the industry standard for storing and exchanging data between applications. JSON files can contain various data structures, including arrays, objects, and key-value pairs, and are commonly used for websites and applications. The main advantage is thought that their key-pair structure enables faster and easier translation, provided that the correct json translator tools are used.

## Localization Management Platforms

Localization Management Platforms (LMPs) are cloud-based platforms that offer translation, localization, and management tools for global businesses. They provide a centralized platform for managing projects, translators and their progress with some additional features like translation memory or terminology management. Some popular LMPs include:

* Phrase: a powerful localization management platform with advanced features for translation memory, glossary, and QA.
* Crowdin: a feature-rich localization platform with proofreading, translation memory features and integrations for machine translation.
* Lokalise: Lokalise is a user-friendly localization platform with an intuitive interface, collaboration tools and a number of possible integrations.

While that does sound enticing LMPs rely mainly on human translators with added functionalities for better work management so if you don't employ translators you will need to hire some. While human translators provide the best quality of translation they are costly and require quite a lot of time to do their work. Unless your project needs a ton of highest-order localization work it's highly unlikely that you'll want to do so.

## Online translators

If you don't have a team of translators you can always use an online translation service. There are several of those available online and for free:

* Google Translate: Probably the best-known free translation service in the world.
* DeepL: A machine translation service that offers high-quality translations for up to 26 languages, with somewhat limited free usage.
* Microsoft Translator: a free online translation service that supports over 70 languages and provides both text and speech translation.

While they are free they are quite costly in terms of time & effort as you'll have to copy and paste the JSON content into the online translation service, and then copy the resulting translations into the files the same way, for each and every key pair in every single json file. This makes it a decent solution for small translations but wholly unfit for anything more substantial.

## Machine translation app

Alternatively, you can use DevTranslate - a dedicated json translator tool. It not only uses DeepL's algorithm to provide high-quality translations but also knows how to keep the syntax intact. All you have to do is upload the file you want to translate, pick the target languages, and click play. You will momentarily receive your translated files, which then only need to be put in the correct folders for your app or website and you're good to go. As DevTranslate provides simultaneous translation into up to 26 languages and handles multiple file formats you can be sure you'll have your localization process finished in no time regardless of what format or language you choose. Between the extremes of either relying on costly and time-consuming human translations and painstakingly copy-pasting content into an online translator, using a professional machine translation app is simply the most cost-effective solution. Whichever json translator tools you decide on it's always important to take the alternatives into consideration - if your translation needs change what you relied on so far can either become complete overkill or wholly ineffective.

Top JSON Translator Tools for 2023

You may also like

Easy Vue internationalization - guide to the Vue I18n plugin

DevTranslate team

Auto reload locales in Nextjs without restarting the server

DevTranslate team

Top JSON Translator Tools for 2023

DevTranslate team

Translate your
application

Don't waste your time! Use our hassle-free online arb, strings xml & json translator.

You may also like

Easy Vue internationalization - guide to the Vue I18n plugin

DevTranslate team

Auto reload locales in Nextjs without restarting the server

DevTranslate team

Top JSON Translator Tools for 2023

DevTranslate team

Translate your application

Don't waste your time! Use our hassle-free online arb, strings xml & json translator.

Translate your
application