recipes

Pause DOM Rendering

Learn how to pause DOM rendering with Unhead.

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>.

Universal
import { createHead } from 'unhead'
import { renderDOMHead } from '@unhead/dom'
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
  renderDOMHead(head)
})