v-t directive

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

Note

The directive name can be customized via the globals.directive option in createFluentVue to avoid naming conflicts. See Installation for details.

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>

Message:

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

Result:

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