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

Question

vue & vue-i18n version

ex:

• vue: 3.0.0.0
• vue-i18n: 9.0.0-beta.15

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?

Knockknee

Answer 1

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.

Myrica

Thank you, it helped a lot. I should know that, however, there is still a fog around vue 3 environment. – Knockknee

Answer 2

Vite 4 with @intlify/unplugin-vue-i18n

If you're using Vite 4 with Vue and need on-demand compilation in your production build, the solution is to set runtimeOnly: false in the @intlify/unplugin-vue-i18n plugin options.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueI18n from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  plugins: [
    vue(),
    VueI18n({
      runtimeOnly: false
    })
  ]
})

Until Vite 3 with @intlify/vite-plugin-vue-i18n

If you're using Vite 3 with Vue and need on-demand compilation in your production build, the solution is to set runtimeOnly: false in the @intlify/vite-plugin-vue-i18n plugin options.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      runtimeOnly: false
    })
  ]
})

Ratal

That plugin is now deprecated: instead use "@intlify/unplugin-vue-i18n": import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' and then ` [...]VueI18nPlugin({ runtimeOnly: false })`. – Unguiculate