fix: reactive lang when using Nuxt I18n

src/module.ts

@@ -125,12 +125,7 @@ export default defineNuxtModule<ModuleOptions>({
       // i18n complicates things, we need to run the server plugin at the right time, client is fine
       if (hasNuxtModule('@nuxtjs/i18n')) {
         addPlugin({
-          src: resolve(`./runtime/nuxt/plugin/defaultsWaitI18n.server`),
-          mode: 'server',
-        })
-        addPlugin({
-          src: resolve(`./runtime/nuxt/plugin/defaults`),
-          mode: 'client',
+          src: resolve(`./runtime/nuxt/plugin/defaultsWaitI18n`),
         })
       }
       else {

src/runtime/nuxt/logic/applyDefaults.ts

@@ -1,18 +1,18 @@
 import type { UseHeadOptions, UseSeoMetaInput } from '@unhead/vue'
 import type { QueryObject } from 'ufo'
 import { stringifyQuery } from 'ufo'
+import type { Ref } from 'vue'
 import {
   computed,
   createSitePathResolver,
   useHead,
   useRoute,
   useRuntimeConfig,
   useSeoMeta,
-  useServerHead,
   useSiteConfig,
 } from '#imports'
 
-export function applyDefaults() {
+export function applyDefaults(i18n: { locale: Ref<string> }) {
   // get the head instance
   const { canonicalQueryWhitelist } = useRuntimeConfig().public['nuxt-seo']
   const siteConfig = useSiteConfig()
@@ -37,25 +37,16 @@ export function applyDefaults() {
 
   // needs higher priority
   useHead({
-    link: [{ rel: 'canonical', href: () => canonicalUrl.value }],
-  }, minimalPriority)
-  const locale = siteConfig.currentLocale || siteConfig.defaultLocale
-  if (locale) {
-    useServerHead({
-      htmlAttrs: { lang: locale },
-    })
-  }
-
-  // TODO support SPA
-  useHead({
+    htmlAttrs: { lang: i18n.locale },
     templateParams: { site: siteConfig, siteName: siteConfig.name || '' },
     titleTemplate: '%s %separator %siteName',
+    link: [{ rel: 'canonical', href: () => canonicalUrl.value }],
   }, minimalPriority)
 
   const seoMeta: UseSeoMetaInput = {
     ogType: 'website',
     ogUrl: () => canonicalUrl.value,
-    ogLocale: locale,
+    ogLocale: () => i18n.locale.value,
     ogSiteName: siteConfig.name,
   }
   if (siteConfig.description)

src/runtime/nuxt/plugin/defaults.ts

@@ -1,12 +1,22 @@
-import { applyDefaults as setup } from '../logic/applyDefaults'
+import { applyDefaults } from '../logic/applyDefaults'
 import {
   defineNuxtPlugin,
+  ref,
+  useSiteConfig,
 } from '#imports'
 
 export default defineNuxtPlugin({
   name: 'nuxt-seo:defaults',
+  order: 999,
   env: {
     islands: false,
   },
-  setup,
+  setup() {
+    const siteConfig = useSiteConfig()
+    const locale = ref(siteConfig.currentLocale || siteConfig.defaultLocale)
+    applyDefaults({
+      locale,
+    })
+    // TODO reactive locale, need upstream fixes to nuxt-site-config
+  },
 })

src/runtime/nuxt/plugin/defaultsWaitI18n.ts

@@ -0,0 +1,24 @@
+import { applyDefaults } from '../logic/applyDefaults'
+import { defineNuxtPlugin, ref } from '#imports'
+
+export default defineNuxtPlugin({
+  name: 'nuxt-seo:defaults',
+  env: {
+    islands: false,
+  },
+  // we need to wait for the i18n plugin to run first
+  // @ts-expect-error dynamic
+  dependsOn: import.meta.server
+    ? [
+        'nuxt-site-config:i18n',
+      ]
+    : [],
+  setup(nuxtApp) {
+    const locale = ref(nuxtApp.$i18n!.locale.value)
+    // @ts-expect-error untyped
+    nuxtApp.hook('i18n:localeSwitched', ({ newLocale }) => {
+      locale.value = newLocale
+    })
+    applyDefaults({ locale })
+  },
+})

test/fixtures/i18n/nuxt.config.ts

@@ -7,16 +7,19 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     '@nuxt/ui',
   ],
+
   site: {
     url: 'https://nuxtseo.com',
     debug: true,
   },
+
   nitro: {
     prerender: {
       failOnError: false,
       ignore: ['/'],
     },
   },
+
   i18n: {
     baseUrl: 'https://nuxtseo.com',
     defaultLocale: 'en',
@@ -40,4 +43,6 @@ export default defineNuxtConfig({
       },
     ],
   },
+
+  compatibilityDate: '2024-08-07',
 })