Pause DOM Rendering

import { createHead } from 'unhead/client'

const head = createHead()

let pauseDOMUpdates = true
head.hooks.hook('dom:beforeRender', (context) => {
  context.shouldRender = !pauseDOMUpdates
})

// When your app is ready
loadPage().then(() => {
  pauseDOMUpdates = false
  // triggers the dom update
  head.render()
})

import { injectHead } from '@unhead/vue'
import { onScopeDispose } from 'vue'
import { useRouter } from 'vue-router'

export function usePausedHeadUpdates() {
  // Call this composable during component setup so both injections are active.
  const head = injectHead()
  const router = useRouter()

  let pauseDOMUpdates = true
  const removeHook = head.hooks.hook('dom:beforeRender', (context) => {
    context.shouldRender = !pauseDOMUpdates
  })

  // Start pausing DOM updates when a route changes (trigger immediately).
  const removeBeforeEach = router.beforeEach(() => {
    pauseDOMUpdates = true
  })
  // Resume after the new route and its Suspense boundary have resolved.
  const removeAfterEach = router.afterEach(() => {
    if (pauseDOMUpdates) {
      pauseDOMUpdates = false
      head.render()
    }
  })

  onScopeDispose(() => {
    removeHook()
    removeBeforeEach()
    removeAfterEach()
  })
}