Plugin for multilanguage VueJS 2.0
JavaScript Vue HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit 3fbb2c8 May 18, 2018
Permalink
Failed to load latest commit information.
dist fix bugs May 18, 2018
example add middleware May 18, 2018
src fix bugs May 18, 2018
.babelrc 🔥 version 3.x, best reativity and simple code Oct 28, 2017
.editorconfig update to version 4 May 17, 2018
.gitignore dist folder May 17, 2018
.npmignore npm ignore May 17, 2018
CHANGELOG.md update to version 4 May 17, 2018
README.md fix bugs May 18, 2018
license add license mit May 17, 2018
package.json fix bugs May 18, 2018
yarn.lock update to version 4 May 17, 2018

README.md

vue-multilanguage: control of languages in vuejs

We will help you to control the languages in your app for yours components

Installation

# yarn
yarn add vue-multilanguage
# npm
npm install vue-multilanguage --save

Get Started

Create the ml.js file to define your multilanguage settings and languages:

import Vue from 'vue'
import { MLInstaller, MLCreate, MLanguage } from 'vue-multilanguage'

Vue.use(MLInstaller)

export default new MLCreate({
  initial: 'english',
  save: process.env.NODE_ENV === 'production',
  languages: [
    new MLanguage('english').create({
      title: 'Hello {0}!',
      msg: 'You have {f} friends and {l} likes'
    }),

    new MLanguage('portuguese').create({
      title: 'Oi {0}!',
      msg: 'Você tem {f} amigos e {l} curtidas'
    })
  ]
})

More details:

  • MLInstaller: plugin class for install in Vue with Vue.use
  • MLCreate: class to define acl settings
    • initial: first language, for startup with your app
    • save: save current language in localStorage
    • languages: array with your languages supported
  • MLanguage: class with language generator, create your language with it
    • create: method for create language based in object param

You can define a middleware for execute before all get call. Use this for custom structure app, e.g:

export default new MLCreate({
  ...
  middleware: (component, path) => {
    const newPath = `${component.$options.name}.${path}`
    // you should return newPath
    return newPath
  }
})

PS: in example, all $ml.get call go concate path with component name.

For finish, in your main.js import the ml:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './ml'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Use in components

You can define messages inside your component, use computed propertis with prefix ml

<template>
  <div id="app">
    <p v-text="$ml.get('myMessage')" />
  </div>
</template>

<script>
import { MLBuilder } from 'vue-multilanguage'

export default {
  name: 'app',
  data () {
    return { friends: 5 }
  },
  computed: {
    mlmyMessage () {
      return new MLBuilder('msg').with('f', this.friends).with('l', 406)
    }
  }
}
</script>

You too get message direct in template:

<h1 v-text="$ml.with('VueJS').get('title')" />

E.g: display 'Hello VueJS'.

You can get list language in any component using list property:

<button
	v-for="lang in $ml.list"
	:key="lang"
	v-text="lang"
/>

Finish, you can change current language in any component using change method:

<button
	v-for="lang in $ml.list"
	:key="lang"
	@click="$ml.change(lang)"
	v-text="lang"
/>