vue-i18n-loader
vue-i18n loader for custom blocks
## :cd: Installation
$ npm i --save-dev @kazupon/vue-i18n-loader
## :rocket: Usage
the below example that`App.vue` have `i18n` custom block:
### Basic
```vue
{{ $t('hello') }}
{
"en": {
"hello": "hello world!"
},
"ja": {
"hello": "こんにちは、世界!"
}
}
```
The locale messages defined at `i18n` custom blocks are **json format default**.
### Source importing
you also can:
```vue
```
```json5
// ./myLnag.json
{
"en": {
"hello": "hello world!"
},
"ja": {
"hello": "こんにちは、世界!"
}
}
```
### Locale definition
You can define locale messages for each locale with `locale` attr in single-file components:
```vue
{
"hello": "hello world!"
}
{
"hello": "こんにちは、世界!"
}
```
The above defines two locales, which are merged at target single-file components.
### Locale Messages formatting
Besides json format, You can be used by specifying the following format in the `lang` attribute:
- yaml
- json5
example yaml foramt:
```vue
hello: "hello world!"
hello: "こんにちは、世界！"
```
example json5 format:
```vue
{
"en": {
// comments
"hello": "hello world!"
}
}
```
### JavaScript
```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import App from './App.vue'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en',
messages: {
en: {
// ...
},
ja: {
// ...
}
}
})
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
```
### Webpack Config
`vue-loader` (v15 or later):
```javascript
// for vue.config.js (Vue CLI)
module.exports = {
chainWebpack: config => {
config.module
.rule('i18n')
.resourceQuery(/blockType=i18n/)
.type('javascript/auto')
.use('i18n')
.loader('@kazupon/vue-i18n-loader')
}
}
```
`vue-loader` (v15 or later):
```javascript
// for webpack.config.js (Without Vue CLI)
module.exports = {
module: {
rules: [
{
resourceQuery: /blockType=i18n/,
type: 'javascript/auto',
loader: '@kazupon/vue-i18n-loader',
},
]
}
}
```
`vue-loader` (~v14.x):
```javascript
// for webpack config file
module.exports = {
module: {
rules: [{
test: /\.vue$/,
loader: 'vue',
options: {
loaders: {
i18n: '@kazupon/vue-i18n-loader'
}
}
}]
}
}
```
## :scroll: Changelog
Details changes for each release are documented in the [CHANGELOG.md](https://github.com/kazupon/vue-i18n-loader/blob/dev/CHANGELOG.md).
## :muscle: Contribution
Please make sure to read the [Contributing Guide](https://github.com/kazupon/vue-i18n-loader/blob/dev/CONTRIBUTING.md) before making a pull request.
## :copyright: License
[MIT](http://opensource.org/licenses/MIT)