:globe_with_meridians: vue-i18n loader for custom blocks
webpack loader for Vue I18n
This package is maintained for Vue I18n v8 (Vue 2).
If you want to use Vue I18n v9 (Vue 3) or later, See the @intlify/bundle-tools
repo.
$ npm i --save-dev @intlify/vue-i18n-loader
the below example thatApp.vue
have i18n
custom block:
<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.
you also can:
<i18n src="./myLang.json"></i18n>
// ./myLnag.json
{
"en": {
"hello": "hello world!"
},
"ja": {
"hello": "こんにちは、世界!"
}
}
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.
Besides json format, You can be used by specifying the following format in the lang
attribute:
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>
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')
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('@intlify/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: '@intlify/vue-i18n-loader',
},
]
}
}
vue-loader
(~v14.x):
// for webpack config file
module.exports = {
module: {
rules: [{
test: /\.vue$/,
loader: 'vue',
options: {
loaders: {
i18n: '@intlify/vue-i18n-loader'
}
}
}]
}
}
Details changes for each release are documented in the CHANGELOG.md.
Please make sure to read the Contributing Guide before making a pull request.