How to use vue-i18n-loader with vue-loader 15? about vue-i18n-loader

[Lanfei]

You can add following rule in your webpack.conf.js:

{
  module: {
    rules: [
      {
        resourceQuery: /\bblockType=i18n\b/,
        loader: '@kazupon/vue-i18n-loader'
      }
      //, Other rules
    ]
  }
}

[smares]

Follow-up: It works if I rename the files to *.loca. Any idea how to make it work with *.json?

[smares]

Any idea how to then make it work with Webpack 4 which throws Module parse failed: Unexpected token i in JSON at position 0? With vue-loader 14, the hint from #13 helped, but using your snippet from above no longers does the trick.

[Lanfei]

I am using Webpack 4.6.0 without json-loader, and it works fine for me.

[smares]

Are you using it with JSON files? As in <i18n src="locale.en.json"/>?

[smares]

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

This works. 👍

[Lanfei]

No, I was using i18n custom block like this, not with JSON files:

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

The documentation of vue-loader suggests to use resourceQuery: /blockType=i18n/. Why do you use resourceQuery: /\bblockType=i18n\b/? I.e. what does the \b do?

@mekeor It's an regexp-metacharacter called word boundary.

I still couldn't get vue@2, vue-loader@15, vue-i18n, vue-i18n-loader and webpack@4 work together in single-file-components. I created a very minimal bare-bones repository here: https://github.com/mekeor/webpack4-vue2-vueLoader15-vueI18n-vueI18nLoader-singleFileComponent

I'm gettings this error:

@Lanfei Would you mind telling me what I'm doing wrong? You seem to have working exactly what I'm trying to achieve.

[smares]

You ask about the blockType rule that parses the i18n blocks but then your Webpack configuration doesn't even include it and instead you are telling Webpack to pass .i18n files to vue-i18n-loader.

Also, the loader is @kazupon/vue-i18n-loader

[Edza]

The workaround has a heavy performance impact on compilation. I also can not exclude node_modules folder (vue-loader complains it can not find it's own folder for some reason).

Please make fixing this a priority, I'll see if I can contribute. Can't we use the generic i18n-loader and take the working parts and insert into vue?

[Lanfei]

@mekeor Sorry that I was on a trip in the past week, have you solved your problem?

Yes, I solved my problem (– by moving away from vue-i18n, sorry –) but thank you :)

[Edza]

@mekeor Where did you move? Just using the regular webpack i18n loader? I'm using the workaround and it works fine more or less.

My project is tiny, so I just wrote my own few lines of code for that little internationalization I need. 🤷‍♀️

[Edza]

Ah well, I work with many other programmers on the vue components, so we really need this thing to work. But yeah, the workarond is ok, the performance impact is not bad if you set json-loader to use only your .json files in your specific i18n .json file folder.