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

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