vue-i18n-loader

This is an experimental webpack tool for vue-i18n. The package provides webpack loader and plugin to load translations from <i18n> custom blocks.

If the plugin added to a webpack.config.js, it will add prefix to translation messages paths & their usages in <template>/script blocks. Currently, not all variants of vue-i18n syntax are covered with prefix, in particular, renamings are not supported:

const t = this.$i18n.t

t('some.translation.path') // will not be prefixed

Supported syntax:

• methods $t, $tc in templates;
• methods t, tc in this.$i18n.%methodName% calls;
• directive v-t;
• interpolation component <i18n>.

Restrictions:

• renamings;
• usage as map method like paths.map(this.$i18n.t) or similar;
• computed dynamic paths.

Webpack config example:

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VueI18NLoaderPlugin = require('@retailcrm/vue-i18n-loader/lib/plugin')

module.exports = {
  mode: 'development',

  devtool: 'source-map',

  context: __dirname,

  entry: './__fixtures__/entry.js',

  resolve: {
    alias: {
      '~target': path.resolve(__dirname, fixture),
    },
  },

  output: {
    path: '/',
    filename: 'bundle.js'
  },

  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader',
    }, {
      resourceQuery: /blockType=i18n/,
      type: 'javascript/auto',
      loader: '@retailcrm/vue-i18n-loader',
    }],
  },

  plugins: [
    new VueLoaderPlugin(),
    new VueI18NLoaderPlugin(),
  ],
}