`nextTick()`

Waits until the next DOM update flush completes.

Since Vue 3.0 Spec ↗

Syntax

nextTick(callback?): Promise<void>

Parameters

Name	Type	Required	Description
`callback`	`function`	No	Optional function run after the DOM updates.

Returns

Promise<void> — Resolves after the DOM has been patched.

Examples

<script setup lang="ts">
import { ref, nextTick } from 'vue';

const open = ref(false);
const box = ref<HTMLElement | null>(null);

async function show() {
  open.value = true;
  await nextTick();
  box.value?.focus(); // DOM is now updated
}
</script>

<template>
  <div v-if="open" ref="box" tabindex="-1">Panel</div>
</template>

Notes

Vue batches reactive changes and updates the DOM asynchronously. Await nextTick (or pass a callback) when you need to read or act on the freshly rendered DOM after a state change, such as measuring or focusing an element.