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

Universal

import { renderDOMHead } from '@unhead/dom'
import { createHead } from 'unhead'

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)
})

Critical Tags

Add tags that are critical to your page load.

Create Head

How to create your Unhead instance.