Vue-i18n-loader does not work

There is the problem in the main loader. In the documentation of vue-i18n, translations could be defined in the Single page component(<i18n></i18n>) by the following configs in the rule’s module:

module: {
   rules: [
   {
     test: /\.vue$/,
     loader: 'vue-loader',
     options: {
       loaders: {
         i18n: '@kazupon/vue-i18n-loader'
       }
     }
   },
   // ...
 ]
}

The problem is that we don’t use ‘vue-loader’, we use ‘eslint-loader’ instead in nuxt project. And adding loaders into the config changes nothing. I tried to define new ‘push()’ with ‘vue-loader’, but after that, other loaders works incorrectly. Or maybe Vue-i18n-loader is not adaptive for the SSR, so maybe we need nuxt-i18n-loader. And is there a place to be?

[moifort]

Hello everybody, I have an alternative solution, if you are interested.

Explanation

The problem by adding the webpack configuration like below, is that you overwrite all of vue-loader rules set by Nuxt.

// nuxt.config.js
...
build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.i18n$/,
        loader: `@kazupon/vue-i18n-loader?${JSON.stringify({
          includePaths: [path.resolve(__dirname), 'node_modules']
        })}`
      });
    }
},
...

A simple console.log() on the webpack configuration:

// Find the rules
console.log( config.module.rules.find( el => el.loader === 'vue-loader' ).options.loaders)

// Output
{ 
js: 
   { loader: 'babel-loader',
     options: { babelrc: false, cacheDirectory: true, presets: [Array] } },
  css: 
   [ { loader: 'vue-style-loader', options: [Object] },
     { loader: 'css-loader', options: [Object] } ],
  less: 
   [ { loader: 'vue-style-loader', options: [Object] },
     { loader: 'css-loader', options: [Object] },
     { options: [Object], loader: 'less-loader' } ],
  scss: 
   [ { loader: 'vue-style-loader', options: [Object] },
     { loader: 'css-loader', options: [Object] },
     { options: [Object], loader: 'sass-loader' } ],
  sass: 
   [ { loader: 'vue-style-loader', options: [Object] },
     { loader: 'css-loader', options: [Object] },
     { options: [Object], loader: 'sass-loader' } ],
  stylus: 
   [ { loader: 'vue-style-loader', options: [Object] },
     { loader: 'css-loader', options: [Object] },
     { options: [Object], loader: 'stylus-loader' } ],
  styl: 
   [ { loader: 'vue-style-loader', options: [Object] },
     { loader: 'css-loader', options: [Object] },
     { options: [Object], loader: 'stylus-loader' } ]
}

Solution

The simplest way it’s to add the configuration like below

// nuxt.config.js
...
build: {
    extend(config, ctx) {
      config.module.rules.find( el => el.loader === 'vue-loader' ).options.loaders.i18n = '@kazupon/vue-i18n-loader'
    }
},
...

Full Setup

Install vue-i18n and @kazupon/vue-i18n-loader (in dev).

package.json

"dependencies": {
    "@firebase/app": "^0.1.10",
    "@firebase/database": "^0.2.1",
    "@nuxtjs/axios": "^5.0.0",
    "nuxt": "^1.0.0",
    "vue-i18n": "^7.6.0",
    "vue-moment": "^3.2.0",
    "vuetify": "^0.17.3"
  },
  "devDependencies": {
    "@kazupon/vue-i18n-loader": "^0.3.0",
    "yaml-loader": "^0.4.0",
    "@std/esm": "^0.26.0",
    "cross-env": "^5.0.1",
    "esm": "^3.0.14",
    "firebase-tools": "^3.17.4",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1"
  }

Create i18n.js plugin.

plugins/i18n.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export default ({app, store}) => {
    app.i18n = new VueI18n({
        locale: 'ja',
        fallbackLocale: 'ja',
    });
};

Add plugin to Nuxt nuxt.config.js

   /*
    ** Plugins to load before mounting the App
    */
    plugins: [
        '@/plugins/i18n.js',
    ],

Add <i18n> in component/page/layout template components/MyComponent

<template>
    <div>{{ $t('hello') }}<div/>
</template>
<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

You can see a sample on my repository: https://github.com/moifort/play-with-nuxt

[manniL]

Solution for nuxt 2:

config.module.rules.push({
                resourceQuery: /blockType=i18n/,
                loader: '@kazupon/vue-i18n-loader'
            })