Localization plugin for vue.js 2.0 using vuex as store

Related tags

i18n vuex-i18n
Overview

vuex-i18n

We are big fans of the awesome vue, vuex and vue-router libraries and were just looking for an easy to use internationalization plugin, employing as much of the "standard library" as possible.

The main difference to other internationalization plugins is the ease of use and support for locales directly with the application or later from the server.

Requirements

  • Vue ^2.0.0
  • Vuex ^2.0.0

Installation

$ npm install vuex-i18n

Setup

The vuex-i18n plugin is intended to be used for applications that use vuex as store and require localized messages. Make sure that both vue and vuex have been loaded beforehand.

The plugin provides a vuex module to store the localization information and translations and a plugin to allow easy access from components.

The plugin does not make any assumption on how you want to load the localization information. It can be loaded on start in your application bundle or dynamically after when the user is switching to a different language.

A corresponding example can be found in the test directory.

{{ 'My nice title' | translate }}

{{ $t('content', {'type': 'nice'}) }}

` }); ">
// load vue and vuex instance
import Vue from 'vue';
import Vuex from 'vuex';

// load vuex i18n module
import vuexI18n from 'vuex-i18n';

// initialize the vuex store using the vuex module. note that you can change the
//  name of the module if you wish
const store = new Vuex.Store();

// initialize the internationalization plugin on the vue instance. note that
// the store must be passed to the plugin. the plugin will then generate some
// helper functions for components (i.e. this.$i18n.set, this.$t) and on the vue
// instance (i.e. Vue.i18n.set).
Vue.use(vuexI18n.plugin, store);

// please note that you must specify the name of the vuex module if it is
// different from i18n. i.e. Vue.use(vuexI18n.plugin, store, 'myName')


// add some translations (could also be loaded from a separate file)
// note that it is possible to use placeholders. translations can also be
// structured as object trees and will automatically be flattened by the the
// plugin
const translationsEn = {
	"content": "This is some {type} content"
};

// translations can be kept in separate files for each language
// i.e. resources/i18n/de.json.
const translationsDe = {
	"My nice title": "Ein schöner Titel",
	"content": "Dies ist ein toller Inhalt"
};

// add translations directly to the application
Vue.i18n.add('en', translationsEn);
Vue.i18n.add('de', translationsDe);

// set the start locale to use
Vue.i18n.set('en');

// create a new component (requires a div with id app as mount point)
// you can use the method $t to access translations. the value will be returned
// as is, if no corresponding key is found in the translations
var app = new Vue({
	store,
	el: '#app',
	template: `
		

{{ 'My nice title' | translate }}

{{ $t('content', {'type': 'nice'}) }}

` });

Usage

vuex-i18n provides easy access to localized information through the use of the $t() method or the translate filter.

The plugin will try to find the given string as key in the translations of the currently defined locale and return the respective translation. If the string is not found, it will return as is. This wil allow you to setup an application very quickly without having to first define all strings in a separate template.

It is also possible to specify a fallback-locale $i18n.fallback(locale). If the key is not found in current locale, vuex-i18n will look for the key in the fallback-locale. If the key can not be found in the fallback-locale either, the key itself will be returned as translation.

">
<div>
	// will return: "Some localized information"
	{{ $t('Some localized information')}}
</div>

In larger projects, it is often easier to use a more robust translation key instead of the default text. Therefore it is also possible to specify the key and default translation. The default value will only be used, if the key cannot be found in the current and in the fallback locale.

Dynamic parameters that can be passed to the translation method in the form of key/value pairs. ```javascript
// will return: "You have 5 new messages" {{ $t('You have {count} new messages', {count: 5}) }}
">
<div>
	// will return: "Default information text" if the key non.existing.key is
	// not specified in the current and the fallback locale
	{{ $t('non.existing.key', 'Default information text')}}
</div>

Dynamic parameters that can be passed to the translation method in the form of
key/value pairs.

