V-Localize
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:
Installing the plugin is then as simple as:
; Vue; let localize = Localize; 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.
EnglishSpanish
You can specify your localizations like so:
<!-- add a localized title to this element targeting en-US -->Hello World<!-- replace this element's text with localized item -->
Alternatively, you can get your current localization by calling $locale()
without specifying a language.
<!-- fetch current locale -->Locale: {{ $locale() }}
For fetching a specific locale item programatically within a component method:
name: 'some-component' methods: { window } { window }
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 optionwebStore
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
- John Nolette (john@neetgroup.net)
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
.
- Branches for bugs and features should be structured like so,
-
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.