uni-halo/.agents/skills/uview-pro-vue3/examples/guide/i18n.md

Internationalization (i18n)

官方文档: https://uviewpro.cn

Instructions

This example demonstrates how to configure internationalization in uView Pro.

Key Concepts

• Locale configuration
• Language switching
• Component i18n

Example: Basic i18n Setup

// main.js
import { createSSRApp } from 'vue'
import uView from 'uview-pro'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uView, {
    locale: 'zh-cn' // or 'en-us'
  })
  return {
    app
  }
}

Example: Language Switching

<template>
  <u-button @click="switchLanguage">Switch Language</u-button>
</template>

<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()

const switchLanguage = () => {
  instance.appContext.config.globalProperties.$u.config({
    locale: 'en-us'
  })
}
</script>

Example: Component i18n

uView Pro components support i18n through global configuration.

Key Points

• Configure locale in main.js
• Support zh-cn and en-us
• Switch language dynamically
• Components automatically use configured locale
• Customize locale messages if needed