pre-compilation of messages

[Zauberbutter]

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 reporting!

I tried to reproduce using vue-cli, so, unfortunately, I could not this issue. :disappointed:

From your reporting, it looks like you are using the config chainWebpack to configure it. As mentioned in the readme, vue-cli-plugin-i18n is a plugin for vue-cli. This plugin, @intlify/vue-i18n-loader, is built-in and configured as well.

Could you give a minimal reproducing GitHub repo that reproduces in your environment, please?

[Zauberbutter]

Thank you for your answer!

I reproduced this here → https://github.com/Zauberbutter/vue-i18n-test

I think it could be, that I'm using sharedMessages with just a typescript file, which doesn't get compiled.

[kazupon]

Thank you for your quick reply and giving repo! I'll try to reproduce it!

I think it could be, that I'm using sharedMessages with just a typescript file, which doesn't get compiled.

Yes! You need to use messages options at createI18n function

• Get Started: https://vue-i18n.intlify.dev/guide/
• API ref: https://vue-i18n.intlify.dev/api/composition.html#messages

[Zauberbutter]

Ok! And what is sharedMessages for?

[kazupon]

You can see the docs https://kazupon.github.io/vue-i18n/guide/component.html#shared-locale-messages-for-components

sharedMessages is useful if you are handling messages on a per-component (i.e. local) basis, rather than globally.

[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.

[kazupon]

Thank you for your feedback! I'll add the sharedMessages to docs later! Happy coding! :)