Shared Translations

Shared translations provide common static text that is available across all sections in your project. Use them for repeated phrases like "Read More", "Add to Cart", or other text shared between multiple sections.

Shared translations live in a single file at the project root:

shared/
└── translation.ts

The format is the same as section-level translations — a record keyed by language code:

// shared/translation.ts
export default {
  en: {
    '$label.shared.title': 'Title',
    '$label.shared.description': 'Description',
    '$label.shared.read_more': 'Read More',
  },
  fr: {
    '$label.shared.title': 'Titre',
    '$label.shared.description': 'Description',
    '$label.shared.read_more': 'Lire la suite',
  },
} as const;

Convention

Use the $label.shared.* prefix for shared translation keys to distinguish them from section-specific keys.

Shared translations are automatically injected into every section at build time. Access them in your Vue components using the useTranslation composable:

<template>
  <a>{{ t('$label.shared.read_more') }}</a>
</template>

Hot Reload

Changes to shared/translation.ts trigger a full rebuild in preview mode.