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:
- 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>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.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent