Components
<i18n-t>
The <i18n-t> component renders one translation, with plural forms, number and date formatting, HTML and slot interpolation.
<i18n-t> renders one translation into an element. Use it when a translation needs components inside it (a link in a sentence), a plural form, or a formatted number or date. It resolves the key for the current route, like $t.
Props
keypath
string required
Translation key to render.
plural
number | string | null
Count selecting the plural form. Set it to use
$tc instead of $t. null means unset.tag
string
Default
'span' · Element to render.params
Record<string, string | number | boolean>
Interpolation values substituted into the translation.
defaultValue
string
Default
'' · Rendered instead of the component when hideIfEmpty suppresses an empty translation.html
boolean
Default
false · Render the translation as HTML rather than text. Only for translations you control: params are escaped, the translation is not.hideIfEmpty
boolean
Default
false · Render nothing when the translation resolves to an empty string.customPluralRule
PluralFunc
Default
null · Plural rule for this element only, overriding the configured one. Its answer is used as is; null renders empty.number
number | string | null
Formats the value with
$tn and passes it to the translation as {number}, alongside params.date
Date | string | number | null
Formats the value with
$td and passes it to the translation as {date}, alongside params.relativeDate
Date | string | number | null
Formats the value with
$tdr and passes it to the translation as {relativeDate}, alongside params.Rendering rules
The first matching case decides the output:
number— the translation with{ ...params, number: $tn(number) }.date— the translation with{ ...params, date: $td(date) }.relativeDate— the translation with{ ...params, relativeDate: $tdr(relativeDate) }.plural— the form$tcpicks, the=0marker included, with{ ...params, count }; orcustomPluralRule(keypath, count, params, locale, t)when set, which reads the raw value, marker included, and whose answer is used as is,nullbeing empty.- Otherwise the translation with
params.
null counts as not set. In every case:
defaultValuestands in for a missing key, in every branch.hideIfEmptyrendersdefaultValueinstead of a blank result.htmlrenders the result as HTML.paramsare escaped, the translation is not; slots are ignored.- A
defaultslot receives{ translation }, and named slots are ignored. - Otherwise each named slot replaces every
{name}placeholder, before a param of that name. A param value that looks like a placeholder stays text.
date and relativeDate output carries data-allow-mismatch="text", because the server's time zone and clock are not the browser's. Set timeZone to render one calendar date in both; relativeDate depends on the clock, so it can still differ.
Example
{
"terms": "I accept the {link}.",
"termsLink": "terms of use",
"items": "no items | one item | {count} items"
}
<template>
<i18n-t keypath="terms" tag="p">
<template #link>
<NuxtLink :to="$localePath('/terms')">{{ $t('termsLink') }}</NuxtLink>
</template>
</i18n-t>
<i18n-t keypath="items" :plural="cart.length" />
</template>
html sets innerHTML: use it only for translations you control. params are escaped, so user data is safe there, and so is a key that found no translation.