I'm using vue-i18n in order to add the internalization support to my application. I'm not able to understand if it's possible to apply a style to a specific interpolation parameter. E.g. Suppose that I have this title:
Hello Bob, welcome back!
and as html code I have:
<h1>Hello <span class="name_lbl">{{name}}</span>, welcome back!</h1>
Using vue-i18n with the interpolation this becom something like this:
<h1>{{ $t("hello_message", { name: "Bob" }) }}</h1>
The question is: How can I apply a style on the interpolation parameter in order to have, for example, the name in bold?
**** EDIT ****
Using the suggestion by Nikola I updated my code in this way:
<i18n v-t="'home.hello_message'" tag="h2">
<template v-slot:name>
<span id="myClass">{{ name }}</span>
</template>
</i18n>
and my messages like:
{
"home": {
"hello_message": "Hello {name}, welcome back!",
}
}
The result is that I'm able to see the text "Hello , welcome back!" without the filled parameter {name}.
If I try to print into a different tag the value of {{name}} I'm able to see it correctly.
Please note also that, I'm using:
<i18n v-t="'home.hello_message'" tag="h2">
instead of path (with path dasn't works)
Finally I solved in this way.
<i18n-t keypath="home.hello_message" tag="h2">
<template v-slot:name>
<span class="myClass">{{ name }}</span>
</template>
</i18n-t>