Interpolations in production mode does not work

[gewisser]

What happened?

see issue: intlify/vue-i18n-next#1059

What did you expect to happen?

see issue: intlify/vue-i18n-next#1059

Reproduction URL

none

How to reproduce?

see issue: intlify/vue-i18n-next#1059

Flavour

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

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

Solution:

      vitePlugins: [
        [
          "@intlify/vite-plugin-vue-i18n",
          {
            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
            // compositionOnly: false,

            runtimeOnly: ctx.dev,
            // you need to set i18n resource including paths !
            include: path.resolve(__dirname, "./src/i18n/**"),
          },
        ],
      ],

[github-actions[bot]]

Hi @gewisser! 👋

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. 👏

[Saeid-Za]

Hello There! I think as you mentioned in this issue, this problem is related to @intlify/vite-plugin-vue-i18n and not quasar, am I wrong on this? or is this related to quasar itself ?

[gewisser]

It's hard to tell which side the problem is. It is possible that the default config (quasar.config.js) should have the option: runtimeOnly: true for dev development and runtimeOnly: false for production. But I don't understand why this is implemented as an option in the @intlify/vite-plugin-vue-i18n project. It was possible to prod / dev this detect in the plugin?

[tofi86]

We had the same issue and I can confirm that @gewisser's solution with runtimeOnly: ctx.dev works. This should be part of the quasar template IMHO.

[kovacevjosip]

If you are using vite setup, interpolation does not work correctly on production mode. If you have defined plural values (example: note: Note | Notes) it will actually show both values when project is built. Webpack setup works correctly.

Add runtimeOnly: ctx.dev to quasar.config.js to fix vite setup issue,

Current versions:

• @quasar/cli: v1.3.2
• @quasar/app-vite: v1.1.3
• @quasar/app-webpack: v3.6.2

[IlCallo]

As stated into https://github.com/intlify/vue-i18n-next/issues/1059#issuecomment-1383689675, the proposed solution should work but won't be feasible for CSP compliant projects

We'll get in touch with vue-i18n maintainer about this, thanks for reporting

[13uraksahin]

Any updates?

[IlCallo]

We didn't get an answer from vue-i18n maintainer, I'd suggest to open a new issue on that project repository and link both that closed issue and this one, as this isn't actionable on our side