Internationalization

Configuration

The multilingual configuration files are located in the locales directory, with file names in the format {language}.json. Add languages in src\modules\i18n.ts.

TIP

Non-JSON formats cannot be used with the I18N-Ally plugin. Please use JSON format.

import { createI18n } from 'vue-i18n'
import type { App } from 'vue'
import enUS from '../../locales/en_US.json'
import zhCN from '../../locales/zh_CN.json'
import { local } from '@/utils'

export const i18n = createI18n({
  legacy: false,
  locale: local.get('lang') || 'zhCN', // Default display language
  fallbackLocale: 'enUS',
  messages: {
    zhCN,
    enUS,
  },
})

export function install(app: App) {
  app.use(i18n)
}

The multilingual configuration for the component library is in the src\utils\i18n.ts file. Add the languages you need. The project will automatically switch between them.NativeUI Internationalization Documentation

import { dateZhCN, zhCN } from 'naive-ui'

export const naiveI18nOptions: Record<App.lang, { locale: NLocale | null, dateLocale: NDateLocale | null }> = {
  zhCN: {
    locale: zhCN,
    dateLocale: dateZhCN,
  },
  enUS: {
    locale: null,
    dateLocale: null,
  },
}

Vue Files

You can directly use the $t method in the template, for example

<span>{{ $t('app.backTop') }}</span>

Use useI18n in the setup to use it

const { t } = useI18n()

const transitionSelectorOptions = computed(() => {
  return [
    {
      label: t('app.transitionNull'),
      value: '',
    }
  ]
})

WARNING

When using variables to render components, the variables need to be wrapped in computed, otherwise they will not take effect.

TS Files

In ts/js files, you cannot use the above method to get translated text. Therefore, you need to use the $t utility method in src\utils\i18n.ts, for example

import { $t } from '@/utils'

const label = $t('app.backTop')

Switching Languages

Use the setLocale utility method in src\utils\i18n.ts, for example

import { setLocale } from '@/utils'

setLocale('en')

Menu and Routes

First, you need to add menu and route translation texts in the multilingual configuration file, following this format

{
  "route": {
    "{your route name}": "{your route i18n text}",
  }
}

In the configuration file, the key should match your route name, and the value should be your route's i18n text. For example

route

{
    'name': 'workbench',
    'path': '/dashboard/workbench',
    'title': '工作台',
    'requiresAuth': true,
    'icon': 'icon-park-outline:alarm',
    'pinTab': true,
    'menuType': 'page',
    'componentPath': '/dashboard/workbench/index.vue',
    'id': 2,
    'pid': 1,
  },

locale

{
  "route": {
    "workbench": "工作台",
  }
}

If you haven't set the i18n text for this route, the title will be used as the display text.