fix: ensure defaults are applied after i18n site config

Fixes #199
harlan-zw · Mar 11, 2024 · 31f0d70 · 31f0d70
1 parent 767962c
commit 31f0d70
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 59 deletions.
diff --git a/src/module.ts b/src/module.ts
@@ -106,9 +106,22 @@ export default defineNuxtModule<ModuleOptions>({
       await installModule(await resolvePath(module))
 
     if (config.automaticDefaults) {
-      addPlugin({
-        src: resolve('./runtime/nuxt/plugin/defaults'),
-      })
+      // 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',
+        })
+      }
+      else {
+        addPlugin({
+          src: resolve(`./runtime/nuxt/plugin/defaults`),
+        })
+      }
     }
     if (config.fallbackTitle) {
       addPlugin({

diff --git a/src/runtime/nuxt/logic/applyDefaults.ts b/src/runtime/nuxt/logic/applyDefaults.ts
@@ -0,0 +1,59 @@
+import type { UseHeadOptions, UseSeoMetaInput } from '@unhead/vue'
+import {
+  computed,
+  createSitePathResolver,
+  useHead,
+  useRoute,
+  useSeoMeta,
+  useServerHead,
+  useSiteConfig,
+} from '#imports'
+
+export function applyDefaults() {
+  // get the head instance
+  const siteConfig = useSiteConfig()
+  const route = useRoute()
+  const resolveUrl = createSitePathResolver({ withBase: true, absolute: true })
+  const canonicalUrl = computed<string>(() => resolveUrl(route.path || '/').value || route.path)
+
+  const minimalPriority: UseHeadOptions = {
+    // give nuxt.config values higher priority
+    tagPriority: 101,
+  }
+
+  // needs higher priority
+  useHead({
+    link: [{ rel: 'canonical', href: () => canonicalUrl.value }],
+  })
+  const locale = siteConfig.currentLocale || siteConfig.defaultLocale
+  if (locale) {
+    useServerHead({
+      htmlAttrs: { lang: locale },
+    })
+  }
+
+  // TODO support SPA
+  useHead({
+    templateParams: { site: siteConfig, siteName: siteConfig.name || '' },
+    titleTemplate: '%s %separator %siteName',
+  }, minimalPriority)
+
+  const seoMeta: UseSeoMetaInput = {
+    ogType: 'website',
+    ogUrl: () => canonicalUrl.value,
+    ogLocale: locale,
+    ogSiteName: siteConfig.name,
+  }
+  if (siteConfig.description)
+    seoMeta.description = siteConfig.description
+  if (siteConfig.twitter) {
+    // id must have the @ in it
+    const id = siteConfig.twitter.startsWith('@')
+      ? siteConfig.twitter
+      : `@${siteConfig.twitter}`
+    seoMeta.twitterCreator = id
+    seoMeta.twitterSite = id
+  }
+  // TODO server only for some tags
+  useSeoMeta(seoMeta, minimalPriority)
+}
diff --git a/src/runtime/nuxt/plugin/defaults.ts b/src/runtime/nuxt/plugin/defaults.ts
@@ -1,66 +1,12 @@
-import type { UseHeadOptions, UseSeoMetaInput } from '@unhead/vue'
+import { applyDefaults as setup } from '../logic/applyDefaults'
 import {
-  computed,
-  createSitePathResolver,
   defineNuxtPlugin,
-  useHead,
-  useRoute,
-  useSeoMeta,
-  useServerHead,
-  useSiteConfig,
 } from '#imports'
 
 export default defineNuxtPlugin({
   name: 'nuxt-seo:defaults',
   env: {
     islands: false,
   },
-  setup() {
-    // get the head instance
-    const siteConfig = useSiteConfig()
-    const route = useRoute()
-    const resolveUrl = createSitePathResolver({ withBase: true, absolute: true })
-    const canonicalUrl = computed<string>(() => resolveUrl(route.path || '/').value || route.path)
-
-    const minimalPriority: UseHeadOptions = {
-      // give nuxt.config values higher priority
-      tagPriority: 101,
-    }
-
-    // needs higher priority
-    useHead({
-      link: [{ rel: 'canonical', href: () => canonicalUrl.value }],
-    })
-    const locale = siteConfig.currentLocale || siteConfig.defaultLocale
-    if (locale) {
-      useServerHead({
-        htmlAttrs: { lang: locale },
-      })
-    }
-
-    // TODO support SPA
-    useHead({
-      templateParams: { site: siteConfig, siteName: siteConfig.name || '' },
-      titleTemplate: '%s %separator %siteName',
-    }, minimalPriority)
-
-    const seoMeta: UseSeoMetaInput = {
-      ogType: 'website',
-      ogUrl: () => canonicalUrl.value,
-      ogLocale: locale,
-      ogSiteName: siteConfig.name,
-    }
-    if (siteConfig.description)
-      seoMeta.description = siteConfig.description
-    if (siteConfig.twitter) {
-      // id must have the @ in it
-      const id = siteConfig.twitter.startsWith('@')
-        ? siteConfig.twitter
-        : `@${siteConfig.twitter}`
-      seoMeta.twitterCreator = id
-      seoMeta.twitterSite = id
-    }
-    // TODO server only for some tags
-    useSeoMeta(seoMeta, minimalPriority)
-  },
+  setup,
 })
diff --git a/src/runtime/nuxt/plugin/defaultsWaitI18n.server.ts b/src/runtime/nuxt/plugin/defaultsWaitI18n.server.ts
@@ -0,0 +1,15 @@
+import { applyDefaults as setup } from '../logic/applyDefaults'
+import { defineNuxtPlugin } from '#imports'
+
+export default defineNuxtPlugin({
+  name: 'nuxt-seo:defaults',
+  env: {
+    islands: false,
+  },
+  // we need to wait for the i18n plugin to run first
+  dependsOn: [
+    // @ts-expect-error dynamic
+    'nuxt-site-config:i18n',
+  ],
+  setup,
+})
diff --git a/test/fixtures/i18n/locales/en.ts b/test/fixtures/i18n/locales/en.ts
@@ -1,3 +1,6 @@
 export default {
   welcome: 'Welcome',
+  nuxtSiteConfig: {
+    description: 'en description',
+  },
 }
diff --git a/test/fixtures/i18n/locales/es.ts b/test/fixtures/i18n/locales/es.ts
@@ -1,3 +1,6 @@
 export default {
   welcome: 'ようこそ',
+  nuxtSiteConfig: {
+    description: 'es description',
+  },
 }
diff --git a/test/fixtures/i18n/locales/fr.ts b/test/fixtures/i18n/locales/fr.ts
@@ -1,3 +1,7 @@
 export default {
   welcome: 'ようこそ',
+  nuxtSiteConfig: {
+    name: 'fr name',
+    description: 'fr description',
+  },
 }
diff --git a/test/fixtures/i18n/nuxt.config.ts b/test/fixtures/i18n/nuxt.config.ts
@@ -10,6 +10,7 @@ export default defineNuxtConfig({
   ],
   site: {
     url: 'https://nuxtseo.com',
+    debug: true,
   },
   nitro: {
     prerender: {
@@ -21,18 +22,22 @@ export default defineNuxtConfig({
     baseUrl: 'https://nuxtseo.com',
     defaultLocale: 'en',
     strategy: 'prefix_except_default',
+    langDir: 'locales/',
     locales: [
       {
         code: 'en',
         iso: 'en-US',
+        file: 'en.ts',
       },
       {
         code: 'es',
         iso: 'es-ES',
+        file: 'es.ts',
       },
       {
         code: 'fr',
         iso: 'fr-FR',
+        file: 'fr.ts',
       },
     ],
   },