v-t directive

Combines $t and $ta methods binding message and its attributes to innerText and html attributes of a html element.

Note

By default only localizable html attributes are bound (aria-label, title, alt, etc). Directive modifiers allow specifying additional attributes to bind.

Usage: v-t:key="values".

  • Argument:
    • key {string}: required
  • Value:
    • values {object}: optional
  • Modifiers:
    • {string}: optional

Template:

<a v-t:link="{ userName }" href="/login"></a>
1

Message:

link = Hello, {$userName}!
    .aria-label = Welcome message for {$userName}
1
2

Result:

<a href="/login" aria-label="Welcome message for ⁨Jonh Doe⁩">Hello, ⁨Jonh Doe⁩</a>
1