1 | <p align="center"><img width="373px" height="168px" src="./assets/vue-i18n-loader.png" alt="Vue I18n Loader logo"></p>
|
2 |
|
3 | <h1 align="center">vue-i18n-loader</h1>
|
4 |
|
5 | <p align="center">
|
6 | <a href="https://circleci.com/gh/kazupon/vue-i18n-loader"><img src="https://circleci.com/gh/kazupon/vue-i18n-loader.svg?style=svg" alt="Build Status"></a>
|
7 | <a href="https://codecov.io/gh/kazupon/vue-i18n-loader"><img src="https://codecov.io/gh/kazupon/vue-i18n-loader/branch/dev/graph/badge.svg" alt="codecov"></a>
|
8 | <a href="https://www.npmjs.com/package/@kazupon/vue-i18n-loader"><img src="https://img.shields.io/npm/v/@kazupon/vue-i18n-loader.svg" alt="npm"></a>
|
9 | <a href="https://devtoken.rocks/package/@kazupon/vue-i18n-loader"><img src="https://badge.devtoken.rocks/@kazupon/vue-i18n-loader" alt="@kazupon/vue-i18n-loader Dev Token"/></a>
|
10 | </p>
|
11 |
|
12 | <p align="center">vue-i18n loader for custom blocks</p>
|
13 |
|
14 | <br/>
|
15 |
|
16 | ## :cd: Installation
|
17 |
|
18 | $ npm i --save-dev @kazupon/vue-i18n-loader
|
19 |
|
20 | ## :rocket: Usage
|
21 |
|
22 | the below example that`App.vue` have `i18n` custom block:
|
23 |
|
24 | ### Basic
|
25 |
|
26 | ```vue
|
27 | <template>
|
28 | <p>{{ $t('hello') }}</p>
|
29 | </template>
|
30 |
|
31 | <script>
|
32 | export default {
|
33 | name: 'app',
|
34 | // ...
|
35 | }
|
36 | </script>
|
37 |
|
38 | <i18n>
|
39 | {
|
40 | "en": {
|
41 | "hello": "hello world!"
|
42 | },
|
43 | "ja": {
|
44 | "hello": "こんにちは、世界!"
|
45 | }
|
46 | }
|
47 | </i18n>
|
48 | ```
|
49 |
|
50 | The locale messages defined at `i18n` custom blocks are **json format default**.
|
51 |
|
52 | ### Source importing
|
53 |
|
54 | you also can:
|
55 |
|
56 | ```vue
|
57 | <i18n src="./myLang.json"></i18n>
|
58 | ```
|
59 |
|
60 | ```json5
|
61 | // ./myLnag.json
|
62 | {
|
63 | "en": {
|
64 | "hello": "hello world!"
|
65 | },
|
66 | "ja": {
|
67 | "hello": "こんにちは、世界!"
|
68 | }
|
69 | }
|
70 | ```
|
71 |
|
72 | ### Locale definition
|
73 |
|
74 | You can define locale messages for each locale with `locale` attr in single-file components:
|
75 |
|
76 | ```vue
|
77 | <i18n locale="en">
|
78 | {
|
79 | "hello": "hello world!"
|
80 | }
|
81 | </i18n>
|
82 |
|
83 | <i18n locale="ja">
|
84 | {
|
85 | "hello": "こんにちは、世界!"
|
86 | }
|
87 | </i18n>
|
88 | ```
|
89 |
|
90 | The above defines two locales, which are merged at target single-file components.
|
91 |
|
92 |
|
93 | ### Locale Messages formatting
|
94 |
|
95 | Besides json format, You can be used by specifying the following format in the `lang` attribute:
|
96 |
|
97 | - yaml
|
98 | - json5
|
99 |
|
100 | example yaml foramt:
|
101 |
|
102 | ```vue
|
103 | <i18n locale="en" lang="yaml">
|
104 | hello: "hello world!"
|
105 | </i18n>
|
106 |
|
107 | <i18n locale="ja" lang="yml">
|
108 | hello: "こんにちは、世界!"
|
109 | </i18n>
|
110 | ```
|
111 |
|
112 | example json5 format:
|
113 |
|
114 | ```vue
|
115 | <i18n lang="json5">
|
116 | {
|
117 | "en": {
|
118 | // comments
|
119 | "hello": "hello world!"
|
120 | }
|
121 | }
|
122 | </i18n>
|
123 | ```
|
124 |
|
125 | ### JavaScript
|
126 |
|
127 | ```javascript
|
128 | import Vue from 'vue'
|
129 | import VueI18n from 'vue-i18n'
|
130 | import App from './App.vue'
|
131 |
|
132 | Vue.use(VueI18n)
|
133 |
|
134 | const i18n = new VueI18n({
|
135 | locale: 'en',
|
136 | messages: {
|
137 | en: {
|
138 | // ...
|
139 | },
|
140 | ja: {
|
141 | // ...
|
142 | }
|
143 | }
|
144 | })
|
145 | new Vue({
|
146 | i18n,
|
147 | render: h => h(App)
|
148 | }).$mount('#app')
|
149 | ```
|
150 |
|
151 | ### Webpack Config
|
152 |
|
153 | `vue-loader` (v15 or later):
|
154 |
|
155 | ```javascript
|
156 | // for vue.config.js (Vue CLI)
|
157 | module.exports = {
|
158 | chainWebpack: config => {
|
159 | config.module
|
160 | .rule('i18n')
|
161 | .resourceQuery(/blockType=i18n/)
|
162 | .type('javascript/auto')
|
163 | .use('i18n')
|
164 | .loader('@kazupon/vue-i18n-loader')
|
165 | }
|
166 | }
|
167 | ```
|
168 |
|
169 | `vue-loader` (v15 or later):
|
170 |
|
171 | ```javascript
|
172 | // for webpack.config.js (Without Vue CLI)
|
173 | module.exports = {
|
174 | module: {
|
175 | rules: [
|
176 | {
|
177 | resourceQuery: /blockType=i18n/,
|
178 | type: 'javascript/auto',
|
179 | loader: '@kazupon/vue-i18n-loader',
|
180 | },
|
181 | ]
|
182 | }
|
183 | }
|
184 | ```
|
185 |
|
186 | `vue-loader` (~v14.x):
|
187 |
|
188 | ```javascript
|
189 | // for webpack config file
|
190 | module.exports = {
|
191 | module: {
|
192 | rules: [{
|
193 | test: /\.vue$/,
|
194 | loader: 'vue',
|
195 | options: {
|
196 | loaders: {
|
197 | i18n: '@kazupon/vue-i18n-loader'
|
198 | }
|
199 | }
|
200 | }]
|
201 | }
|
202 | }
|
203 | ```
|
204 |
|
205 | ## :scroll: Changelog
|
206 | Details changes for each release are documented in the [CHANGELOG.md](https://github.com/kazupon/vue-i18n-loader/blob/dev/CHANGELOG.md).
|
207 |
|
208 | ## :muscle: Contribution
|
209 | Please make sure to read the [Contributing Guide](https://github.com/kazupon/vue-i18n-loader/blob/dev/CONTRIBUTING.md) before making a pull request.
|
210 |
|
211 | ## :copyright: License
|
212 |
|
213 | [MIT](http://opensource.org/licenses/MIT)
|