Nuxt2にバージョン上げたら@kazupon/vue-i18n-loaderが動かなくなった

開発関連

2019.05.02

Nuxt2にバージョンあげたらi18nタグが認識しなくなってしまった時の対処法方をまとめます。

nuxt.config.js

moduleの定義は意味ないので削除。

  module: {
    rules: [
//      {
//        test: /\.vue$/,
//        loader: 'vue-loader',
//        options: {
//          extractCSS: true,
//          preLoaders: {
//            i18n: 'yaml-loader'
//          },
//          loaders: {
//            js: 'babel-loader',
//            file: 'file-loader',
//            scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
//            sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax',
//            i18n: '@kazupon/vue-i18n-loader'
//          }
//        }
//      },

とか

//      {
//        resourceQuery: /blockType=i18n/,
//        type: 'javascript/auto',
//        loader: '@kazupon/vue-i18n-loader'
//      }

extendの書き方が変わったので変更

extend (config) {

// 削除
//      const vueLoader = config.module.rules.find((r) =< {
//        return r.loader === 'vue-loader'
//      })
//      vueLoader.options.preLoaders = vueLoader.options.preLoaders || {}
//      vueLoader.options.preLoaders.i18n = 'yaml-loader'
//      vueLoader.options.loaders.i18n = '@kazupon/vue-i18n-loader'

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

jsonじゃなくてyamlを使いたい場合は「loader: [‘@kazupon/vue-i18n-loader’, ‘yaml-loader’]」にする