Translation File Structure
22.2.1. File Structure
Translation files must be separated and managed by language and namespace.
src/locales/
├── ko/ # Korean
│ ├── common.json
│ ├── pages.json
│ ├── components.json
│ └── validation.json
├── en/ # English
│ └── (same structure)
└── ja/ # Japanese
└── (same structure)- Translation files must be located at
src/locales/{lang}/{namespace}.json. - Each language directory must maintain the same namespace file structure.
- All translations must not be placed in a single file; they must be separated by namespace to ensure maintainability.
- JSON format must be used. Other formats such as YAML are not permitted.
22.2.2. Key Naming Conventions
Translation keys must follow consistent naming conventions.
| Rule | Description | Example |
|---|---|---|
| Dot Notation | Separate hierarchy levels with dots | pages.user.title |
| camelCase | Separate individual words | errorMessage, submitButton |
| Semantic Naming | Name based on meaning, not UI position | validation.required |
json
{
"pages": {
"user": {
"title": "User Management",
"empty": "No registered users."
},
"dashboard": {
"title": "Dashboard",
"welcome": "Welcome, {name}."
}
}
}- Key names must use camelCase. snake_case or kebab-case must not be used.
- Key names must reflect the meaning of the text. Names must not be based on UI position (e.g.,
leftSidebarTitle). - Dynamic values must be handled using interpolation syntax with curly braces (
{name}). - Key depth is allowed up to a maximum of 4 levels. If deeper nesting is required, namespaces must be separated.
22.2.3. Namespaces
The following standard namespaces must be used to categorize translation keys.
| Namespace | Purpose | Example |
|---|---|---|
common | Common UI elements (buttons, labels, statuses) | common.save, common.cancel |
pages | Page-specific text | pages.login.title |
components | Shared component internal text | components.modal.close |
validation | Form validation messages | validation.required |
error | Error messages | error.notFound, error.serverError |
- Text commonly used across multiple pages must be defined in the
commonnamespace. - Text used only on a specific page must be defined in the
pagesnamespace. - Additional namespaces may be added based on project scale; however, the purpose of standard namespaces must not be altered.
22.2.4. Pluralization
Text requiring pluralization must be handled using vue-i18n's plural syntax.
json
{
"items": "No items | {count} item | {count} items"
}vue
<template>
<p>{{ $t('items', { count: itemCount }, itemCount) }}</p>
</template>- Plural forms are separated by pipe (
|). The order isnone | singular | plural. - Korean does not distinguish between singular and plural, so both forms are written identically.
- English translation files must distinguish between singular (
{count} item) and plural ({count} items). - If a separate expression for the number 0 is needed, all three forms must be defined.
- When adding support for languages with complex pluralization rules (e.g., Arabic), the
pluralRulesoption in vue-i18n must be configured.