Simple Localization Plugin For Vue.js – V-Localize

Simple Localization Plugin For Vue.js – V-Localize

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



build npm version Join the chat at



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


Chome Edge Firefox Opera Safari
4.0+ ✔ 3.5+ ✔ 10.50+ ✔ 4.0+ ✔

V-Localize was developed using Vue.js 2.x, support for previous versions is not available.


To install via Bower, simply do the following:

bower install v-localize

To install via NPM:

npm install v-localize

For a quick start using jsdelivr:

<script src=""></script>

Installing the plugin is then as simple as:

import Localize from 'v-localize';


let localize = Localize.config({
  default: 'en-US',
  available: ['en-US', 'es-SP', {
    locale: 'ar-MS',
    orientation: 'rtl',
    font: {
      size: 'smaller'
  fallback: '?',
  localizations: {
    "en-US": {
      header: {
        title: 'English'
    "es-SP": {
      header: {
        title: 'Spanish'
    "ar-MS": {
      header: {
        title: 'Arabic'

new Vue({
  el: '#app',

Once your Vue app has been instantiated, the language can be changed by calling $locale(args*) from your Vue instance or virtual node.

<button @click="$locale({l: 'en-US'})">English</button>
<button @click="$locale({l: 'es-SP'})">Spanish</button>

You can specify your localizations like so:

<!-- add a localized title to this element targeting en-US -->
<h1 v-localize="{i: 'header.title', t: 'en-US', attr: 'title'}">Hello World</h1>
<!-- replace this element's text with localized item -->
<h2 v-localize="{i: 'header.title'}"></h2>

Alternatively, you can get your current localization by calling $locale() without specifying a language.

<!-- fetch current locale -->
<h1>Locale: {{ $locale() }}</h1>

For fetching a specific locale item programatically within a component method:

export default {
  name: 'some-component',
  methods: {
    getTitle() {
      window.alert(this.$locale({i: 'title'}))
    getSpanishTitle() {
      window.alert(this.$locale({i: 'title', t: 'sp-ES'}))


The plugin takes 5 options,

debug: If enabled, will spit warnings and errors to console.

default: Default language key to target if not set already.

available: List of available localizations, can optionally specify locale options. ex;

['en-US', 'es-SP', 'pr-BR', {
  locale: 'ar-MS',
  orientation: 'rtl'

fallbackContent: Use the existing node's text content if enabled and requested localization is not found.

fallback: Default text to show if localization for current language not found. If not specified, will default to 'N/A'.

webStore: If the Vue instance is accessed within a web context and option webStore is enabled, plugin will store the locale in local storage for the next visit.

localizations: JSON object for localizations.

 "en-US": { // language branch
   "header": "Hello World!", // localization
   "nav": {
     "home": "Home" // nested localization

Locale Options

Locale configuration currently supports the following options,

orientation: Text direction of target element, useful for orientation of script languages. Font family to change to. Re:

font.size: Font size to scale to. Re:


Contributing guidelines are as follows,

  • Any new features must include either a unit test, e2e test, or both.

    • Branches for bugs and features should be structured like so, issue-x-username.
  • Before putting in a pull request, be sure to verify you've built all your changes.

    Travis will build your changes before testing and publishing, but bower pulls from this repository directly.

  • Include your name and email in the contributors list.

Copyright (c) 2018 John Nolette Licensed under the MIT license.

Github Repository

Tags: #VueJs