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 { 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)
})
import { renderDOMHead } from '@unhead/dom'
import { createHead } from '@unhead/vue'
import { useRouter } from 'vue-router'
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
renderDOMHead(head)
}
})
Did this page help you?