Linking inside a i18n message (vue3)

Question

I am using Vue3 with vue-i18n to translate the page to several languages.

let's say I have the following setup :

messages: {
  "en": {
    "title": "Hello @:name",
    "subtitle": "How are you @:name?",
    "name": "Roger",
  },
  "nl": {
    "title": "Hello @:name",
    "subtitle": "How are you @:name?",
    "name": "Roger",
  }
}

The linking inside the messages that I am doing, works according to the documentation when we leave a space after the link. Otherwise we get an error, because i18n thinks the character after the link is a part of the link.

I have tried working with brakets, but nothing seems to work. And I really don't like the way it looks with a whitespace after the name.

Any help will be appreciated.

I tried placing brakets :

"How are you (@:name)?" "How are you @:(name)?"

But this doesn't work.

Answer 1

A workaround used in the documentation is to add space:

"subtitle": "How are you @:name ?"

These are braces and not parentheses that are used in vue-i18n message syntax. It could be assumed they can be used as delimiters for tokens that contain whitespace, which are common. This is not documented but can be seen in tests, so it would be:

"subtitle": "How are you @:{'name'}?"