@intlify/vue-i18n-loader

⚠️ Notice

💿 Installation

$ npm i --save-dev @intlify/vue-i18n-loader

🚀 Usage

Basic

<template>  <p>{{ $t('hello') }}</p></template><script>exportdefault {  name:'app',// ...}</script><i18n>{  "en": {    "hello": "hello world!"  },  "ja": {    "hello": "こんにちは、世界!"  }}</i18n>

Source importing

<i18n src="./myLang.json"></i18n>

// ./myLnag.json{"en":{"hello":"hello world!"},"ja":{"hello":"こんにちは、世界!"}}

Locale definition

<i18n locale="en">{  "hello": "hello world!"}</i18n><i18n locale="ja">{  "hello": "こんにちは、世界!"}</i18n>

Locale Messages formatting

<i18n locale="en" lang="yaml">hello:"hello world!"</i18n><i18n locale="ja" lang="yml">  hello: "こんにちは、世界！"</i18n>

<i18n lang="json5">{  "en": {    // comments    "hello": "hello world!"  }}</i18n>

JavaScript

importVuefrom'vue'importVueI18nfrom'vue-i18n'importAppfrom'./App.vue'Vue.use(VueI18n)consti18n=newVueI18n({locale:'en',messages:{en:{// ...},ja:{// ...}}})newVue({  i18n,render:h=>h(App)}).$mount('#app')

Webpack Config

// 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')}}

// for webpack.config.js (Without Vue CLI)module.exports={module:{rules:[{resourceQuery:/blockType=i18n/,type:'javascript/auto',loader:'@intlify/vue-i18n-loader',},]}}

// for webpack config filemodule.exports={module:{rules:[{test:/\.vue$/,loader:'vue',options:{loaders:{i18n:'@intlify/vue-i18n-loader'}}}]}}

📜 Changelog

💪 Contribution

©️ License