🌏 Translated with the assistance of DeepSeek and ChatGPT

Internationalization i18n

The Pixelium Design component library provides comprehensive internationalization support. It includes Simplified Chinese (zh-cn) and English (en, default) language packs by default. Through the locale module, you can easily manage your application's multilingual capabilities.

Multilingual text within components will update reactively immediately after a change in the locale. For example, text in a Dialog component used within a template. Multilingual text used via a component's static methods will take effect on the next invocation. For example, the default title text when invoking a dialog via a static method on the Dialog component.

// Full import
import { locale } from '@pixelium/web-vue'

// If on-demand import
import { locale } from '@pixelium/web-vue/es'

Setting the Language locale.setLocale

Sets the current application's locale.

import { locale } from '@pixelium/web-vue'

// Switch to English
locale.setLocale('en')

// Switch to simplified Chinese
locale.setLocale('zh-cn')

View Translation Information locale.getMessages

Returns the translation information for the specified language. The data structure is a nested dictionary object with string values.

import { locale } from '@pixelium/web-vue'

locale.getMessages('en')

Adding a Language / Modifying Translations locale.addMessages

Adds or overwrites translation messages for a specified language.

import { locale } from '@pixelium/web-vue'

// Modify English translations
locale.addMessages('en', {
  dialog: {
    cancel: 'Cancel Operation'
  }
})

// Add French translations as a new language
locale.addMessages('fr', {
  dialog: {
    confirm: 'Soumettre',
    cancel: 'Annuler'
  }
})

Helper Methods

locale.getCurrentLang

Gets the currently set language code.

import { locale } from '@pixelium/web-vue'

const currentLang = locale.getCurrentLang()
console.log(currentLang) // 'zh-cn' or 'en'

locale.emitter

An event emitter based on the publish-subscribe pattern for listening to language change events.

For detailed API, please refer to mitt.

import { locale } from '@pixelium/web-vue'

// Listen for language switch events
locale.emitter.on('lang-change', (lang) => {
  console.log(`Language changed to: ${lang}`)
  // Update application state here
})