Configuring web pack for the vue i18n package in a Vue CLI 5 project (vue 3) without the i18n plugin

vue.config.js

const { defineConfig } = require('@vue/cli-service');
const path = require('path');

module.exports = defineConfig({

  chainWebpack: (config) => {

    // Manually configure webpack for vue i18n without using the vue-cli-plugin-i18n as it doesnt fully work in vue 3
    // dont forget to install `vue-i18n@9` and `@intlify/vue-i18n-loader`
    
    // chose a vue-i18n build that does not compile locales on the fly
    config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js');

    // Compiler flags
    config.plugin('vue-i18n-feature-flags').use(
      new webpack.DefinePlugin(
        {
          __VUE_I18N_LEGACY_API__: 'false',
          __VUE_I18N_FULL_INSTALL__: 'false',
          __VUE_I18N_PROD_DEVTOOLS__: 'false'
        }
      )
    );

    // A loader for external local.js files so they can be compiled at build time
    config.module
      .rule('i18n-resource')
      .test(/\.(json5?|ya?ml)$/)
      .type('javascript/auto')
      .use('i18n-resource').loader('@intlify/vue-i18n-loader').end()
      .include.add(path.resolve(__dirname, 'src/locales')).end();

    // A loader for SFC i18n blocks so they can be compiled at build time
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .type('javascript/auto')
      .use('i18n').loader('@intlify/vue-i18n-loader').end();

   
  }
});