string interpolations in i18n do not work in compiled mode

[robert-hoffmann]

What happened?

Plugin:
internationalization (the plugin proposed by quasar when initializing a new project)

This plugin allows you to use string interpolation to output text as follows:

i18n/en/index.ts

export default {
  messages: {
    greeting: 'Hello {0}'
  }
};

i18n/fr/index.ts

export default {
  messages: {
    greeting: 'Bonjour {0}'
  }
};

Which you can then call as per the docs here
https://kazupon.github.io/vue-i18n/guide/formatting.html#list-formatting

Like this:
{{ $t('messages.greeting', ['Dave']) }}

When running in dev (HMR) mode, everything works fine
However once you build the project, the string replacements don't work anymore

It does actually switch between the languages, but the interpolation is broken in the final compiled version

Current result:
Hello {0} & Bonjour {0}

Expected result:
Hello Dave & Bonjour Dave

What did you expect to happen?

Expected for this to work the same in build mode as in dev mode.

Submitting here, as this might be related to something in the way quasar builds the output, maybe a reference missing...

I did get a message on build saying that i18n had a unmet dependency with vite@2.0.0, but adding it to the dev dependencies just made the error message go away, but not the actual problem

Reproduction URL

https://stackblitz.com/edit/quasarframework-webncp

How to reproduce?

1. Create a test project
2. Try internationalization in HMR (dev) mode
3. Then try with the compiled (build) mode

Could not set up a stackblitz example because

1. path does not work in quasar.config.js (some node problems
2. some problems with the stackblitz version finding some paths

I pasted everything as it was setup via the quasar command line locally, but just wont work

The problem is you cannot create a quasar project via the command line in stackblitz apparently, just able to use the forked version

My version was configured automatically locally via the yarn create quasar wizard

Flavour

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

Areas

Plugins (quasar)

Platforms/Browsers

Other

Quasar info output

Operating System - Windows_NT(10.0.22621) - win32/x64
NodeJs - 16.14.0

Global packages
  NPM - 8.3.1
Quasar App Extensions
  *None installed*

Networking
  Host - FRML0141
  Ethernet (pc) - 10.13.3.234
  Wi-Fi - 192.168.12.58
  vEthernet (Default Switch) - 172.22.48.1
  vEthernet (WSL) - 172.31.208.1

Relevant log output

No response

Additional context

does not work on stackblitz, as path does not work in quasar.config.js

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

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

This also is broken on stackblitz.
This code is what was generated by the quasar wizard in boot/i18n.ts

import messages from 'src/i18n';

[github-actions]

Hi @robert-hoffmann! 👋

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

[robert-hoffmann]

bump

[robert-hoffmann]

Ok, since there seems to be no reply, i switched my project to i18next

I followed some steps from this article, and everything works fine, including string interpolations, and even translations working while in dev mode

https://dev.to/adrai/how-to-properly-internationalize-a-vue-application-using-i18next-1doj