Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neetjn/v-localize
Simple localization plugin for the amazing Vue.js.
https://github.com/neetjn/v-localize
babel es6 i18n javascript language locale localize vue vuejs
Last synced: 8 days ago
JSON representation
Simple localization plugin for the amazing Vue.js.
- Host: GitHub
- URL: https://github.com/neetjn/v-localize
- Owner: neetjn
- License: mit
- Created: 2017-05-09T01:35:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:17:40.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T21:52:42.475Z (7 months ago)
- Topics: babel, es6, i18n, javascript, language, locale, localize, vue, vuejs
- Language: CoffeeScript
- Homepage: https://neetjn.github.io/v-localize/
- Size: 1.19 MB
- Stars: 31
- Watchers: 2
- Forks: 3
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# **V-Localize**
[](https://www.npmjs.com/package/v-localize)
[](https://travis-ci.org/neetjn/v-localize/)
[](https://badge.fury.io/js/v-localize)
[](https://gitter.im/v-localize/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://nodei.co/npm/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:
```sh
bower install v-localize
```
To install via NPM:
```sh
npm install v-localize
```
For a quick start using jsdelivr:
```html
```
Installing the plugin is then as simple as:
```js
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.
```html
English
Spanish
```
You can specify your localizations like so:
```html
Hello World
```
Alternatively, you can get your current localization by calling `$locale()` without specifying a language.
```html
Locale: {{ $locale() }}
```
For fetching a specific locale item programatically within a component method:
```js
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;
```js
['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.
```js
{
"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** ([email protected])
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.