🌍 <i18n-t> Component

The <i18n-t> component in Nuxt I18n Micro is a flexible translation component that supports dynamic content insertion via slots. It allows you to interpolate translations with custom Vue components or HTML content, enabling advanced localization scenarios.

⚙️ Props

Prop	Type	Default	Description
keypath *	string	—	Translation key to render.
plural	number | string	—	Count selecting the plural form. Set it to use $tc instead of $t.
tag	string	'span'	Element to render.
params	Record<string, string | number | boolean>	() => ({})	Interpolation values substituted into the translation.
defaultValue	string	''	Rendered instead of the component when hideIfEmpty suppresses an empty translation.
html	boolean	false	Render the translation as HTML rather than text. Only for content you control.
hideIfEmpty	boolean	false	Render nothing when the translation resolves to an empty string.
customPluralRule	PluralFunc	null	Plural rule for this element only, overriding the configured one.
number	number | string	—	Formats the value with $tn and passes it to the translation as {number}.
date	Date | string | number	—	Formats the value with $td and passes it to the translation as {date}.
relativeDate	Date | string | number	—	Formats the value with $tdr and passes it to the translation as {relativeDate}.

* required.

Only one of plural, number, date and relativeDate applies at a time; when several are set, the first in that list wins.

Examples per prop

<!-- keypath: the translation to render -->
<i18n-t keypath="feedback.text" />

<!-- plural: selects the plural form -->
<i18n-t keypath="items" :plural="10" />

<!-- params: interpolated into the translation -->
<i18n-t keypath="greeting" :params="{ name: 'Ada' }" />

<!-- tag: the element to render -->
<i18n-t keypath="feedback.text" tag="p" />

<!-- number / date / relativeDate: formatted, then interpolated -->
<i18n-t keypath="cart.total" :number="1234.5" />
<i18n-t keypath="post.published" :date="post.createdAt" />
<i18n-t keypath="post.ago" :relative-date="post.createdAt" />

<!-- hideIfEmpty with a fallback -->
<i18n-t keypath="promo.banner" hide-if-empty default-value="Nothing to show" />

{
  "items": "Nothing|You have {count} item|You have {count} items"
}

🛠️ Example Usages

Basic Usage

<i18n-t keypath="feedback.text" />

This renders the translation for feedback.text within a <span> tag.

Using Slots for Dynamic Content

The <i18n-t> component supports the use of slots to dynamically insert Vue components or other content into specific parts of the translation.

<i18n-t keypath="feedback.text">
  <template #link>
    <nuxt-link :to="{ name: 'index' }">
      <i18n-t keypath="feedback.link" />
    </nuxt-link>
  </template>
</i18n-t>

In this example, the {link} placeholder in the feedback.text translation string is replaced by the <nuxt-link> component, which itself contains another translation component.

Pluralization

<i18n-t keypath="items.count" :plural="itemCount" />

This automatically applies pluralization rules based on the itemCount value.

🚀 Additional Features

Default Slot

If no specific slot is provided, the translation can be customized via the default slot, which provides the entire translated string:

<i18n-t keypath="welcome.message">
  <template #default="{ translation }">
    {{ translation.replace('Nuxt', 'Vue') }}
  </template>
</i18n-t>

Conditional Rendering

Render nothing if the translation string is empty by using the hideIfEmpty prop.

<i18n-t keypath="optionalMessage" :hideIfEmpty="true"></i18n-t>

Custom Pluralization Rule

Use a custom function to handle pluralization.

<i18n-t
  keypath="items"
  :plural="itemCount"
  :customPluralRule="
    (key, count, params, locale, t) => {
      const raw = t(key, params)
      if (!raw) return null
      return count === 1 ? 'One item' : `${count} items`
    }
  "
/>

Advanced Example with Slots

Utilize slots to customize how the translation content is rendered.

<i18n-t keypath="welcomeMessage">
  <template #default="{ translation }">
    <strong>{{ translation }}</strong>
  </template>
</i18n-t>