├── .babelrc ├── .editorconfig ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── README.md ├── dist ├── directive.js ├── enums │ └── getting-strategy.js ├── index.js ├── install.js └── mixin.js ├── example ├── .babelrc ├── .gitignore ├── .postcssrc.js ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── Children.vue │ ├── SubChildren.vue │ ├── assets │ │ └── logo.png │ ├── main.js │ └── ml.js └── yarn.lock ├── license ├── package.json ├── src ├── directive.js ├── enums │ └── getting-strategy.js ├── index.js ├── install.js └── mixin.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | tab_width = 2 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | example/.DS_Store 2 | example/node_modules/ 3 | example/dist/ 4 | example/npm-debug.log 5 | example/yarn-error.log 6 | .DS_Store 7 | node_modules/ 8 | npm-debug.log 9 | yarn-error.log 10 | *.sublime* 11 | .idea 12 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example 2 | src -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ** version 4 2 | 3 | - rewrite plugin 4 | - local message builder 5 | - builder from language 6 | - remove directive -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-multilanguage: control of languages in vuejs 2 | 3 | > We will help you to control the languages in your app for yours components 4 | 5 | ## Installation 6 | 7 | ```bash 8 | # yarn 9 | yarn add vue-multilanguage 10 | # npm 11 | npm install vue-multilanguage --save 12 | ``` 13 | 14 | ## Get Started 15 | 16 | Create the `ml.js` file to define your multilanguage settings and languages: 17 | 18 | ```javascript 19 | import Vue from 'vue' 20 | import { MLInstaller, MLCreate, MLanguage } from 'vue-multilanguage' 21 | 22 | Vue.use(MLInstaller) 23 | 24 | export default new MLCreate({ 25 | initial: 'english', 26 | save: process.env.NODE_ENV === 'production', 27 | languages: [ 28 | new MLanguage('english').create({ 29 | title: 'Hello {0}!', 30 | msg: 'You have {f} friends and {l} likes' 31 | }), 32 | 33 | new MLanguage('portuguese').create({ 34 | title: 'Oi {0}!', 35 | msg: 'Você tem {f} amigos e {l} curtidas' 36 | }) 37 | ] 38 | }) 39 | ``` 40 | 41 | More details: 42 | 43 | - **MLInstaller**: plugin class for install in Vue with Vue.use 44 | - **MLCreate**: class to define acl settings 45 | - **initial**: first language, for startup with your app 46 | - **save**: save current language in localStorage 47 | - **languages**: array with your languages supported 48 | - **MLanguage**: class with language generator, create your language with it 49 | - **create**: method for create language based in object param 50 | 51 | You can define a middleware for execute before all `get` call. Use this for custom structure app, e.g: 52 | 53 | ```javascript 54 | export default new MLCreate({ 55 | ... 56 | middleware: (component, path) => { 57 | const newPath = `${component.$options.name}.${path}` 58 | // you should return newPath 59 | return newPath 60 | } 61 | }) 62 | ``` 63 | 64 | PS: in example, all `$ml.get` call go concate path with component name. 65 | 66 | For finish, in your `main.js` import the `ml`: 67 | 68 | ```javascript 69 | import Vue from 'vue' 70 | import App from './App.vue' 71 | import router from './router' 72 | import './ml' 73 | 74 | Vue.config.productionTip = false 75 | 76 | new Vue({ 77 | router, 78 | render: h => h(App) 79 | }).$mount('#app') 80 | ``` 81 | 82 | ## Use in components 83 | 84 | You can define messages inside your component, use computed propertis with prefix `ml` 85 | 86 | ```html 87 | 92 | 93 | 108 | ``` 109 | 110 | You can also get message direct in template: 111 | 112 | ```html 113 |

114 | ``` 115 | 116 | E.g: display 'Hello VueJS'. 117 | 118 | You can get list language in any component using `list` property: 119 | 120 | ```html 121 |