Internationalization

lh-ui-plus builds in multi-language support through the LhConfigProvider component and the lhlocale helper.

Language Packages

Built-in language packages include Simplified Chinese (zh-CN) and English (en-US).

import { zhCN, enUS } from '@lh-ui/vue3'

Global Configuration

Use LhConfigProvider to set locale globally:

<script setup lang="ts">
import { enUS } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider :locale="enUS">
    <div>
      <LhButton type="primary">Submit</LhButton>
    </div>
  </LhConfigProvider>
</template>

API Usage

The lhlocale helper provides translation functions:

import { lhlocale } from '@lh-ui/vue3'

// Get translation
const text = lhlocale.t('button.submit')

// Switch locale
lhlocale.use('en-US')

Custom Language Pack

Add custom translations:

import { lhlocale } from '@lh-ui/vue3'

lhlocale.add('custom', {
  button: {
    submit: 'Submit',
    cancel: 'Cancel'
  }
})

Reactive Tutorial

Use reactive refs for dynamic language switching:

<script setup lang="ts">
import { ref } from 'vue'
import { zhCN, enUS } from '@lh-ui/vue3'

const locale = ref(zhCN)

const toggleLocale = () => {
  locale.value = locale.value === zhCN ? enUS : zhCN
}
</script>

<template>
  <LhConfigProvider :locale="locale">
    <LhButton @click="toggleLocale">Switch Language</LhButton>
  </LhConfigProvider>
</template>

Component Usage

Components automatically inherit locale from ConfigProvider:

<script setup lang="ts">
import { enUS } from '@lh-ui/vue3'
</script>

<template>
  <LhConfigProvider :locale="enUS">
    <LhDatePicker />
    <LhTimePicker />
  </LhConfigProvider>
</template>