https://github.com/glenzli/vue-dynamic-locale

A dynamic multi language plugin for Vue.
https://github.com/glenzli/vue-dynamic-locale

json locale multi-language vue vuex

Last synced: about 4 hours ago
JSON representation

A dynamic multi language plugin for Vue.

• Host: GitHub
• URL: https://github.com/glenzli/vue-dynamic-locale
• Owner: glenzli
• License: other
• Created: 2018-05-18T07:23:26.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-15T06:01:52.000Z (over 5 years ago)
• Last Synced: 2024-10-29T05:47:56.851Z (19 days ago)
• Topics: json, locale, multi-language, vue, vuex
• Language: TypeScript
• Homepage:
• Size: 123 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue-Dynamic-Locale

A straightforward implemention for multi-language for local Vue app (e.g. electron). You can change language dynamically.

## Install

The recommended way to install and maintain vue-dynamic-locale in your project is through the Node.js Pacakge Manager (NPM), simply type the npm command in your project folder:

```sh

npm install vue-dynamic-locale --save

```

## Usage

To use vue-dynamic-locale, you must install it as a Vue plugin with store included in options:

```javascript

import VueDynamicLocale from 'vue-dynamic-locale'

// path is the directory of locale json files.

const path = 'static/locale'

// default locale for the application

const defaultLocale = 'en'

// Vuex store must be included in options.

Vue.install(VueDynamicLocale, { store, path, defaultLocale })

```

Then, you can use **$t** object in your Vue components to access current language for specific key. For example, the language json file may like this:

```json

{

  "Hellow": {

    "World": "Dynamic"

  },

  "Locale": "Vue",

  "Array": ["Value1", "Value2", "Value3"],

  "Root": {

    ".": "Root", // "." is a special key represents it's root

    "Child": "Child"

  }

}

```

Then you can use it like this in Vue template:

```javascript

$t['Hellow.World'] // === 'Dynamic'

$t['Locale'] // === 'Vue'

$t['Array.0'] // === 'Value1'

$t['Array.2'] // === 'Value3'

$t['Root'] // === 'Root'

$t['Root.Child'] // === 'Child'

```

You can change locale by **$setLocale()**, and **$getLocales()** to list all avaiable locales in your locale directory.

## License

Distributed under the MIT license. See [LICENSE](https://github.com/luz-alphacode/vue-undoable/blob/master/LICENSE) for detail.