What is nexttick in Vue.js?

What is nextTick?

nextTick is a utility that lets you wait until Vue has finished updating the DOM after a reactive state change. Vue batches DOM updates — nextTick runs your code after the next DOM update cycle.

The Problem

vue

<script setup>
import { ref } from 'vue'

const message = ref('Hello')

function updateMessage() {
  message.value = 'Updated!'

  // ❌ DOM hasn't updated yet!
  console.log(document.getElementById('msg')?.textContent)
  // Still shows: "Hello"
}
</script>

<template>
  <p id="msg">{{ message }}</p>
  <button @click="updateMessage">Update</button>
</template>

The Solution: nextTick

vue

<script setup>
import { ref, nextTick } from 'vue'

const message = ref('Hello')

async function updateMessage() {
  message.value = 'Updated!'

  // ✅ Wait for DOM update
  await nextTick()

  console.log(document.getElementById('msg')?.textContent)
  // Shows: "Updated!"
}
</script>

Callback Syntax

vue

<script setup>
import { nextTick } from 'vue'

function doSomething() {
  // Change state...
  count.value++

  // Callback runs after DOM update
  nextTick(() => {
    // DOM is now updated
    scrollToBottom()
  })
}
</script>

Common Use Cases

Auto-scroll to Bottom

vue

<script setup>
import { ref, nextTick } from 'vue'

const messages = ref<string[]>([])
const chatContainer = ref<HTMLElement | null>(null)

async function addMessage(text: string) {
  messages.value.push(text)

  await nextTick()
  // Now the new message is in the DOM
  chatContainer.value?.scrollTo({
    top: chatContainer.value.scrollHeight,
    behavior: 'smooth'
  })
}
</script>

Focus After Showing Input

vue

<script setup>
import { ref, nextTick } from 'vue'

const isEditing = ref(false)
const inputRef = ref<HTMLInputElement | null>(null)

async function startEditing() {
  isEditing.value = true

  await nextTick()
  // Input is now in the DOM
  inputRef.value?.focus()
}
</script>

<template>
  <span v-if="!isEditing" @click="startEditing">{{ text }}</span>
  <input v-else ref="inputRef" v-model="text" />
</template>

Measure Element After Update

vue

<script setup>
import { ref, nextTick, watch } from 'vue'

const items = ref([1, 2, 3])
const listRef = ref<HTMLElement | null>(null)

watch(items, async () => {
  await nextTick()
  // Measure the updated list
  const height = listRef.value?.offsetHeight
  console.log('List height:', height)
}, { deep: true })
</script>

How Vue Batches Updates

typescript

// Vue batches multiple state changes into one DOM update
count.value = 1  // Queued
count.value = 2  // Queued (overwrites previous)
count.value = 3  // Queued (overwrites previous)
// DOM updates ONCE with count = 3

await nextTick()
// DOM is now updated

Important:

nextTick lets you run code after Vue has updated the DOM. Use it when you need to read DOM state, focus elements, scroll, or measure dimensions right after a reactive change. It returns a Promise, so you can await it. Most commonly needed for: auto-scrolling, focusing inputs after conditional rendering, and measuring element sizes.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems