How to Dynamically Reference Translation Keys in vue-i18n

[supemeko]

How to Dynamically Reference Translation Keys in vue-i18n

I'm having trouble with vue-i18n when using the @:{key} syntax for dynamic translation key references. Here's the issue:

Issue

My translation dictionary is:

{
  "HealthAlarm": "The Health Alarm '@:{reason}' '{name}'",
  "breeding_wound": "Breeding Wound"
}

When calling $t('HealthAlarm', { reason: 'breeding_wound', name: 'Cow#01' }), I expect:

The Health Alarm 'Breeding Wound' 'Cow#01'

But the actual output is:

The Health Alarm '@:breeding_wound' 'Cow#01'

I want to know the best approach for this.

Current Workaround

I'm using a dictionary structure like:

{
  "HealthAlarm.breeding_wound": "The Health Alarm '@:dict.breeding_wound' '{name}'",
  "HealthAlarm.suspected_mastitis": "The Health Alarm '@:dict.suspected_mastitis' '{name}'",
  "dict.breeding_wound": "Breeding Wound",
  "dict.suspected_mastitis": "Suspected Mastitis"
}

or:

{
  "HealthAlarm.breeding_wound": "The Health Alarm 'Breeding Wound' '{name}'",
  "HealthAlarm.suspected_mastitis": "The Health Alarm 'Suspected Mastitis' '{name}'",
}

This approach is not elegant enough
Note.1: I don’t assume that only 'reason' needs to be translated twice. The key requiring double translation could be another key, or there could be multiple keys.
Note.2: I don't expect to use a dedicated key to indicate that it will be translated twice, example '{'twice': { 'reason': 'breeding_wound' } }', Although doing so seems better than the existing solutions

Question

What is the best practice for handling dynamic translation key references in vue-i18n when the backend provides a dictionary name and JSON data? Specifically:

• How can I structure the vue-i18n dictionary to avoid hardcoding keys like HealthAlarm.breeding_wound for better scalability?
• What is the most efficient way to map backend-provided dictionary names and JSON to vue-i18n translations?

Please provide code examples or recommendations for optimizing.

[vofronte]

Hey @supemeko! The @: syntax can be a bit tricky.

The problem is that @:{reason} is for linking to another key directly, it doesn't dynamically use the variables you pass in. It's looking for a key literally named "reason".

Here are two better ways to handle this.

1. The Easy Way: Nested $t

This is the most common and straightforward solution. Just call $t inside another $t.

Your JSON:

{
  "HealthAlarm": "The Health Alarm '{reason}' '{name}'",
  "breeding_wound": "Breeding Wound"
}

Your Template:

<p>{{ $t('HealthAlarm', { reason: $t('breeding_wound'), name: 'Cow#01' }) }}</p>

The inner $t('breeding_wound') resolves first, and its result gets passed into the HealthAlarm message. Simple and clean.

This follows the standard interpolation syntax, which you can read about in the Message Format Syntax docs.

2. The Powerful Way: Message Functions

For more complex logic, you can use a function for your message. This is super flexible.

Your messages (in a .js file):

{
  HealthAlarm: ({ linked, named }) => `The Health Alarm '${linked(named('reason'))}' '${named('name')}'`,
  breeding_wound: "Breeding Wound"
}

The template call stays the same. The function gets a context object that you can destructure to get helpers like linked and named. This is the officially documented way to handle this.

You can read more in the Messages Functions doc.

---

So, to answer your questions directly:

1. How to structure the dictionary? -> Keep your keys simple and separate (e.g., HealthAlarm, breeding_wound). Don't create combined keys like HealthAlarm.breeding_wound. Let functions or nested calls handle the dynamic parts.
2. Most efficient way? -> The nested $t is perfect for this. It's clean, easy to read, and gets the job done without extra complexity.

Hope this helps you out!