Nuxt 3中如何监听i18n语言切换以修改文档方向？

Vue I18n v9（你当前使用的版本）确实移除了Nuxt 2时代的onLocaleChanged回调，但可以通过以下两种优雅方式实现文档方向的自动切换，同时支持服务端渲染（SSR）：

方案一：独立插件处理（推荐，模块化设计） #

新建plugins/direction.ts，专门处理语言方向逻辑：

export default defineNuxtPlugin(({ app }) => {
  const { locale } = app.i18n.global

  // 设置文档方向的核心函数
  const setDirection = (lang: string) => {
    const dir = lang === 'fa' ? 'rtl' : 'ltr'
    // 客户端直接修改body属性
    if (process.client) {
      document.body.dir = dir
    }
    // 服务端通过useHead注入html属性，避免SSR渲染闪烁
    useHead({
      htmlAttrs: {
        dir
      }
    })
  }

  // 初始化页面时设置一次方向
  setDirection(locale.value)

  // 监听locale变化，自动切换方向
  watch(locale, (newLocale) => {
    setDirection(newLocale)
  })
})

你的原有plugins/i18n.ts无需改动，保持当前配置即可：

import { createI18n } from 'vue-i18n'
import en from '~~/locales/en'
import fa from '~~/locales/fa'

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'fa',
    messages: {
      en,
      fa
    }
  })
  vueApp.use(i18n)
})

方案二：根组件直接监听 #

如果不想新增插件，也可以在app.vue中直接处理：

<template>
  <div>
    <!-- 你的应用内容 -->
  </div>
</template>

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

const setDirection = (lang: string) => {
  const dir = lang === 'fa' ? 'rtl' : 'ltr'
  if (process.client) {
    document.body.dir = dir
  }
  useHead({
    htmlAttrs: { dir }
  })
}

// 初始化方向
setDirection(locale.value)
// 监听语言切换
watch(locale, setDirection)
</script>

方案优势 #

1. SSR友好：通过useHead在服务端注入方向属性，避免客户端切换时的页面闪烁
2. 符合Nuxt 3生态：利用组合式API的watch和useHead，替代旧的回调模式
3. 模块化解耦：独立插件将方向逻辑与i18n配置分离，代码更易维护

额外适配：Tailwind CSS Flip #

你已安装tailwindcss-flip，可在tailwind.config.js中启用，实现样式自动翻转：

module.exports = {
  plugins: [require('tailwindcss-flip')],
  // 其他Tailwind配置
}

启用后，当文档方向为RTL时，Tailwind的ml-*、pr-*等方向类会自动翻转成对应的RTL样式，无需手动编写两套代码。

内容的提问来源于stack exchange，提问作者morteza mortezaie