vue-i18n-loader
vue-i18n loader for custom blocks
💿 Installation
$ npm i --save-dev @kazupon/vue-i18n-loader
🚀 Usage
the below example thatApp.vue have i18n custom block:
Basic
<template>
<p>{{ $t('hello') }}</p>
</template>
<script>
export default {
name: 'app',
// ...
}
</script>
<i18n>
{
"en": {
"hello": "hello world!"
},
"ja": {
"hello": "こんにちは、世界!"
}
}
</i18n>The locale messages defined at i18n custom blocks are json format default.
Source importing
you also can:
<i18n src="./myLang.json"></i18n>// ./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:
<i18n locale="en">
{
"hello": "hello world!"
}
</i18n>
<i18n locale="ja">
{
"hello": "こんにちは、世界!"
}
</i18n>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:
<i18n locale="en" lang="yaml">
hello: "hello world!"
</i18n>
<i18n locale="ja" lang="yml">
hello: "こんにちは、世界！"
</i18n>example json5 format:
<i18n lang="json5">
{
"en": {
// comments
"hello": "hello world!"
}
}
</i18n>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):
// 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):
// 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):
// for webpack config file
module.exports = {
module: {
rules: [{
test: /\.vue$/,
loader: 'vue',
options: {
loaders: {
i18n: '@kazupon/vue-i18n-loader'
}
}
}]
}
}
📜 Changelog
Details changes for each release are documented in the CHANGELOG.md.
💪 Contribution
Please make sure to read the Contributing Guide before making a pull request.