Components

<i18n-group>

The <i18n-group> component gives its slot a t function scoped to a key prefix.

<i18n-group> scopes a block of markup to one key prefix. Use it when many keys of a section share a prefix and you do not want to repeat it. The default slot receives a t that prepends the prefix.

Props and slot

prefix
string required
Key prefix every lookup inside the slot is resolved against.
groupClass
string
Default'' · Extra class on the wrapper element.

Slots

default
Receives prefix and a t function scoped to it.Bindingsprefix, t

Behaviour

  • Renders <div class="i18n-group {groupClass}"> around the slot.
  • t(key, params) is $t(prefix + '.' + key, params) for the current route.
  • Only the slot's t is scoped: $t and nested <i18n-t> inside the group still take full keys.

Example

{
  "checkout": { "title": "Checkout", "items": "Items: {count}" }
}

<template>
  <i18n-group prefix="checkout" group-class="checkout">
    <template #default="{ t }">
      <h2>{{ t('title') }}</h2>
      <p>{{ t('items', { count: 3 }) }}</p>
    </template>
  </i18n-group>
</template>

Related

$t

<i18n-t>

<i18n-switcher>

The <i18n-switcher> component is a dropdown of the enabled locales, each linking to the current page in that locale.