Get next tick within Vue3 setup script

July 26, 2022

How do you use the next tick within the setup script in vue3?

<script setup>


const msg = 'Hello!'

this.$nextTick(() => {
   console.log("next tick ... do something")
});

</script>

<template>
  <p>{{ msg }}</p>
</template>

I’ve used multiple different methods but I can’t find one that works outside of the normal script tags.

Another method I tried was.

import Vue from "vue";

Vue.nextTick(() => {});

>Solution :

This is how you can use nextTick() in Vue 3.

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

const count = ref(0)

async function increment() {
  count.value++

  // DOM not yet updated
  console.log(document.getElementById('counter').textContent) // 0

  await nextTick()
  // DOM is now updated
  console.log(document.getElementById('counter').textContent) // 1
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

Here you can find more informations: https://vuejs.org/api/general.html#nexttick