Single file components: <i18n>

by @kazupon (opens new window)

Single File Components can have an <i18n> block for defining translations locally in the component.

<i18n> { "en": { "hello": "hello world!" } } </i18n>

<template>
  <div id="app"><p>message: {{ $t('hello') }}</p></div>
</template>

<script>
  export default {
    name: "app"
  };
</script>

i18n tag

To use the <i18> tag you need to use vue-loader:

npm install @kazupon/vue-i18n-loader --save-dev

For detailed documentation check the original docs (opens new window).

// vue-loader (~v14.x):
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/kazupon/vue-i18n-loader)
            i18n: '@kazupon/vue-i18n-loader'
          }
        }
      },
      // ...
    ]
  },
  // ...
}

Use it with YAML:

npm install yaml-loader --save-dev

<i18n> en: hello: "hello world!" </i18n>

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          preLoaders: {
            i18n: "yaml-loader"
          },
          loaders: {
            i18n: "@kazupon/vue-i18n-loader"
          }
        }
      }
      // ...
    ]
  }
  // ...
};