Internationalization

The project uses the vue-i18n plugin and currently integrates two language packs: Chinese and English.

Currently, internationalization has been implemented for menus, top bars, settings center, and other components. Other areas can be configured according to requirements.

├── language
│   ├── index.ts      // Configuration file
│   └── locales       // Language pack directory
│       ├── zh.json   // Chinese pack
│       └── en.json   // English pack

Usage in Templates

<p>{{ $t('setting.color.title') }}</p>

How to Get the Current Language

import { useI18n } from "vue-i18n";
const { locale } = useI18n();

How to Configure Multiple Languages

Modify src/locales/index.ts Add the language you want to configure in the messages section, then create a new file in the langs directory, such as en.ts

import { createI18n } from "vue-i18n";
import en from "./en";
import zh from "./zh";
import { LanguageEnum } from "@/enums/appEnum";

const lang = createI18n({
  locale: LanguageEnum.ZH, // Set language type
  legacy: false, // This must be set to false to support compositionAPI
  globalInjection: true, // Globally register $t method
  fallbackLocale: LanguageEnum.ZH, // Set fallback language
  messages: {
    en,
    zh,
  },
});

export default lang;