🌍 <i18n-group> Component

The <i18n-group> component in Nuxt I18n Micro provides a convenient way to group translations under a common prefix, reducing repetition and improving code organization.

⚙️ Props

Prop	Type	Default	Description
prefix *	string	—	Key prefix every lookup inside the slot is resolved against.
groupClass	string	''	Extra class on the wrapper element.

* required.

Slots

Slot	Bindings	Description
default	prefix, t	Receives prefix and a t function scoped to it.

🎯 Slots

The default slot receives prefix and a t function scoped to it, so keys inside are written relative to the prefix:

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

🛠️ Example Usage

Basic Usage

<template>
  <i18n-group prefix="product.details">
    <template #default="{ t }">
      <h1>{{ t('title') }}</h1>
      <p>{{ t('description') }}</p>
      <div class="price">{{ t('price', { value: 99.99 }) }}</div>
    </template>
  </i18n-group>
</template>

Translation file:

{
  "product": {
    "details": {
      "title": "Premium Product",
      "description": "This is a premium product",
      "price": "Price: ${value}"
    }
  }
}

With Custom Class

<template>
  <i18n-group prefix="user.profile" group-class="profile-section">
    <template #default="{ t }">
      <div class="user-info">
        <h2>{{ t('title') }}</h2>
        <p>{{ t('bio') }}</p>
        <div class="stats">
          <span>{{ t('stats.followers') }}</span>
          <span>{{ t('stats.following') }}</span>
        </div>
      </div>
    </template>
  </i18n-group>
</template>

Translation file:

{
  "user": {
    "profile": {
      "title": "User Profile",
      "bio": "User biography goes here",
      "stats": {
        "followers": "Followers: {count}",
        "following": "Following: {count}"
      }
    }
  }
}

With Dynamic Content

<template>
  <i18n-group prefix="blog.post">
    <template #default="{ t }">
      <article>
        <h1>{{ t('title') }}</h1>
        <div class="meta">
          {{ t('meta.author', { name: author }) }} |
          {{ t('meta.date', { date: publishDate }) }}
        </div>
        <div v-for="(section, index) in sections" :key="index">
          <h2>{{ t(`sections.${index}.title`) }}</h2>
          <p>{{ t(`sections.${index}.content`) }}</p>
        </div>
      </article>
    </template>
  </i18n-group>
</template>

<script setup>
const author = 'John Doe'
const publishDate = '2024-01-01'
const sections = ['intro', 'main', 'conclusion']
</script>

🎨 Styling

The component wraps its content in a div with the class i18n-group and any additional classes specified in the groupClass prop:

.i18n-group {
  /* Your base styles */
}

.profile-section {
  /* Additional styles for profile sections */
}

🚀 Best Practices

1. Consistent Prefixes: Use consistent and logical prefixes that reflect your application's structure

<i18n-group prefix="features.pricing">
<i18n-group prefix="features.security">

2. Modular Organization: Group related translations together under meaningful prefixes

<i18n-group prefix="checkout.payment">
<i18n-group prefix="checkout.shipping">

3. Reusable Components: Create reusable components with their own translation groups

<!-- UserProfile.vue -->
<i18n-group prefix="user.profile">

<!-- UserSettings.vue -->
<i18n-group prefix="user.settings">

4. Nested Groups: Avoid deeply nesting groups to maintain clarity

<!-- Good -->
<i18n-group prefix="shop.product">

<!-- Avoid -->
<i18n-group prefix="shop.category.product.details.specs">