> ## Documentation Index
> Fetch the complete documentation index at: https://docs.deploystack.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Internationalization (i18n)

> Quick reference for working with i18n in DeployStack frontend

DeployStack uses Vue I18n with a modular file structure. Translations are organized by feature for easy maintenance.

## Architecture

* **Location**: `src/i18n/`
* **Current language**: English only (`en`)
* **Structure**: Feature-based translation files
* **Framework**: Vue I18n with Composition API (non-legacy mode)

## Basic Usage

### Using in Components

```vue theme={null}
<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// Use in script
const message = t('globalSettings.errors.configNotSet')
</script>

<template>
  <!-- Use in template -->
  <h1>{{ $t('globalSettings.title') }}</h1>
  <button>{{ $t('buttons.save') }}</button>
</template>
```

## Adding New Translations

### 1. Add to Translation File

Find the appropriate file in `src/i18n/locales/en/` and add your translation:

```typescript theme={null}
// Example: Adding to globalSettings.ts
export default {
  errors: {
    configNotSet: 'Configuration not set',
    fetchFailed: 'Failed to fetch settings',
    // Add your new translation here
    myNewError: 'Something went wrong with {item}'
  }
}
```

### 2. Use in Component

```vue theme={null}
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

// With parameters
const errorMsg = t('globalSettings.errors.myNewError', { item: 'deployment' })
</script>
```

## Creating a New Feature Translation File

When adding a new feature, create a dedicated translation file:

### 1. Create the Translation File

```typescript theme={null}
// src/i18n/locales/en/myFeature.ts
export default {
  title: 'My Feature',
  description: 'Feature description',
  actions: {
    submit: 'Submit',
    cancel: 'Cancel'
  },
  messages: {
    success: 'Operation successful',
    error: 'An error occurred: {message}'
  }
}
```

### 2. Register in Index

```typescript theme={null}
// src/i18n/locales/en/index.ts
import myFeatureMessages from './myFeature'

export default {
  // ... existing imports
  myFeature: myFeatureMessages
}
```

## Key Naming Convention

### Structure

```
{feature}.{section}.{key}
```

Examples:

* `globalSettings.errors.configNotSet`
* `mcpCatalog.filters.byCategory`
* `common.buttons.save`
* `validation.required`

### Rules

1. **Use camelCase** for keys
2. **Group by feature** (globalSettings, mcpCatalog, teams)
3. **Use descriptive names** (avoid generic keys like 'msg1', 'error1')
4. **Common translations** go in `common.ts`
5. **Validation messages** can be shared or feature-specific

## Parameters and Pluralization

### Parameters

```typescript theme={null}
// Translation
messages: {
  deploymentFailed: 'Deployment failed: {error}',
  userGreeting: 'Welcome back, {userName}!'
}

// Usage
t('messages.deploymentFailed', { error: 'Invalid credentials' })
t('messages.userGreeting', { userName: user.name })
```

### Pluralization

```typescript theme={null}
// Translation
messages: {
  itemCount: '{count} {count, plural, one {item} other {items}}'
}

// Usage
t('messages.itemCount', { count: 1 }) // "1 item"
t('messages.itemCount', { count: 5 }) // "5 items"
```

## Quick Reference

### Common Translation Keys

| Category   | Key Example                               | Location     |
| ---------- | ----------------------------------------- | ------------ |
| Buttons    | `buttons.save`, `buttons.cancel`          | `common.ts`  |
| Validation | `validation.required`, `validation.email` | `common.ts`  |
| Status     | `common.status.running`                   | `common.ts`  |
| Errors     | `{feature}.errors.{errorType}`            | Feature file |
| Success    | `{feature}.messages.success`              | Feature file |
| Forms      | `{feature}.form.{field}.label`            | Feature file |