Skip to content

Commit 1af6c5d

Browse files
🔥 version 3.x, best reativity and simple code
1 parent a277be8 commit 1af6c5d

13 files changed

+7495
-1532
lines changed

.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015"]
3+
}

README-PT.md

-175
This file was deleted.

README.md

+6-75
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
> A very easy-to-use Vue.js plugin that provides multi-language support
44
55
### Dependencies
6-
- VueJS 2.0+
6+
- Vue.js 2.0+
77

88
### Installation
99
We have two methods of installation; you can use `npm` or a standalone.
@@ -78,42 +78,6 @@ Sometimes it's easier to use the component model of Vue to manage your languages
7878

7979
The vue-multilanguage plugin will first look at the `messages` option in the local component before looking at globally-defined messages.
8080

81-
You can also embed the default language directly into your template, as long as it has a `default` defined in the plugin's configuration. This can save you a lot of time if you are translating an existing site that didn't previously have localization.
82-
83-
```html
84-
<template>
85-
<p v-lang.hi>Hello</p>
86-
</template>
87-
<script>
88-
export default {
89-
data() { return {} }
90-
messages: {
91-
pt: {
92-
hi: 'Olá'
93-
}
94-
}
95-
}
96-
</script>
97-
```
98-
99-
Note that you can still use substitutions when defining default messages from your markup.
100-
101-
```html
102-
<template>
103-
<p v-lang.welcome="{name: 'Vue.JS'}">Welcome, {name}</p>
104-
</template>
105-
<script>
106-
export default {
107-
data() { return {} }
108-
messages: {
109-
pt: {
110-
welcome: 'Bem-vindo, {name}'
111-
}
112-
}
113-
}
114-
</script>
115-
```
116-
11781

11882
### Programmatic Usage
11983

@@ -122,53 +86,24 @@ There is a `translate` method that you can use to retrieve a translation. For ex
12286
```js
12387
computed: {
12488
welcome() {
125-
return this.translate(this.$language, 'welcome', 'Vue.JS')
89+
return this.translate('welcome', 'Vue.JS')
12690
}
12791
}
12892
```
12993

13094
### Change the current language
13195

132-
To change the language currently used by the system, change the `$ language` option value to any of its components, for example:
96+
To change the language currently used by the system, change the `language` option value to any of its components, for example:
13397

13498
```js
135-
this.$language = 'en'
99+
this.language = 'en'
136100
```
137101

138102
If you don't set a default language on the language object, the default language will be automatically picked up in the client browser. If no language can still be found or you're in a JavaScript environment outside the browser (such as Node.js), then the default language becomes the first language listed.
139103

140-
this.$language = 'en'
104+
this.language = 'en'
141105

142-
As of version 2.2.3, the whole thing is to change the language by firing a `$emit` named `changeLang`, thus making it easier for children who change the language of the site to propagate a change to their parent, for example:
143106

144-
```vue
145-
<template>
146-
<div id="app">
147-
<h1 v-lang.title.project v-show="false"></h1>
148-
...
149-
<lv-side-menu @changeLang="changeLanguage"></lv-side-menu>
150-
...
151-
</div>
152-
</template>
153-
154-
<script>
155-
import LvSideMenu from './components/template/SideMenu.vue'
156-
export default {
157-
name: 'app',
158-
components: { LvSideMenu },
159-
methods: {
160-
changeLanguage(lang) {
161-
this.$language = lang
162-
}
163-
},
164-
}
165-
</script>
166-
```
167-
168-
In the example given, the `App` component is the parent of `LvSideMenu`, this child will try to change the language of the site, then it will issue the `changeLang` event, which must be captured by the parent so that the language defined by the child is propagated .
169-
170-
171-
**Note:** See that in `App` I have the `h1` hidden element, it makes use of the `v-lang` directive, because without it the component would not be updated.
172107

173108
### LocalStorage
174109

@@ -178,11 +113,7 @@ As of version 2.2.3 of vue-multilanguage, we are writing the current language in
178113

179114
To help in the development and expansion of this repository take a FORK to your account, after you have made your modifications do a PULL REQUEST, it will be parsed and included here since it helps the plugin.
180115

181-
We have an example inside this repository, to execute it, run the commands:
182-
183-
npm run demo:install
184-
npm run demo
185-
116+
Before your PR, run `npm run build` to transpile ES6 to ES5 file.
186117

187118
You can still contribute to the documentation, although your little one, support new languages, if you see something wrong in English correct it :)
188119

0 commit comments

Comments
 (0)