pre-compilation of messages

Module versions

@intlify/vue-i18n-loader: ^4.0.0 @vue/cli-plugin-babel: ^5.0.0-rc.0 @vue/cli-service: ^5.0.0-rc.0 vue-cli-plugin-i18n: ~2.3.1 vue-i18n: ^9.1.9

Config

vue.config.js:

module.exports = {
    pluginOptions: {
        i18n: {
            locale: "de",
            fallbackLocale: "en",
            localeDir: "locales",
            enableLegacy: false,
            runtimeOnly: true,
            compositionOnly: false,
            fullInstall: true,
        },
    },

    chainWebpack: (config) => {
        config.module
            .rule("i18n")
            .resourceQuery(/blockType=i18n/)
            .type("javascript/auto")
            .use("i18n")
            .loader("@intlify/vue-i18n-loader")
            .end();
    },
};

i18n.ts:

import { createI18n } from 'vue-i18n';
import locales from './locales';

export default createI18n({
    legacy: true,
    locale: 'en',
    fallbackLocale: 'en',
    sharedMessages: locales,
});

Description

So I’ve ran into Content-Security setting problems and noticed, that I have to set runtimeOnly to true. But now I’m getting many errors like this:

[intlify] The message format compilation is not supported in this build. Because message compiler isn't included. You need to pre-compilation all message format. So translate function return 'my-string'.

I’ve searched for this issue and found out, that I have to set an alias for webpack. But I thought I dont need to do that, because I am using the vue cli plugin. Additionally according to https://vue-i18n-next.intlify.dev/installation.html#with-a-bundler @intlify/vue-i18n-loader already precompiles the messages. So how to solve this?

[kazupon]

Thank you for your feedback! I’ll add the sharedMessages to docs later! Happy coding! 😃

[Zauberbutter]

So I’m using <i18n> blocks too, so i thought I need to use sharedMessages. I think the use case for sharedMessages should be better explained in the docs.

Now that I’m using the loadLocaleMessages function together with JSON files in /locales it’s working. But I’m getting an warning for each key that isn’t in local scope. Just like in https://github.com/intlify/vue-cli-plugin-i18n/issues/191 But it is working nevertheless.