$nextTick Magic Method

Wait until Alpine has finished rendering – similar to Vue’s nextTick.

What is $nextTick?

$nextTick returns a promise that resolves after Alpine has completed all pending DOM updates triggered by reactive changes. It's extremely useful when you need to interact with the DOM right after a state change.

When to Use

Use $nextTick whenever you change data and then need to perform an action that depends on the updated DOM – focusing an input that just appeared, measuring an element that was just shown, or getting updated scroll positions.

Basic Example

Code

<div x-data="{ showInput: false }">
  <button @click="showInput = true; await $nextTick(); $refs.myInput.focus()">Edit</button>
  <input x-show="showInput" x-ref="myInput" type="text">
</div>

Without $nextTick

If you forget to use $nextTick, the DOM element might not exist yet when you try to access it, leading to errors. $nextTick ensures the DOM is ready.

💡 Tip

You can use $nextTick inside any Alpine expression, even in x-init or x-effect.

Is $nextTick the same as Vue's nextTick?

Yes, the concept is identical. Both wait until the reactive framework has finished updating the DOM.

Helpful? Share this page!↑ Back to top