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

```javascript
// 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

```vue
<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