Pause DOM Rendering

Pausing the DOM rendering is useful for when you want to ensure your page is fully loaded before updating tags.

In Vue, this is especially useful when you're using <Suspense>. You can use vue-router's hook system to pause DOM rendering.

const head = createHead()
let pauseDOMUpdates = true
head.hooks.hook('dom:beforeRender', (context) => {
  context.shouldRender = !pauseDOMUpdates
})
// start pausing DOM updates when route changes (trigger immediately)
useRouter().beforeEach(() => {
  pauseDOMUpdates = true
})
// watch for new route before unpausing dom updates (triggered after suspense resolved)
useRouter().afterEach(() => {
  // only if we have paused (clicking on a link to the current route triggers this)
  if (pauseDOMUpdates) {
    pauseDOMUpdates = false
    head.updateDOM()
  }
})
Edit this page on GitHub