$t and $ta instance methods

Note

The $t and $ta function names can be customized via the globals.functions option in createFluentVue to avoid naming conflicts. See Installation for details.

$t method

Formats message with key identifier. args is used to resolve references to variables passed as arguments to the translation.

• Arguments

  • {string} key: required
  • {object} args: optional

• Returns: {string}

Template:

<p>{{ $t('greeting', { name: 'World' }) }}</p>

Message:

greeting = Hello, {$name}

Result:

<p>Hello, World</p>

$ta method

Formats message with key identifier, but only returns message attributes. args is used to resolve references to variables passed as arguments to the translation.

Note

This method should be used mostly for passing parameters to custom components. For localization of regular html elements v-t directive is more convenient.

• Arguments

  • {string} key: required
  • {object} args: optional

• Returns: {object}

Template:

<input v-bind="$ta('login-input')" type="email">

Message:

login-input =
    .placeholder = email@example.com
    .aria-label = Login input value
    .title = Type your login email

Result:

<input placeholder="email@example.com" aria-label="Login input value" title="Type your login email" type="email">