Skip to content

Commit 1c9f308

Browse files
committed
📝 docs(README): add usage
1 parent 9eb85f8 commit 1c9f308

File tree

1 file changed

+69
-2
lines changed

1 file changed

+69
-2
lines changed

README.md

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,77 @@
66

77
vue-i18n loader for custom blocks
88

9-
## :scroll: Changelog
10-
Details changes for each release are documented in the [CHANGELOG.md](https://github.com/kazupon/vue-i18n-loader/blob/dev/CHANGELOG.md).
9+
## :rocket: Usage
10+
11+
the below `App.vue` have `i18n` custom block:
12+
```html
13+
<i18n>
14+
{
15+
"en": {
16+
"hello": "hello world!"
17+
},
18+
"ja": {
19+
"hello": "こんにちは、世界!"
20+
}
21+
}
22+
</i18n>
23+
24+
<tempalte>
25+
<p>{{ $t('hello') }}</p>
26+
</template>
27+
28+
<script>
29+
export default {
30+
name: 'app',
31+
// ...
32+
}
33+
</script>
34+
```
35+
36+
```javascript
37+
import Vue from 'vue'
38+
import VueI18n from 'vue-i18n'
39+
import App from './App.vue'
1140

41+
Vue.use(Vue-i18n)
1242

43+
const i18n = new VueI18n({
44+
locale: 'en',
45+
messages: {
46+
en: {
47+
// ...
48+
},
49+
ja: {
50+
// ...
51+
}
52+
}
53+
})
54+
new Vue({
55+
i18n,
56+
render: h => h(App)
57+
}).$mount('#app')
58+
```
59+
60+
configure webpack config for `vue-loader` (v11.3 later):
61+
62+
```javascript
63+
module.exports = {
64+
module: {
65+
rules: [{
66+
test: /\.vue$/,
67+
loader: 'vue',
68+
options: {
69+
loaders: {
70+
i18n: 'vue-i18n-loader'
71+
}
72+
}
73+
}]
74+
}
75+
}
76+
```
77+
78+
## :scroll: Changelog
79+
Details changes for each release are documented in the [CHANGELOG.md](https://github.com/kazupon/vue-i18n-loader/blob/dev/CHANGELOG.md).
1380

1481
## :muscle: Contribution
1582
Please make sure to read the [Contributing Guide](https://github.com/kazupon/vue-i18n-loader/blob/dev/CONTRIBUTING.md) before making a pull request.

0 commit comments

Comments
 (0)