refactor(nuxt): upgrade to v3.16.0

maevsi · Mar 10, 2025 · 7396082 · 7396082
1 parent b77edef
commit 7396082
Show file tree

Hide file tree

Showing 6 changed files with 985 additions and 1,252 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/.config/nuxt.ts b/src/.config/nuxt.ts
@@ -35,7 +35,6 @@ export default defineNuxtConfig({
         lang: 'en', // fallback data to prevent invalid html at generation
       },
       title: SITE_NAME,
-      titleTemplate: '%s', // fully set in `composables/useAppLayout.ts`
     },
   },
   compatibilityDate: '2024-04-03',
@@ -223,6 +222,7 @@ export default defineNuxtConfig({
         '@uppy/core',
         '@uppy/tus',
         '@vuelidate/core',
+        '@vueuse/core',
         'chart.js',
         'clipboardy',
         'clsx',

diff --git a/src/app/app.config.ts b/src/app/app.config.ts
@@ -1,5 +1,3 @@
-import type { useServerSeoMeta } from '@unhead/vue'
-
 export default defineAppConfig({
   ui: {
     // primary: 'blue',

diff --git a/src/app/app.vue b/src/app/app.vue
@@ -118,7 +118,6 @@ defineOgImageComponent(
 )
 useAppLayout()
 await useAuth()
-useFavicons()
 usePolyfills()
 useSchemaOrg([
   defineWebSite({

diff --git a/src/app/composables/head.ts b/src/app/composables/head.ts
@@ -4,102 +4,95 @@ export const useAppLayout = () => {
   const appConfig = useAppConfig()
   const siteConfig = useSiteConfig()
 
-  useServerHeadSafe({
-    ...useLocaleHead().value,
-    bodyAttrs: {
-      class:
-        'bg-(--semantic-base-background) text-(--semantic-base-text-primary)',
-    },
-  })
+  if (import.meta.server) {
+    useHeadSafe({
+      bodyAttrs: {
+        class:
+          'bg-(--semantic-base-background) text-(--semantic-base-text-primary)',
+      },
+      link: [
+        {
+          color: appConfig.vio.themeColor,
+          href: `/assets/static/favicon/safari-pinned-tab.svg?v=${CACHE_VERSION}`,
+          rel: 'mask-icon',
+        },
+        {
+          href: `/favicon.ico?v=${CACHE_VERSION}`,
+          rel: 'shortcut icon',
+        },
+      ],
+    })
 
-  // adding `Server` leads incorrect title template on hydration
+    useSeoMeta({
+      ...(appConfig.vio.themeColor
+        ? {
+            msapplicationTileColor: appConfig.vio.themeColor,
+            themeColor: appConfig.vio.themeColor,
+          }
+        : {}),
+      ...(appConfig.vio.seoMeta || {}),
+    })
+  }
+
+  // running server-side only leads to incorrect title template on hydration
   useSeoMeta({
+    ...useLocaleHead().value,
     titleTemplate: (title) =>
       TITLE_TEMPLATE({
         siteName: siteConfig.name,
         title,
       }),
   })
-
-  if (appConfig.vio.seoMeta) {
-    useServerSeoMeta(appConfig.vio.seoMeta)
-  }
-
-  if (appConfig.vio.themeColor) {
-    useServerSeoMeta({
-      msapplicationTileColor: appConfig.vio.themeColor,
-      themeColor: appConfig.vio.themeColor,
-    })
-  }
-}
-
-export const useFavicons = () => {
-  const appConfig = useAppConfig()
-
-  useServerHeadSafe({
-    link: [
-      {
-        color: appConfig.vio.themeColor,
-        href: `/assets/static/favicon/safari-pinned-tab.svg?v=${CACHE_VERSION}`,
-        rel: 'mask-icon',
-      },
-      {
-        href: `/favicon.ico?v=${CACHE_VERSION}`,
-        rel: 'shortcut icon',
-      },
-    ],
-  })
 }
 
 export const useHeadDefault = ({
   extension,
   title,
 }: {
-  extension?: Parameters<typeof useServerSeoMeta>[0]
+  extension?: Parameters<typeof useSeoMeta>[0]
   title: string | ComputedRef<string>
 }) => {
   const siteConfig = useSiteConfig()
   const { t } = useI18n()
 
-  const defaults: Parameters<typeof useServerSeoMeta>[0] = {
-    description: t('globalSeoSiteDescription'), // TODO: remove (https://github.com/harlan-zw/nuxt-site-config/issues/11)
+  const defaults: Parameters<typeof useSeoMeta>[0] = {
     msapplicationConfig: `/assets/static/favicon/browserconfig.xml?v=${CACHE_VERSION}`,
     title,
     twitterDescription: t('globalSeoSiteDescription'),
-    twitterTitle: ref(
-      TITLE_TEMPLATE({
-        siteName: siteConfig.name,
-        title: toValue(title),
-      }),
-    ), // TODO: remove `ref`
+    twitterTitle: TITLE_TEMPLATE({
+      siteName: siteConfig.name,
+      title: toValue(title),
+    }),
   }
 
-  useSeoMeta(defu(extension, defaults)) // TODO: use `useServerSeoMeta`
+  useSeoMeta(defu(extension, defaults))
 }
 
+const POLYFILLS_URL = `https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=${POLYFILLS.join(
+  '%2C',
+)}&flags=gated`
+
 export const usePolyfills = () => {
   if (!POLYFILLS.length) return
 
-  const polyfillsUrl = `https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=${POLYFILLS.join(
-    '%2C',
-  )}&flags=gated`
-
-  useServerHead({
-    link: [
-      {
-        rel: 'preload',
-        href: polyfillsUrl,
-        crossorigin: 'anonymous',
-        as: 'script',
-        'data-testid': 'polyfill-preload',
-      },
-    ],
-    script: [
-      {
-        src: polyfillsUrl,
-        crossorigin: 'anonymous',
-        'data-testid': 'polyfill-script',
-      },
-    ],
-  })
+  if (import.meta.server) {
+    useHead({
+      link: [
+        {
+          rel: 'preload',
+          href: POLYFILLS_URL,
+          crossorigin: 'anonymous',
+          as: 'script',
+          'data-testid': 'polyfill-preload',
+        },
+      ],
+      script: [
+        {
+          src: POLYFILLS_URL,
+          crossorigin: 'anonymous',
+          'data-testid': 'polyfill-script',
+        },
+      ],
+    })
+  }
 }
diff --git a/src/package.json b/src/package.json
@@ -30,7 +30,7 @@
     "@nuxt/scripts": "0.11.1",
     "@nuxtjs/html-validator": "2.1.0",
     "@nuxtjs/i18n": "9.3.1",
-    "@nuxtjs/seo": "2.2.0",
+    "@nuxtjs/seo": "3.0.0-beta.1",
     "@nuxtjs/turnstile": "0.9.14",
     "@pinia/nuxt": "0.10.1",
     "@sentry/nuxt": "9.5.0",
@@ -53,7 +53,6 @@
     "@types/nodemailer": "6.4.17",
     "@types/pg": "8.11.11",
     "@types/seedrandom": "3.0.8",
-    "@unhead/vue": "1.11.20",
     "@uppy/core": "4.4.2",
     "@uppy/tus": "4.2.2",
     "@urql/core": "5.1.1",
@@ -128,7 +127,6 @@
     "sweetalert2": "11.17.2",
     "tailwind-merge": "3.0.2",
     "tailwindcss": "4.0.12",
-    "unhead": "1.11.20",
     "unplugin-icons": "22.1.0",
     "unplugin-vue-components": "28.4.1",
     "unplugin-vue-router": "0.12.0",