Internationalization (i18n)

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

<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:

// 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

<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

// 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

// 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

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

Parameters and Pluralization

Parameters

// Translation
messages: {
  deploymentFailed: 'Deployment failed: {error}',
  userGreeting: 'Welcome back, {userName}!'
}

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

Pluralization

// 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

On this page