diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index 3e2bc83b9a..3ebada2cb9 100644 --- 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 index 59d32b7092..ece6af9f2a 100644 --- 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 index ce3dc61251..b7e23ac148 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -364,6 +364,9 @@ importers: '@types/node': specifier: ^14.18.0 || >=16.10.0 version: 18.17.4 + '@unhead/dom': + specifier: ^1.2.2 + version: 1.2.2 '@unhead/ssr': specifier: ^1.2.2 version: 1.2.2 @@ -7189,7 +7192,7 @@ packages: graceful-fs: 4.2.11 /jstransformer@1.0.0: - resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==} + resolution: {integrity: sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=} dependencies: is-promise: 2.2.2 promise: 7.3.1 @@ -10320,7 +10323,7 @@ packages: engines: {node: '>=0.6'} /token-stream@1.0.0: - resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==} + resolution: {integrity: sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=} dev: false /totalist@1.1.0: