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
Vue const i18n = locale: 'en' messages: en: // ... ja: // ... i18n Webpack Config
vue-loader (v15 or later):
// for vue.config.js (Vue CLI)moduleexports = { configmodule type'javascript/auto' }vue-loader (v15 or later):
// for webpack.config.js (Without Vue CLI)moduleexports = module: rules: resourceQuery: /blockType=i18n/ type: 'javascript/auto' loader: '@kazupon/vue-i18n-loader' vue-loader (~v14.x):
// for webpack config filemoduleexports = 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.
