nextTick() Wait for the DOM Update
Last updated: 2026-10-22
nextTick() Wait for the DOM Update
nextTick() returns a Promise resolving after the next DOM flush — use it to read fresh DOM right after changing state.
| Group | Global API |
|---|---|
| Kind | API |
| Scope | Global |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
await nextTick()
console.log(el.value.textContent) // already fresh⚙️ Arguments
| callback? | An optional callback (prefer await in new code) |
|---|
Returns：A Promise resolving after the DOM updates
▶ Example
Edit the code below and see the live result:
Output：
Clicking confirms the DOM already shows the new value.💡 Key Points
ℹ️ Note Vue batches DOM updates asynchronously — that is why this exists.
💡 Tip Multiple changes in one tick flush once.
⚠️ Warning Prefer watchPostEffect for continuous syncing.
🏷️ Related Global API
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why does the DOM lag behind my change?
A Updates are batched into a microtask — await nextTick.
Q How is it different from setTimeout?
A nextTick runs earlier and deterministically.
Q Same helper in the Composition API?
A Yes — it is style-agnostic.
