javascriptvue.jsvue-clivuejs3vue-i18n

Vue 3 i18n issue: The message format compilation is not supported in this build


vue & vue-i18n version

ex:

Description

I am probably doing something very wrong, however I would really appreciate some direction. I followed documentation from vue-i18n@next. Translation does not work and I get message in console:

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

What can be wrong, its pretty easy?

enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here


Solution

  • Change your vue-i18n import to:

    import { createI18n } from 'vue-i18n/dist/vue-i18n.esm-bundler.js';
    

    Like Vue itself, the i18n package comes with various versions. Like Vue, they have a version with and without a runtime compiler. From the docs:

    vue-i18n.esm-bundler.js: includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings)

    The warning is apparently telling you that you need this compiler. The docs are slightly less clear about this but this is how you need to point the import to the runtime compiler version.