Nimble Pixie Merchant


    1.2.2 • Public • Published



    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 v-on:click="$locale({l: 'en-US'})">English</button>
    <button v-on: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) 2019 John Nolette Licensed under the MIT license.


    npm i v-localize

    DownloadsWeekly Downloads






    Unpacked Size

    36.2 kB

    Total Files


    Last publish


    • neetjn