Internationalization

SeeYouUI provides a built-in lightweight internationalization solution supporting Chinese, English, and any other languages.

It is fully compatible with all uni-app platforms (H5, App, Mini Program), has zero external dependencies, and is deeply integrated with the component library — all component text updates automatically when the language switches.

Quick Start

Zero Configuration

If you only need Chinese or English, no configuration is required.

Components will automatically switch based on the system language:

• When the system language is Chinese, components display Chinese text
• Otherwise, components default to English text

<template>
  <!-- Button text follows system language automatically -->
  <see-calendar />
  <see-picker />
  <see-pagination />
</template>

Set Default Language

In your entry file (main.js or main.ts), create an i18n instance and pass it via app.use():

// main.js
import { createI18n } from 'see-u-ui'
import SeeYouUI from 'see-u-ui'

// Create i18n instance
const i18n = createI18n({
  locale: 'en',              // Default language
  fallbackLocale: 'zh-CN',   // Fallback language when key is missing
})

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  // Pass i18n instance
  app.use(SeeYouUI, { i18n })
  return { app }
}
// #endif

Switch Language Dynamically

<template>
  <view>
    <see-calendar />
    <button @click="switchToEn">English</button>
    <button @click="switchToZh">中文</button>
  </view>
</template>

<script setup>
import { useI18n } from 'see-u-ui'

const { setLocale } = useI18n()

const switchToEn = () => setLocale('en')
const switchToZh = () => setLocale('zh-CN')
</script>

Custom Language Pack

You can override built-in text or add entirely new languages.

import { createI18n } from 'see-u-ui'

const i18n = createI18n({
  locale: 'ja',             // Use Japanese
  fallbackLocale: 'zh-CN',  // Fallback to Chinese for missing Japanese keys
  messages: {
    // Fully customize English text
    'en': {
      cancel: 'Go Back',
      confirm: 'OK',
      'calendar.week.sunday': 'Sunday',
      // ... override other keys
    },
    // Add a new language
    'ja': {
      cancel: 'キャンセル',
      confirm: '確認',
      'calendar.week.sunday': '日',
      'calendar.week.monday': '月',
      // ...
    },
  },
})

export function createApp() {
  const app = createSSRApp(App)
  app.use(SeeYouUI, { i18n })
  return { app }
}

Using Translation in Business Code

The t() function returned by useI18n() can also translate your own text:

<template>
  <view>
    <h1>{{ t('greeting', { name: userName }) }}</h1>
    <button @click="toggleLang">Switch Language</button>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useI18n } from 'see-u-ui'

const { t, locale } = useI18n()
const userName = ref('Buddy')

const toggleLang = () => {
  locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'
}
</script>

Define your own translation keys in createI18n:

const i18n = createI18n({
  messages: {
    'zh-CN': {
      greeting: '你好，{name}！',
      // ... other component keys will auto-merge with built-in locales
    },
    'en': {
      greeting: 'Hello, {name}!',
    },
  },
})

Using <see-config>

If you use the <see-config> component as the root node, you can also set the language on it:

<!-- App.vue -->
<template>
  <see-config locale="en">
    <!-- All child components switch to English -->
    <router-view />
  </see-config>
</template>

Built-in Locale Keys

The following are all translation keys built into SeeYouUI components. You can override any of them.

Common

Key	English	Chinese
cancel	Cancel	取消
confirm	OK	确定
close	Close	关闭
loading	Loading...	加载中...
noData	No Data	暂无数据
loadMore	Load More	加载更多
pullRefresh	Pull to Refresh	下拉刷新
retry	Retry	重试
search	Search	搜索
reset	Reset	重置

Calendar

Key	English	Chinese
calendar.week.sunday	Su	日
calendar.week.monday	Mo	一
calendar.week.tuesday	Tu	二
calendar.week.wednesday	We	三
calendar.week.thursday	Th	四
calendar.week.friday	Fr	五
calendar.week.saturday	Sa	六
calendar.today	Today	今天
calendar.month.january	Jan	1月
calendar.month.february	Feb	2月
calendar.month.march	Mar	3月
calendar.month.april	Apr	4月
calendar.month.may	May	5月
calendar.month.june	Jun	6月
calendar.month.july	Jul	7月
calendar.month.august	Aug	8月
calendar.month.september	Sep	9月
calendar.month.october	Oct	10月
calendar.month.november	Nov	11月
calendar.month.december	Dec	12月

Picker / DatetimePicker

Key	English	Chinese
picker.cancel	Cancel	取消
picker.confirm	Confirm	确定
picker.year	Year	年
picker.month	Month	月
picker.day	Day	日
picker.hour	Hour	时
picker.minute	Min	分
picker.second	Sec	秒
picker.startDate	Start	开始日期
picker.endDate	End	结束日期

Upload

Key	English	Chinese
upload.selectFile	Select File	选择文件
upload.uploading	Uploading...	上传中...
upload.success	Uploaded	上传成功
upload.fail	Upload Failed	上传失败
upload.exceedSize	File size exceeded	文件大小超出限制
upload.exceedCount	File count exceeded	文件数量超出限制

Pagination

Key	English	Chinese
pagination.total	{total} items	共 {total} 条
pagination.prev	Prev	上一页
pagination.next	Next	下一页

Table

Key	English	Chinese
table.empty	No Data	暂无数据
table.sortAsc	Ascending	升序
table.sortDesc	Descending	降序

Empty

Key	English	Chinese
empty.default	No Data	暂无数据
empty.network	Network Error	网络不给力
empty.search	No Results Found	没有找到相关内容

Modal

Key	English	Chinese
modal.cancel	Cancel	取消
modal.confirm	Confirm	确定

ActionSheet

Key	English	Chinese
actionSheet.cancel	Cancel	取消

Search

Key	English	Chinese
search.placeholder	Please enter keywords	请输入搜索内容
search.cancel	Cancel	取消

CountDown

Key	English	Chinese
countdown.day	d	天
countdown.hour	h	时
countdown.minute	m	分
countdown.second	s	秒

Keyboard

Key	English	Chinese
keyboard.done	Done	完成

Cascader

Key	English	Chinese
cascader.placeholder	Please select	请选择

NoticeBar

Key	English	Chinese
noticeBar.close	Close	关闭
noticeBar.more	Details	详情

SwipeAction

Key	English	Chinese
swipeAction.confirm	Confirm delete?	确认删除？

NoNetwork

Key	English	Chinese
noNetwork.title	Network Error	网络不给力
noNetwork.retry	Tap to retry	点击重试

LoadingPage

Key	English	Chinese
loadingPage.loading	Loading...	加载中...

About vue-i18n

SeeYouUI's built-in i18n is completely independent of vue-i18n.

If you use vue-i18n in your project, the two can coexist without interfering with each other. However, you will need to manually sync language state between the two i18n instances if needed.

Recommended practice: Use SeeYouUI's built-in i18n to manage component library text, and for your business text you can use either SeeYouUI's i18n (useI18n) or vue-i18n — they don't conflict.

API Reference

See useI18n API Documentation.