fix(nuxt): trigger immediate DOM update on page:finish (#22566)

harlan-zw · web-flow · commit 89ad88bd3853 · 2023-08-11T11:24:23.000+01:00
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -60,6 +60,7 @@
     "@nuxt/vite-builder": "workspace:../vite",
     "@unhead/ssr": "^1.2.2",
     "@unhead/vue": "^1.2.2",
+    "@unhead/dom": "^1.2.2",
     "@vue/shared": "^3.3.4",
     "acorn": "8.10.0",
     "c12": "^1.4.2",
diff --git a/packages/nuxt/src/head/runtime/plugins/unhead.ts b/packages/nuxt/src/head/runtime/plugins/unhead.ts
@@ -1,4 +1,5 @@
 import { createHead as createClientHead } from '@unhead/vue'
+import { renderDOMHead } from '@unhead/dom'
 import { defineNuxtPlugin } from '#app/nuxt'
 
 export default defineNuxtPlugin({
@@ -11,17 +12,16 @@ export default defineNuxtPlugin({
     if (import.meta.client) {
       // pause dom updates until page is ready and between page transitions
       let pauseDOMUpdates = true
-      const unpauseDom = () => {
+      const syncHead = async () => {
         pauseDOMUpdates = false
-        // trigger the debounced DOM update
-        head.hooks.callHook('entries:updated', head)
+        await renderDOMHead(head)
       }
       head.hooks.hook('dom:beforeRender', (context) => { context.shouldRender = !pauseDOMUpdates })
       nuxtApp.hooks.hook('page:start', () => { pauseDOMUpdates = true })
       // wait for new page before unpausing dom updates (triggered after suspense resolved)
-      nuxtApp.hooks.hook('page:finish', unpauseDom)
+      nuxtApp.hooks.hook('page:finish', syncHead)
       // unpause the DOM once the mount suspense is resolved
-      nuxtApp.hooks.hook('app:suspense:resolve', unpauseDom)
+      nuxtApp.hooks.hook('app:suspense:resolve', syncHead)
     }
   }
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
