Skip to content
Simple localization plugin for the amazing Vue.js.
CoffeeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__test__ Adding test, fixing bug. Aug 7, 2019
dist
src Adding test, fixing bug. Aug 7, 2019
.editorconfig
.gitignore
.gitpod.yml Fixing security concerns, adding gitpod config Apr 10, 2019
.travis.yml Adding codecov Apr 12, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Dec 25, 2017
ISSUE_TEMPLATE.md
LICENSE
PULL_REQUEST_TEMPLATE.md
README.md Updating copyright details Aug 7, 2019
_config.yml Set theme jekyll-theme-slate Dec 18, 2017
bower.json Fixed vue instance ref Dec 27, 2017
coffee-lint.json Initial conversion, cleaned up npm scripts Feb 7, 2018
jest.config.js Adding default jest config Apr 11, 2019
package-lock.json Fixing security vulnerabilities Aug 7, 2019
package.json Updating package version Aug 7, 2019
webpack.config.js Using default webpack minifer Apr 11, 2019

README.md

V-Localize

npm

build npm version Join the chat at https://gitter.im/v-localize/Lobby

NPM

About

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.

Support

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.

Usage

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="https://cdn.jsdelivr.net/npm/v-localize/dist/v-localize.js"></script>

Installing the plugin is then as simple as:

import Localize from 'v-localize';

Vue.use(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',
  localize
});

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'}))
    }
  }
}

Configuration

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: Font family to change to. Re: https://www.w3schools.com/jsref/prop_style_fontfamily.asp

font.size: Font size to scale to. Re: https://www.w3schools.com/jsref/prop_style_fontsize.asp

Contributors

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.

You can’t perform that action at this time.