```javascript
<div>
	// will return: "You have 5 new messages"
	{{ $t('You have {count} new messages', {count: 5}) }}
</div>

It is possible to specify custom identifiers for variable substitutions. The respective identifiers - start and stop - must be passed when initializing the module. Please note that a regular expression is used to match the tags. Therefore it might be necessary to escape certain characters accordingly.

// i.e. to use {{count}} as variable substitution.
// the third parameter defines the module name and is i18n per default
Vue.use(vuexI18n.plugin, store, 'i18n', ['{{','}}']);

Basic pluralization is also supported. Please note, that the singular translation must be specified first, followed by plural translations denoted by :::. Up to six pluralization forms are supported based on configuration taken from vue-gettext. The second option is used for variable replacements. The third option to define if the singular or pluralized translation should be used (see below for examples).

">
<div>
	// will return: "You have 5 new messages" if the third argument is 5"
	// or "You have 1 new message" if the third argument is 1
	// or "You have 0 new messages" if the third argument is 0 (note pluralized version)
	{{ $t('You have {count} new message ::: You have {count} new messages', {count: 5}, 5) }}
</div>
">
<div>
	// In case when there are more than singular and plural versions like in Latvian language.
	// will return: "5 bērni" (in english - 5 children) if the third argument is 5"
	// or "2 bērni" if the third argument is 2
	// or "1 bērns" if the third argument is 1    
	// or "0 bērnu" if the third argument is 0
	{{ $t('{count} bērns ::: {count} bērni ::: {count} bērnu', {count: 5}, 5) }}
</div>

The current locale can be set using the $i18n.set() method. By default, the translation method will select the pre-specified current locale. However, it is possible to request a specific locale using the $tlang() method.

<div>
	// will return the english translation regardless of the current locale
	{{ $tlang('en', 'You have {count} new messages', {count: 5}) }}
</div>

There are also several methods available on the property this.$i18n or Vue.i18n

$i18n.locale(), Vue.i18n.locale()
// get the current locale

$i18n.set(locale), Vue.i18n.set(locale)
// set the current locale (i.e. 'de', 'en')

$i18n.add(locale, translations), Vue.i18n.add(locale, translations)
// add a new locale to the storage
// (i.e. 'de', {'message': 'Eine Nachricht'})

$i18n.localeExists(locale), Vue.i18n.localeExists(locale)
// check if the given locale translations are present in the store

$i18n.keyExists(key), Vue.i18n.keyExists(key)
// check if the given key is available in the current or fallback locale

$i18n.remove(locale), Vue.i18n.remove(locale)
// remove the given locale from the store

$i18n.fallback(locale), Vue.i18n.fallback(locale)
// set a fallback locale if translation for current locale does not exist

Contributions

Any comments or suggestions are very welcome.

You might also like...
Vue CLI plugin to add vue-i18n to your Vue Project

🌏 vue-cli-plugin-i18n Vue CLI plugin to add vue-i18n to your Vue Project 🌟 Features vue-i18n basic scaffolding Locale messages in Single File compon

🔥️ Vue I18n Lite🌐 Lightweight, minimal internationalization plugin for Vue.js

🌐 Lightweight, minimal internationalization plugin for Vue.js

:globe_with_meridians: Internationalization plugin for Vue.js
:globe_with_meridians: Internationalization plugin for Vue.js

vue-i18n Internationalization plugin for Vue.js 🥇 Gold Sponsors 🥈 Silver Sponsors 🥉 Bronze Sponsors ⚠️ NOTICE This repository is for Vue I18n v8.x.

:globe_with_meridians: Vite plugin for Vue I18n

🌐 @intlify/vite-plugin-vue-i18n Vite plugin for Vue I18n ⭐ Features i18n resources pre-compilation i18n custom block Static bundle importing Bundling

Composition API plugin for Vue 2

@vue/composition-api Vue 2 plugin for Composition API English | 中文 ・ Composition API Docs Installation NPM npm install @vue/composition-api # or yarn

A simple i18n plugin for Vue 3

vue3-i18n A simple i18n plugin for Vue 3 Install npm install @yangss/vue3-i18n Usage 在 main.js 文件中引入 vue3-i18n import App from './App.vue' import { cr

Vue cli plugin i18n

Vue cli plugin i18n

Vue plugin for integrating I18Next

vue-i18next Vue plugin for integrating I18Next. About This is a plugin for the Vue view data-binding library, integrating the I18Next internationaliza

ESLint plugin for Vue I18n

Intlify Project is an open source project that is included Vue I18n and i18n tooling and libralies with its ongoing development made possible entirely by the support of Sponsors.

Owner
Nikolai Paschenko
Nikolai Paschenko
Localization plugin for vue.js 2.0 using vuex as store

vuex-i18n We are big fans of the awesome vue, vuex and vue-router libraries and were just looking for an easy to use internationalization plugin, empl

Nikolai Paschenko 0 Jul 8, 2017
Simple localization plugin for the amazing Vue.js.

V-Localize About V-Localize is a very simple localization plugin for Vue.js. Your localizations will be available anywhere in your web application wra

John W. Nolette 31 Mar 22, 2022
Localization plugin for vue-formily.

Localization plugin for vue-formily. Links ?? Documentation Installation NPM # install with yarn yarn add @vue-formily/i18n # install with npm npm in

null 0 Sep 27, 2021
Manage vue-i18n localization with static analysis

Analyse all the vue-i18n language files and placeholders of your project. ?? Table of Contents Installation Introduction How to use it? Contribution C

Raffaele Pizzari 218 Nov 15, 2022
A banana-i18n wrapper to support localization in Vue.js

vue-banana-i18n A banana-i18n wrapper to support localization in Vue.js Playground Installation npm install vue-banana-i18n then import i18n from 'vue

Santhosh Thottingal 5 Jan 20, 2022
Localization for Vue and Laravel

Localization for Vue and Laravel This package allows to easily setup localization with a Laravel application using Vue. It is based on Lang.js.

Enzo Innocenzi 31 Sep 13, 2022
Manage vue-i18n localization with static analysis

vue-i18n-extract vue-i18n-extract is built to work with your Vue.js projects using vue-i18n. When run vue-18n-extract analyses your Vue.js source code

æternity 0 Feb 1, 2022
Advanced localization support for VueJS

VueJS TS Locale VueJS Plugin for advanced localization of web applications using typescript Links GitHub NPM Installation Should be installed locally

TWC Apps 34 Nov 11, 2022
Async store and load vue-i18n messages

vue-i18n-fetch Async store and load vue-i18n messages Requeriments Currently this package is only compatible with Vue I18n v9 Installation NPM npm ins

Acium Global 0 Jun 4, 2021
Coronasweeper game build with Vue, Vuex, vue-i18n, jQuery

Coronasweeper game build with Vue, Vuex, vue-i18n, jQuery You can play here Project setup npm install Compiles and hot-reloads for development npm ru

null 4 Jan 5, 2022