From 8ffbf22c219ab9de556d0faeda1f50d68a40bedd Mon Sep 17 00:00:00 2001
From: Alex Liu <dsa1314@gmail.com>
Date: Tue, 17 Feb 2026 12:03:54 +0800
Subject: [PATCH 1/2] docs(vue-virtual): use `onUpdated` for `measureElement`
 to prevent scroll jumping

---
 .../components/ColumnVirtualizerDynamic.vue   | 19 ++++++++++---------
 .../src/components/GridVirtualizerDynamic.vue | 19 ++++++++++---------
 .../src/components/RowVirtualizerDynamic.vue  | 19 ++++++++++---------
 .../RowVirtualizerDynamicWindow.vue           | 19 ++++++++++---------
 4 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue b/examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue
index 2006d1fa6..926a14ab2 100644
--- a/examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue
+++ b/examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue
@@ -15,7 +15,7 @@
         v-for="virtualColumn in virtualColumns"
         :key="virtualColumn.key"
         :data-index="virtualColumn.index"
-        :ref="measureElement"
+        ref="virtualItemEls"
         :class="virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
         :style="{
           position: 'absolute',
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, type VNodeRef } from 'vue'
+import { ref, computed, onMounted, onUpdated, shallowRef } from 'vue'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { generateSentences } from './utils'
 
@@ -54,13 +54,14 @@ const virtualColumns = computed(() => columnVirtualizer.value.getVirtualItems())
 
 const totalSize = computed(() => columnVirtualizer.value.getTotalSize())
 
-const measureElement = (el) => {
-  if (!el) {
-    return
-  }
+const virtualItemEls = shallowRef([])
 
-  columnVirtualizer.value.measureElement(el)
-
-  return undefined
+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) columnVirtualizer.value.measureElement(el)
+  })
 }
+
+onMounted(measureAll)
+onUpdated(measureAll)
 </script>
diff --git a/examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue b/examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue
index 98245e346..282cafcbd 100644
--- a/examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue
+++ b/examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue
@@ -9,7 +9,7 @@
       <template v-for="virtualRow in virtualRows" :key="virtualRow.key">
         <div
           :data-index="virtualRow.index"
-          :ref="measureElement"
+          ref="virtualItemEls"
           :style="{
             position: 'absolute',
             top: 0,
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, type VNodeRef } from 'vue'
+import { ref, computed, onMounted, onUpdated, shallowRef } from 'vue'
 import { useWindowVirtualizer, useVirtualizer } from '@tanstack/vue-virtual'
 import { generateData, generateColumns } from './utils'
 
@@ -103,13 +103,14 @@ const width = computed(() => {
     : [0, 0]
 })
 
-const measureElement = (el) => {
-  if (!el) {
-    return
-  }
-
-  rowVirtualizer.value.measureElement(el)
+const virtualItemEls = shallowRef([])
 
-  return undefined
+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) rowVirtualizer.value.measureElement(el)
+  })
 }
+
+onMounted(measureAll)
+onUpdated(measureAll)
 </script>
diff --git a/examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue b/examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue
index 97bd7538d..564a67591 100644
--- a/examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue
+++ b/examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue
@@ -35,7 +35,7 @@
             v-for="virtualRow in virtualRows"
             :key="virtualRow.key"
             :data-index="virtualRow.index"
-            :ref="measureElement"
+            ref="virtualItemEls"
             :class="virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
           >
             <div style="padding: 10px 0">
@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, onMounted, onUpdated, ref, shallowRef } from 'vue'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { generateSentences } from './utils'
 
@@ -68,13 +68,14 @@ const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 
 const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
 
-const measureElement = (el) => {
-  if (!el) {
-    return
-  }
+const virtualItemEls = shallowRef([])
 
-  rowVirtualizer.value.measureElement(el)
-
-  return undefined
+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) rowVirtualizer.value.measureElement(el)
+  })
 }
+
+onMounted(measureAll)
+onUpdated(measureAll)
 </script>
diff --git a/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue b/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue
index cb95e1474..38ef8fa4a 100644
--- a/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue
+++ b/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue
@@ -22,7 +22,7 @@
           v-for="virtualRow in virtualRows"
           :key="virtualRow.key"
           :data-index="virtualRow.index"
-          :ref="measureElement"
+          ref="virtualItemEls"
           :class="virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
         >
           <div style="padding: 10px 0">
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUpdated, shallowRef } from 'vue'
 import { useWindowVirtualizer } from '@tanstack/vue-virtual'
 import { generateSentences } from './utils'
 
@@ -64,13 +64,14 @@ const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 
 const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
 
-const measureElement = (el) => {
-  if (!el) {
-    return
-  }
-
-  rowVirtualizer.value.measureElement(el)
+const virtualItemEls = shallowRef([])
 
-  return undefined
+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) rowVirtualizer.value.measureElement(el)
+  })
 }
+
+onMounted(measureAll)
+onUpdated(measureAll)
 </script>

From 893ad754e411a10946763eb1ddae8e06a9ca9ca6 Mon Sep 17 00:00:00 2001
From: Alex Liu <dsa1314@gmail.com>
Date: Tue, 17 Feb 2026 13:05:49 +0800
Subject: [PATCH 2/2] chore: run lint

---
 .../vue/dynamic/src/components/ColumnVirtualizerDynamic.vue | 2 +-
 .../vue/dynamic/src/components/GridVirtualizerDynamic.vue   | 6 +++---
 .../dynamic/src/components/RowVirtualizerDynamicWindow.vue  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue b/examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue
index 926a14ab2..311d13e0b 100644
--- a/examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue
+++ b/examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUpdated, shallowRef } from 'vue'
+import { computed, onMounted, onUpdated, ref, shallowRef } from 'vue'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { generateSentences } from './utils'
 
diff --git a/examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue b/examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue
index 282cafcbd..706d2ceb8 100644
--- a/examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue
+++ b/examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue
@@ -47,9 +47,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUpdated, shallowRef } from 'vue'
-import { useWindowVirtualizer, useVirtualizer } from '@tanstack/vue-virtual'
-import { generateData, generateColumns } from './utils'
+import { computed, onMounted, onUpdated, ref, shallowRef } from 'vue'
+import { useVirtualizer, useWindowVirtualizer } from '@tanstack/vue-virtual'
+import { generateColumns, generateData } from './utils'
 
 const columns = generateColumns(30)
 const data = generateData(columns)
diff --git a/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue b/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue
index 38ef8fa4a..8a6ec9350 100644
--- a/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue
+++ b/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUpdated, shallowRef } from 'vue'
+import { computed, onMounted, onUpdated, ref, shallowRef } from 'vue'
 import { useWindowVirtualizer } from '@tanstack/vue-virtual'
 import { generateSentences } from './utils'