Internationalization

Overview

Antdv Next Admin uses vue-i18n for internationalization, with built-in Chinese (zh-CN) and English (en-US) locales and runtime language switching.

Directory Structure

src/locales/
├── index.ts      # i18n config and initialization
├── zh-CN.ts      # Chinese locale
└── en-US.ts      # English locale

Usage

In Templates

<template>
  <!-- Basic usage -->
  <span>{{ $t('common.add') }}</span>

  <!-- With parameters -->
  <span>{{ $t('proTable.total', { total: 100 }) }}</span>
</template>

In <script setup>

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

const { t } = useI18n()

const title = t('menu.dashboard')
</script>

Outside Components

import { $t } from '@/locales'

const message = $t('common.success')

Locale File Structure

Locale files are organized by feature module:

export default {
  common: {
    add: 'Add',
    edit: 'Edit',
    delete: 'Delete',
    search: 'Search',
    confirm: 'Confirm',
    cancel: 'Cancel',
    // ...
  },
  menu: {
    dashboard: 'Dashboard',
    organization: 'Organization',
    system: 'System',
    // ...
  },
  login: {
    title: 'Login',
    username: 'Username',
    password: 'Password',
    // ...
  },
  // proTable, proForm, user, role, settings, error, validation ...
}

Switching Language

Language switching is available via the language toggle in the layout header. The current locale is persisted to localStorage.

Adding a New Language

1. Create the Locale File

// src/locales/ja-JP.ts
export default {
  common: {
    add: '追加',
    edit: '編集',
    // ...
  },
  // ...
}

2. Register the Locale

Register the new locale in src/locales/index.ts:

import jaJP from './ja-JP'

const i18n = createI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
    'ja-JP': jaJP,  // New locale
  },
})

3. Add the Switch Option

Add the new language option in the layout's language switcher component.

Notes

• Keep the key structure consistent across all locale files
• Update all locale files when adding new pages
• Menu titles use i18n keys (e.g. menu.dashboard) — the routing system resolves them automatically