Missing key: variable substitution (using slots) breks

[MartinRamm]

Module versions (please complete the following information):

• vue: 2.6.12
• vue-i18n: 8.24.4

Reproduction Link https://codesandbox.io/embed/optimistic-fast-rzgrd?&theme=dark If you add a translation (line 11 in main.js), it works as expected.

To Reproduce

• Use a translation key that already has a variable in it (e.g.: Hello, {world}!) with a slot:

  <i18n path="Hello, {world}!" tag="p">
  <template v-slot:world>
    <b>World</b>
  </template>
  </i18n>

• Do not add a translation for it
• Ensure that you have a "missing" function in the i18n config that returns the key as a value

  const i18n = new VueI18n({
  //....
  missing: (locale, key) => key,
  });

Expected behavior The variable {world} is replaced with <b>World</b> in the HTML rendered output, as if messages (in the vue-i18n config) was set to:

const i18n = new VueI18n({
  //...
  locale: "en",
  messages: { en: { "Hello, {world}!": "Hello, {world}!" } }
});

Actual behavior The variable is not replaced. The output shows the raw key: Hello, {world}! If I add a translation for the missing key (as shown above), it works.

[kazupon]

Thank you for your reporting!

sorry, I could not understand what issue your registered. I think this behavior is correct…

Could you give us a more detailed explanation of what the issue is, please? 🙏

[MartinRamm]

Sure, @kazupon.

Let me give you some context to the problem: generally, there are two ways to work with key-based translation systems:

1. Either, as shown in the documentation, you give every translation a description (e.g. home.welcome_message). This description becomes the key, which gets mapped to the actual translation (e.g. Hello, World!) via your app.
2. Alternatively, you choose one language in the code base and don't differentiate between the actual translation and the key. So when you want to display Hello, World!, you write in your code $t('Hello, World!').

This bug report is about the second approach. There are multiple pro and cons for each approach, I won't go into them too much, but in the second approach, you trade context (knowing where the text will be displayed exactly) with knowledge about the intended size of the text, the variables available, ease of development (you see what the end-user sees, can search the code for text the end-user sees), etc.

Probably I should have abstracted the bug-report more. Let me try again:

To Reproduce

• If you use a translation key as shown below that is not included in the json file of the chosen locale

  <i18n path="welcome_message" tag="p">
  <template v-slot:world>
    <b>World</b>
  </template>
  </i18n>

• And, in the config of the "missing" function in the i18n config, you return Hello, {world}!

  const i18n = new VueI18n({
  //....
  missing: (locale, key) => 'Hello, {world}!',
  });

Expected behavior The variable {world} is replaced with World in the HTML rendered output.

Actual behavior The variable is not replaced. The HTML output shows Hello, {world}!