CODEWITHSUNDEEP
javascriptvue.jsvue-clivuejs3vue-i18n
user1263663
user1263663

Reputation: 85

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

Upvotes: 5

Views: 10797

Answers (2)

Shiva127
Shiva127

Reputation: 2623

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
    })
  ]
})

Upvotes: 6

Dan
Dan

Reputation: 63099

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.

Upvotes: 2

Related Questions