Pause DOM Rendering · Unhead

[Unhead Home](https://unhead.unjs.io/ "Home")

- [Docs](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview)
- [Tools](https://unhead.unjs.io/tools)
- [Learn](https://unhead.unjs.io/learn/guides/what-is-capo)

[Releases](https://unhead.unjs.io/releases)

Search…```k`` /`

[Unhead on GitHub](https://github.com/unjs/unhead)

[User Guides](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview)

[API](https://unhead.unjs.io/docs/vue/head/api/get-started/overview)

[Releases](https://unhead.unjs.io/docs/vue/releases/v3)

Vue

- [Switch to Vue](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation)
- [Switch to TypeScript](https://unhead.unjs.io/docs/typescript/head/guides/get-started/installation)
- [Switch to React](https://unhead.unjs.io/docs/react/head/guides/get-started/installation)
- [Switch to Svelte](https://unhead.unjs.io/docs/svelte/head/guides/get-started/installation)
- [Switch to Solid.js](https://unhead.unjs.io/docs/solid-js/head/guides/get-started/installation)
- [Switch to Angular](https://unhead.unjs.io/docs/angular/head/guides/get-started/installation)
- [Switch to Nuxt](https://unhead.unjs.io/docs/nuxt/head/guides/get-started/installation)

v3 (stable)

Head

- [Discord Support](https://discord.com/invite/275MBUBvgP)
- [Vue Playground](https://stackblitz.com/edit/github-1ftqrmwn)

- Get Started
  - [Overview](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview)
  - [Introduction to Unhead](https://unhead.unjs.io/docs/vue/head/guides/get-started/intro-to-unhead)
  - [Starter Recipes](https://unhead.unjs.io/docs/vue/head/guides/get-started/starter-recipes)
  - [Installation](https://unhead.unjs.io/docs/vue/head/guides/get-started/installation)
  - [Upgrade Guide](https://unhead.unjs.io/docs/vue/head/guides/get-started/migration)
- Core Concepts
  - [Titles & Title Templates](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles)
  - [Tag Sorting & Placement](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/positions)
  - [Class & Style Attributes](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/class-attr)
  - [Inline Style & Scripts](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/inner-content)
  - [Tag Deduplication](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/handling-duplicates)
  - [DOM Event Handling](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling)
  - [Script Loading](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/loading-scripts)
  - [Context & Reactivity](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/reactivity-and-context)
  - [<Head> Component](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/components)
  - [Options API](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/options-api)
  - [Pause DOM Rendering](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/pausing-dom-rendering)
  - [StreamingNew](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming)
- Build Plugins
  - [Overview](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/overview)
  - [Tree-Shaking](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/tree-shaking)
  - [useSeoMeta Transform](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/seo-meta-transform)
  - [Minify Transform](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/minify-transform)
  - [Devtools](https://unhead.unjs.io/docs/vue/head/guides/build-plugins/devtools)
- Plugins
  - [Template Params](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params)
  - [Alias Sorting](https://unhead.unjs.io/docs/vue/head/guides/plugins/alias-sorting)
  - [Canonical Plugin](https://unhead.unjs.io/docs/vue/head/guides/plugins/canonical)
  - [Infer SEO Meta](https://unhead.unjs.io/docs/vue/head/guides/plugins/infer-seo-meta-tags)
  - [Minify](https://unhead.unjs.io/docs/vue/head/guides/plugins/minify)
  - [Validate](https://unhead.unjs.io/docs/vue/head/guides/plugins/validate)

Core Concepts

# Pause DOM Rendering

[Copy for LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.vue/head/guides/1.core-concepts/4.pausing-dom-rendering.md)

Last updated Jan 19, 2026 by [Harlan Wilton](https://github.com/harlan-zw) in [docs: sync](https://github.com/unjs/unhead/commit/d2f86454774aa60706628b46a850653e1e4d56d9).

On this page

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

Vue

```
import { createHead, renderDOMHead } from 'unhead/client'

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 { createHead } from '@unhead/vue'
import { renderDOMHead } from 'unhead/client'
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)
  }
})
```

[Edit this page](https://github.com/unjs/unhead/edit/main/docs/0.vue/head/guides/1.core-concepts/4.pausing-dom-rendering.md)

[Markdown For LLMs](https://raw.githubusercontent.com/unjs/unhead/refs/heads/main/docs/0.vue/head/guides/1.core-concepts/4.pausing-dom-rendering.md)

Did this page help you?

[Options API Use the head() option in Vue components with VueHeadMixin. Access component data and computed properties for reactive head tags.](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/options-api) [Streaming Stream head tags as async components resolve during Vue SSR](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming)

[GitHub](https://github.com/unjs/unhead) [ Discord](https://discord.com/invite/275MBUBvgP)

[ /llms.txt](https://unhead.unjs.io/llms.txt)

[Part of the UnJS ecosystem](https://unjs.io/)

### Head Management

- [Getting Started](https://unhead.unjs.io/docs/vue/head/guides/get-started/overview)
- [useHead](https://unhead.unjs.io/docs/vue/head/api/composables/use-head)
- [useSeoMeta](https://unhead.unjs.io/docs/vue/head/api/composables/use-seo-meta)
- [useHeadSafe](https://unhead.unjs.io/docs/vue/head/api/composables/use-head-safe)
- [useScript](https://unhead.unjs.io/docs/vue/head/api/composables/use-script)

### Schema.org

- [Getting Started](https://unhead.unjs.io/docs/vue/schema-org/guides/get-started/overview)
- [useSchemaOrg](https://unhead.unjs.io/docs/vue/schema-org/api/composables/use-schema-org)
- [Nodes](https://unhead.unjs.io/docs/vue/schema-org/guides/core-concepts/nodes)
- [Recipes](https://unhead.unjs.io/docs/vue/schema-org/guides/recipes/identity)

### Guides

- [Titles](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/titles)
- [Streaming SSR](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/streaming)
- [DOM Events](https://unhead.unjs.io/docs/vue/head/guides/core-concepts/dom-event-handling)
- [Plugins](https://unhead.unjs.io/docs/vue/head/guides/plugins/template-params)

### Tools

- [Meta Tag Generator](https://unhead.unjs.io/tools/meta-tag-generator)
- [OG Image Generator](https://unhead.unjs.io/tools/og-image-generator)
- [Schema.org Generator](https://unhead.unjs.io/tools/schema-generator)
- [Capo.js Analyzer](https://unhead.unjs.io/tools/capo-analyzer)

### Articles

- [What is Capo.js?](https://unhead.unjs.io/learn/guides/what-is-capo)

### Research

- [State of <head> in 2026](https://unhead.unjs.io/learn/research/state-of-head-2026)
- [Streaming Head Performance](https://unhead.unjs.io/learn/research/streaming-head-performance)
- [Capo.js Performance Research](https://unhead.unjs.io/learn/research/capo-performance-research)

Copyright © 2025-2026 Harlan Wilton - [MIT License](https://github.com/unjs/unhead/blob/main/license)