Vue Community

# I18n

Making a website internationalized (i18n) is a common task, but it is something that trips most developers into spending lots of time and energy figuring out.

You can easily add i18n to a Vue powered website by using one of the packages listed below:

# Vue I18n Popular

Vue I18n is one of the first and most popular packages for implementing i18n into Vue apps, written by one of the Vue core team members. It can be used with flat or nested messages, adds support for dynamic properties, SFC style messages via custom tag, pluralisation, dynamic message and language registration, custom component and tag injection into translation string via placeholders and much more.

It has a Vue CLI plugin, which takes care of installation and setup, along with an optional ESLint plugin with rules for best practices. The Vue-i18n-extract package allows tracking missing and unused translation strings.

Vue I18n can be used inside Vue files as well as outside, in Router guards or Vuex, via a simple VueI18n instance export.

Official
Learning material
Tools

# Vuex-I18n

Vuex-i18n is a simpler, more basic i18n package, that relies on a Vuex module to store the translation messages.

It also supports lazy registration of translation strings, basic pluralisation, custom string fallback handling, dynamic parameters and inline default string definition.

Official

# Vue-I18Next

i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

Vue-i18Next is a wrapper around the i18next library, which is a general, framework agnostic package for managing localisation and internationalisation, lazy loading translations, Namespaced translation for components, component interpolation.

They offer an optional, very well integrated web service for managing translations - locize.com

Official
Tutorials

# fluent-vue

fluent-vue is an internationalization plugin for Vue.js. It is a Vue.js integration for Fluent.js - JavaScript implementation of Mozilla's Project Fluent.

Fluent is a localization paradigm designed to unleash the expressive power of the natural language. The format used to describe translation resources used by Fluent is called FTL. FTL is designed to be simple to read, but at the same time allows to represent complex concepts from natural languages like gender, plurals, conjugations, and others.

Official
Learning material
Tools

← Testing Vue apps →