How can I using yaml format in locale files instead of json format?

[mutoe]

I use the yml format instead of the json format in the locale file because it is very simple to write.

// i18n.js
function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[a-z0-9]+\.yml$/i)
  // ...
}

But I got these warnings when I load yml format file

Can you give me some advice? Thanks :)

[yabab-dev]

Hi @mutoe,

You need to add json-loader and yaml-loader to your vue.config.js like this :

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("yaml")
      .test(/\.ya?ml$/)
      .use("json-loader")
      .loader("json-loader")
      .end()
      .use("yaml-loader")
      .loader("yaml-loader");
  },
};

@kazupon It works, but Vue UI crash on boot if I use yaml files:

Error: Cannot find module '.../src/locales/eng.yml.json'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at locales.reduce (.../node_modules/vue-cli-plugin-i18n/ui.js:56:19)
    at Array.reduce (<anonymous>)
    at getLocaleMessages (.../node_modules/vue-cli-plugin-i18n/ui.js:54:18)
    at setupAddon (.../node_modules/vue-cli-plugin-i18n/ui.js:96:22)
    at api.onPluginReload.project (.../node_modules/vue-cli-plugin-i18n/ui.js:117:7)

[mutoe]

@chymz thank you! it is works for me! XD

[janbalaz]

It still doesn't work for me, because I don't know how to combine support for <i18n> tags and .yaml locale files. Please can somehow help?

Support fort tags:

config.module
      .rule("i18n")
      .resourceQuery(/blockType=i18n/)
      .use("i18n")
        .loader("@kazupon/vue-i18n-loader")
        .end();

Support for yaml:

config.module
      .rule("yaml")
      .test(/\.ya?ml$/)
      .use("json-loader")
      .loader("json-loader")
      .end()
      .use("yaml-loader")
      .loader("yaml-loader");

Documentation doesn't show it in a Vue Cli 3 config format and I'm not that experienced to create it myself.

EDIT: Found my answer right after posting this, sorry. Hope this helps someone.

[ArtemKha]

I had this kind of error: Cannot find module 'yml-loader!@/locales/en.yml' from 'i18n.js' "Support for yaml" helped.

config.module
      .rule("yaml")
      .test(/\.ya?ml$/)
      .use("json-loader")
      .loader("json-loader")
      .end()
      .use("yaml-loader")
      .loader("yaml-loader");

I also replaced it with '@/locales/en.yml' from 'i18n.js'