Update the quasar.conf.js for Vite & vue-i18n, for name interpolation

[ajmas]

What happened?

If we are using parameterised vue-i18n based messages, with Quasar and Vite, then a built project will not substitute the tokens.

For example the following string, will be outputted as such , instead of the {planet} token being replaced with the correct value.

'Hello {planet}'

For the discussion, see: #15365

What did you expect to happen?

The value should have substituted. So if planet is defined to be 'Mars':

'Hello Mars'

Reproduction URL

https://github.com/ajmas/quasar-vue-i18n-vite

How to reproduce?

Create new project:

$ yarn global add @quasar/cli
$ yarn create quasar

Edit src/i18n/en-US/index.ts, adding:

greeting: 'Hello {planet}'

update src/pages/IndexPage.vue:

<template>
  <q-page class="row items-center justify-evenly">
    {{ $t('sayHello', { name: 'Albert' }) }}
  </q-page>
</template>

Now run:

In dev mode (quasar dev) we get:

'Hello Mars'

in distributable mode (quasar build) :

'Hello {planet}'

Then try distributable mode (quasar build) again with the suggested runtimeOnly: false config indicated below.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Project Creation (create-quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

Impacts all browsers, due to the way the @intlify/vite-plugin-vue-i18n optimises strings when runtimeOnly: true. This is not obvious and my recommendation is to updated the template block to be:

vitePlugins: [
  ['@intlify/vite-plugin-vue-i18n', {
    // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
    // compositionOnly: false,
    // if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}', 
    // you need to set `runtimeOnly: false`
    // runtimeOnly: false,
    // you need to set i18n resource including paths !
    include: path.resolve(__dirname, './src/i18n/**')
  }]
],

BTW more on this here: intlify/bundle-tools#216

[github-actions]

Hi @ajmas! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