Skip to content

intlify/vue-i18n-loader

Repository files navigation

Vue I18n Loader logo

vue-i18n-loader

Build Status codecov npm @kazupon/vue-i18n-loader Dev Token

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.

©️ License

MIT

Sponsor this project

 

Packages

No packages published

Contributors 13