A complete guide to a three-language (zh-CN/zh-TW/en) i18n setup with @nuxtjs/i18n v10, covering the prefix_except_default routing strategy, browser language detection with cookie persistence, Naive UI locale synchronization, and SEO hreflang optimization.1. i18n Configuration
i18n: {
defaultLocale: 'zh-cn',
strategy: 'prefix_except_default',
langDir: 'locales',
locales: [
{ code: 'zh-cn', name: '中文', file: 'zh_CN.json' },
{ code: 'zh-tw', name: '中文（繁體）', file: 'zh_TW.json' },
{ code: 'en', name: 'English', file: 'en.json' }
],
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'salong_i18n_redirected',
redirectOn: 'root',
fallbackLocale: 'zh-cn'
}
}
prefix_except_default
| URL | Language | Note |
|---|
/ | Simplified Chinese | Default — no prefix |
/zh-tw | Traditional Chinese | Prefixed |
/en | English | Prefixed |
2. Locale Resources
i18n/locales/
├── zh_CN.json # Simplified Chinese
├── zh_CN_player.ts # Player Chinese strings
├── zh_TW.json # Traditional Chinese
├── zh_TW_player.ts # Player Traditional Chinese strings
└── en.json # English
3. Language Detection Flow
First visit /
├── Cookie: salong_i18n_redirected → saved language
├── Accept-Language → zh-TW → /zh-tw, en → /en
└── Default → zh-cn
| Config | Value | Description |
|---|
useCookie | true | Remember language choice |
cookieKey | salong_i18n_redirected | Custom cookie name |
redirectOn | root | Detect only on root path |
fallbackLocale | zh-cn | Default fallback |
4. Naive UI i18n Integration
const naiveLocale = computed(() => {
switch (locale.value) {
case 'zh-cn': return { locale: zhCN, dateLocale: dateZhCN }
case 'zh-tw': return { locale: zhTW, dateLocale: dateZhTW }
default: return null // English uses defaults
}
})
5. SEO
- Auto-generated
hreflang tags
- Schema.org multi-language support
- Page-level aliases:
['/en/index', '/zh-cn/index', '/zh-tw/index']
6. Summary
| Dimension | Implementation |
|---|
| Routing | prefix_except_default |
| Detection | Cookie → Accept-Language → fallback |
| Component Sync | Naive UI locale follows i18n |
| SEO | hreflang + Schema.org |
| SSR Safety | Server-side Cookie/Header resolution |
