Apply a css style to an interpolation parameterusing vue-i18n-CodePudding

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 >{{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:

instead of path (with path dasn't works)

CodePudding user response：

You can try with Component interpolation - Slots syntax usage, something like:

<i18n path="hello_message" tag="p">
  <template v-slot:name>
    <span >{{ name }}</span>
  </template>
</i18n>

CodePudding user response：

Finally I solved in this way.

<i18n-t keypath="home.hello_message" tag="h2">
   <template v-slot:name>
      <span >{{ name }}</span>
   </template>
</i18n-t>

slots-syntax-usage for Vue3