Vue I18n

# Tooling

To support the i18n of Vue applications, some tools are officially provided.

There are also tools from third vendors integrating Vue I18n.

# Official tooling

# Vue CLI Plugin

vue-cli-plugin-i18n (opens new window) is officially provided as the Vue CLI Plugin.

With this plugin, you can setup the i18n environment for the Vue application, and support the i18n development environment.

# Nuxt Module

nuxt-i18n (opens new window) is corresponding Nuxt.js module.

# Webpack loader

vue-i18n-loader (opens new window) is an officially provided webpack loader.

With this loader, you can use the i18n custom block in the Single file components.

In about i18n custom block, see the Single file components section

# ESLint Plugin

eslint-plugin-vue-i18n (opens new window) is ESLint plugin for Vue I18n.

It easily integrates some localization lint features to your Vue.js Application.

# Extensions

vue-i18n-extensions (opens new window) provides some extensions for Vue I18n.

You can use this extension to enable SSR and improve i18n performance.

# 3rd party tooling

# BabelEdit

BabelEdit (opens new window) is translation editor for web apps.

BabelEdit can translate json files, and it can also translate i18n custom block of Single-file components.

Read more about BabelEdit in tutorial page (opens new window).

# i18n Ally

i18n Ally (opens new window) is i18n extension for VSCode.

i18n Ally give awesome DX for your i18n development.

Read more about i18n Ally in README (opens new window).

# i18nPlugin (intellij platform)

i18nPlugin (opens new window) Intellij idea i18next support plugin ( Jetbrains plugin page (opens new window)).

Plugin for i18n typescript/javascript/PHP. Supports vue-i18n. To enable vue-i18n support go to settings -> Tools -> i18n Plugin configuration and check "Vue-i18n". You need set vue locales directory (locales by default).

# vue-i18n-extract

vue-i18n-extract (opens new window) performs static analysis on a Vue.js project based on vue-i18n and reports the following information:

  • list of all the unused vue-i18n keys (entries found in the language files but not used in the project)
  • list of all the missing keys (entries fond in the project but not in the language files)

It's possible to show the output in the console or to write it in a json file.

The missing keys can be also automatically added to the given language files.

←