vue-i18n not substituting tokens in production build - vuejs2

Question

We have a Quasar 2 based project that makes use of vue-i18n for localising of strings, but are running into an issue whereby strings with replacement tokens aren't getting handled properly in our dev host and production deployments.
In our language file:
export default {
'label.deleteUserConfirm': 'Saisissez le {personId} pour confirmer la suppression'
}
In our Vue file, in the template section:
<template>
<div>
{{ $t('label.deleteUserConfirm', { personId: '12345' }) }}
</div>
</template>
When running in localhost the displayed text is:
Saisissez le 12345 pour confirmer la suppression
In our deployments
Saisissez le {personId} pour confirmer la suppression
Based on docs for #intlify/vite-plugin-vue-i18n we did try specifying compositionOnly: false in the quasar.conf.js, but that doesn't seem to have made a difference.
We are building our project with Vite. Looking in the dist/spa folder we don't see any evidence of corruption of the strings, as they appear in the js, in the assets folder.
The results of quasar build show this issue, while the dev version run by quasar dev don't. This is an SPA target.
Environment info:
vue-i18n 9.2.2
vite 2.9.15
#intlify/vite-plugin-vue-i18n 6.0.3
quasar 2.10.1
node 16.10.0
Update: I just tried creating a Quasar project from scratch using yarn create quasar and it shows the same issues. Trying this with new vue + vue-i18n project, using vite, only shows the issue once I use #intlify/unplugin-vue-i18n/vite, suggesting the issue is related to that.

Answer 1

If you are using Vue2 use this library Vue-i18n for Vue2
If you are using vue3 use this one Vue-i18n for Vue3.
It will work fine with these packages
These packages supported by nuxt and vue community so it will best solution

Answer 2

Turns out we need to provide the runtimeOnly: false option, to #intlify/vite-plugin-vue-i18n, to deal with this issue.
The documentation does cover this, but it isn't clear until you run into this problem:
Also, if you do a production build with vite, Vue I18n will automatically bundle the runtime only module. If you need on-demand compilation with Message compiler, you need to set the runtimeOnly option to false.
If I understand rightly, then without this option the messages are optimised at compile time and can't benefit from the token substitutions.
So, if you are using Quasar, in the quasar.conf.js
vitePlugins: [
['#intlify/vite-plugin-vue-i18n', {
// if you want to use Vue I18n Legacy API, you
// need to set `compositionOnly: false`
// compositionOnly: false,
runtimeOnly: false,
// you need to set i18n resource including paths !
include: path.resolve(__dirname, './src/i18n/**')
}]
],
If you are using pure Vue3, with Vite, then in the vite.config.ts file:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import VueI18nPlugin from '#intlify/unplugin-vue-i18n/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
VueI18nPlugin({
runtimeOnly: false
})
],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
})