How can I add punctuation directly after vue-i18n linked keys without errors?

This behavior is a limitation of the way linked messages are parsed in vue-i18n. The parser expects a delimiter (usually whitespace) after the @: directive to know where the key ends. When you immediately follow it with punctuation or other characters, the parser mistakenly includes those extra characters in the key, resulting in an error.

Unfortunately, the current syntax does not support adding punctuation (or other characters) directly to the linked key using delimiters like parentheses. Here are a couple of workarounds:

1. Use Interpolation Instead

Instead of relying on linked keys for adding extra characters, you can leverage interpolation. For example, rewrite your messages with placeholders and then pass in the linked value as a parameter:

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

Then, when retrieving the translation, do:

JAVASCRIPTCopied
$t('subtitle', { name: $t('name') })

This approach gives you the flexibility to include punctuation without worrying about the parser misinterpreting the key.

2. Insert a Zero-Width Space (Advanced)

Some developers have experimented with inserting a zero-width space (​) immediately after the linked expression so that it doesn't show in the rendered text yet allows the parser to correctly identify the key. For example:

JAVASCRIPTCopied
"title": "Hello @:name​!",

However, this approach is less readable and might have unintended side effects. It’s generally better to go with interpolation as shown above.

---

In summary, the recommended solution is to refactor your messages to use interpolation so you can safely add punctuation or other characters. This avoids the limitations of the linked messages syntax in vue-i18n.