Skip to content

Commit 28c8016

Browse files
committed
feat(i18n): add a section about dynamic keys in CONTRIBUTING.md
1 parent 3b3fbc6 commit 28c8016

1 file changed

Lines changed: 26 additions & 0 deletions

File tree

CONTRIBUTING.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -521,6 +521,32 @@ See how `es`, `es-ES`, and `es-419` are configured in [config/i18n.ts](./config/
521521
- Use `common.*` for shared strings (loading, retry, close, etc.)
522522
- Use component-specific prefixes: `package.card.*`, `settings.*`, `nav.*`
523523
- Do not use dashes (`-`) in translation keys; always use underscore (`_`): e.g., `privacy_policy` instead of `privacy-policy`
524+
- **Always use static string literals as translation keys.** Our i18n scripts (`pnpm i18n:report`) rely on static analysis to detect unused and missing keys. Dynamic keys cannot be analyzed and will be flagged as errors.
525+
526+
**Bad:**
527+
528+
```vue
529+
<!-- Template literal -->
530+
<p>{{ $t(`package.tabs.${tab}`) }}</p>
531+
532+
<!-- Variable -->
533+
<p>{{ $t(myKey) }}</p>
534+
```
535+
536+
**Good:**
537+
538+
```typescript
539+
const { t } = useI18n()
540+
541+
const tabLabels = computed(() => ({
542+
readme: t('package.tabs.readme'),
543+
versions: t('package.tabs.versions'),
544+
}))
545+
```
546+
547+
```vue
548+
<p>{{ tabLabels[tab] }}</p>
549+
```
524550

525551
### Using i18n-ally (recommended)
526552

0 commit comments

Comments
 (0)