Internationalization

Trix Admin uses Vue I18n 11.x for internationalization, with built-in support for Chinese and English.

Language Files

Language files are located in src/locales/langs/:

locales/
├── langs/
│   ├── zh-cn.ts    # Chinese
│   └── en-us.ts    # English
├── dayjs.ts        # dayjs internationalization
├── naive.ts        # NaiveUI internationalization
└── index.ts        # Entry file

Language File Structure

// src/locales/langs/zh-cn.ts
export default {
  // System
  system: {
    title: 'Trix Admin'
  },
  // Common
  common: {
    add: 'Add',
    edit: 'Edit',
    delete: 'Delete',
    search: 'Search',
    reset: 'Reset',
    confirm: 'Confirm',
    cancel: 'Cancel',
    save: 'Save',
    loading: 'Loading...',
    success: 'Operation successful',
    failed: 'Operation failed'
  },
  // Routes/Menus
  route: {
    home: 'Home',
    login: 'Login',
    system: 'System Management',
    'system-user': 'User Management',
    'system-role': 'Role Management',
    'system-menu': 'Menu Management'
  },
  // Theme configuration
  theme: {
    themeSchema: {
      title: 'Theme Mode',
      light: 'Light',
      dark: 'Dark',
      auto: 'Follow System'
    },
    layoutMode: {
      title: 'Layout Mode',
      vertical: 'Left Menu',
      horizontal: 'Top Menu'
    }
  },
  // Pages
  page: {
    login: {
      title: 'Login',
      username: 'Username',
      password: 'Password',
      rememberMe: 'Remember me',
      forgotPassword: 'Forgot password?',
      login: 'Login'
    }
  }
}

Usage

In Vue Components

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

const { t } = useI18n()
</script>

<template>
  <NButton>{{ t('common.add') }}</NButton>
</template>

In JSON Schema

Using $t function:

{
  "com": "NButton",
  "children": "{{ $t('common.add') }}"
}

Using i18nKey:

{
  "com": "NButton",
  "props": {
    "i18nKey": "common.add"
  }
}

In Routes

{
  path: 'user',
  name: 'system-user',
  meta: {
    title: 'User Management',
    i18nKey: 'route.system-user'  // i18nKey takes priority
  }
}

Switching Languages

Using Component

{
  "com": "LangSwitch"
}

Programmatically

import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()

// Switch language
appStore.setLocale('en-US')

In JSON Schema

{
  "com": "NSelect",
  "model": "$app.locale",
  "props": {
    "options": [
      { "label": "简体中文", "value": "zh-CN" },
      { "label": "English", "value": "en-US" }
    ]
  },
  "events": {
    "update:value": {
      "call": "$methods.setLocale",
      "args": ["{{ $args[0] }}"]
    }
  }
}

Adding New Languages

1. Create Language File

// src/locales/langs/ja-jp.ts
export default {
  system: {
    title: 'Trix Admin'
  },
  common: {
    add: '追加',
    edit: '編集',
    delete: '削除'
    // ...
  }
}

2. Register Language

// src/locales/index.ts
import zhCN from './langs/zh-cn'
import enUS from './langs/en-us'
import jaJP from './langs/ja-jp'

const messages = {
  'zh-CN': zhCN,
  'en-US': enUS,
  'ja-JP': jaJP
}

3. Add Language Option

// src/typings/app.d.ts
type LangType = 'zh-CN' | 'en-US' | 'ja-JP'

NaiveUI Internationalization

NaiveUI component internationalization is configured in src/locales/naive.ts:

import { zhCN, enUS, jaJP, dateZhCN, dateEnUS, dateJaJP } from 'naive-ui'

export const naiveLocales = {
  'zh-CN': zhCN,
  'en-US': enUS,
  'ja-JP': jaJP
}

export const naiveDateLocales = {
  'zh-CN': dateZhCN,
  'en-US': dateEnUS,
  'ja-JP': dateJaJP
}

dayjs Internationalization

dayjs internationalization is configured in src/locales/dayjs.ts:

import 'dayjs/locale/zh-cn'
import 'dayjs/locale/en'
import 'dayjs/locale/ja'

export const dayjsLocales = {
  'zh-CN': 'zh-cn',
  'en-US': 'en',
  'ja-JP': 'ja'
}

Best Practices

1. Organize by Module

export default {
  // Organize by functional module
  user: {
    list: 'User List',
    add: 'Add User',
    edit: 'Edit User'
  },
  role: {
    list: 'Role List',
    add: 'Add Role'
  }
}

2. Use Placeholders

export default {
  message: {
    deleteConfirm: 'Are you sure you want to delete {name}?',
    total: 'Total {count} records'
  }
}

Usage:

{
  "com": "NText",
  "children": "{{ $t('message.total', { count: pagination.total }) }}"
}

3. Plural Forms

export default {
  item: '{count} item | {count} items'
}