File tree Expand file tree Collapse file tree 1 file changed +69
-2
lines changed Expand file tree Collapse file tree 1 file changed +69
-2
lines changed Original file line number Diff line number Diff line change 6
6
7
7
vue-i18n loader for custom blocks
8
8
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'
11
40
41
+ Vue .use (Vue- i18n)
12
42
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 ) .
13
80
14
81
## :muscle : Contribution
15
82
Please make sure to read the [ Contributing Guide] ( https://github.com/kazupon/vue-i18n-loader/blob/dev/CONTRIBUTING.md ) before making a pull request.
You can’t perform that action at this time.
0 commit comments