translate

Synchronize en and fr locale keys and interpolation in Vue SSR codebases.

3|Updated Jan 14, 2023
One-click install
npx skills add https://github.com/e-xode/vue-ssr --skill translate-e-xode
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: translate
Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/translate
Command: npx skills add https://github.com/e-xode/vue-ssr --skill translate-e-xode

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

It prevents missing or inconsistent internationalization strings across English and French by enforcing shared key structure, interpolation rules, and vue-i18n usage.

Core Features & Use Cases

  • Locale parity enforcement: Ensures src/translate/en.json (reference) and src/translate/fr.json always contain identical key hierarchies and interpolation placeholders.
  • Correct key structure guidance: Enforces the section-based naming convention (section.subsection.camelCaseKey) with a maximum nesting depth of 4.
  • Safe vue-i18n authoring rules: Requires all user-visible text to be written via t('key') with matching {param} interpolation syntax and no embedded HTML in translation values.
  • Locale-aware routing support: Documents how to build /:locale/ prefixed links using the useLocalePath composable.

Quick Start

Ask the translate skill how to add or fix a specific i18n key (including its section, interpolation parameters, and required locale parity) for the Vue SSR starter kit.

Frequently Asked Questions about translate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I synchronize i18n translation keys between English and French in a Vue SSR app?

Synchronizing i18n translation keys requires enforcing identical key hierarchies and interpolation placeholders across `src/translate/en.json` and `src/translate/fr.json`, using `en.json` as the reference structure.

What is the correct vue-i18n interpolation syntax for translation parameters?

The correct vue-i18n interpolation syntax uses camelCase placeholders formatted as `{param}` within translation values, ensuring matching parameters exist across all locale files.

How do I structure nested locale keys for vue-i18n translations?

Structuring nested locale keys requires a section-based naming convention (`section.subsection.camelCaseKey`) with a maximum nesting depth of 4 and alphabetical ordering within the JSON files.

How do I build locale-prefixed routing links in a Vue SSR codebase?

Building locale-prefixed routing links uses the `useLocalePath` composable to generate correct `/:locale/` prefixed URLs for Vue SSR navigation.

Why are my vue-i18n translation values returning errors or displaying HTML tags?

Vue-i18n translation values displaying errors may occur if embedded HTML is included in the translation strings; all user-visible text must be written via `t('key')` with no embedded HTML.

Can I automatically validate locale parity between my en and fr translation files?

Validating locale parity between translation files can be done by running the parity script, which checks `src/translate/en.json` and `fr.json` for matching key structures and interpolation placeholders.