Apply a css style to an interpolation parameterusing vue-i18n

Question

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:

instead of path (with path dasn't works)

Safari · Accepted Answer · 2022-09-17 09:38:24Z

3

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>

slots-syntax-usage for Vue3

answered Sep 17, 2022 at 9:38

Safari

12k24 gold badges99 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2024-11-12 13:09:11Z

3

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

<i18n-t keypath="hello_message" tag="p">
  <template v-slot:name>
    <span class="name_lbl">{{ name }}</span>
  </template>
</i18n-t>

edited Nov 12, 2024 at 13:09

CommunityBot

11 silver badge

answered Sep 16, 2022 at 20:18

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Collectives™ on Stack Overflow

Apply a css style to an interpolation parameterusing vue-i18n

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related