多語言 (i18n)

在全球化的時代，支援多語言是必備功能。Nuxt 官方提供了 @nuxtjs/i18n 模組，讓國際化 (Internationalization) 變得簡單且強大。

安裝與設定

首先安裝 @nuxtjs/i18n 模組。

Terminal

pnpm add @nuxtjs/i18n

在 nuxt.config.ts 中進行配置：

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', name: 'English', file: 'en.json' },
      { code: 'zh', iso: 'zh-TW', name: '繁體中文', file: 'zh.json' }
    ],
    defaultLocale: 'zh',
    strategy: 'prefix_except_default', // 預設語言不加前綴，其他語言加 /en
    lazy: true, // 懶加載翻譯檔
    langDir: 'locales', // 翻譯檔目錄
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root'
    }
  }
})

基本用法

在 Vue 元件中，使用 $t 函數來顯示翻譯內容。

locales/zh.json

JSON

{
  "welcome": "歡迎來到 Nuxt",
  "about": "關於我們"
}

app.vue

Vue

<template>
  <h1>{{ $t('welcome') }}</h1>
  
  <!-- 切換語言按鈕 -->
  <NuxtLink :to="switchLocalePath('en')">
    English
  </NuxtLink>
</template>

<script setup>
const { locale, setLocale } = useI18n()
</script>

路由策略

@nuxtjs/i18n 會自動為您產生多語言路由。

URL	Locale	說明
/	zh (Default)	預設語言首頁
/about	zh	預設語言內頁
/en	en	英文版首頁
/en/about	en	英文版內頁

SEO 支援

模組會自動為每個頁面注入正確的 hreflang 標籤，這對於多語言網站的 SEO 至關重要。

Generated Head Tags

            <link rel="alternate" href="https://example.com/" hreflang="zh-TW" />
            <link rel="alternate" href="https://example.com/en" hreflang="en-US" />
            <link rel="canonical" href="https://example.com/" />