@inertiajs/vue3 2.3.18 → 2.3.21

package/resources/boost/skills/inertia-vue-development/SKILL.blade.php

@@ -32,6 +32,8 @@ Vue page components should be placed in the `{{ $assist->inertia()->pagesDirecto
 
 ### Page Component Structure
 
+Important: Vue components must have a single root element.
+
 @verbatim
 @boostsnippet("Basic Vue Page Component", "vue")
 <script setup>
@@ -326,28 +328,46 @@ defineProps({
 
 ### Polling
 
-Automatically refresh data at intervals:
+Use the `usePoll` composable to automatically refresh data at intervals. It handles cleanup on unmount and throttles polling when the tab is inactive.
 
-@verbatim
-@boostsnippet("Polling Example", "vue")
+@boostsnippet("Basic Polling", "vue")
 <script setup>
-import { router } from '@inertiajs/vue3'
-import { onMounted, onUnmounted } from 'vue'
+import { usePoll } from '@inertiajs/vue3'
 
 defineProps({
     stats: Object
 })
 
-let interval
+usePoll(5000)
+</script>
 
-onMounted(() => {
-    interval = setInterval(() => {
-        router.reload({ only: ['stats'] })
-    }, 5000) // Poll every 5 seconds
+<template>
+    <div>
+        <h1>Dashboard</h1>
+        <div>Active Users: {{ stats.activeUsers }}</div>
+    </div>
+</template>
+@endboostsnippet
+
+@boostsnippet("Polling With Request Options and Manual Control", "vue")
+<script setup>
+import { usePoll } from '@inertiajs/vue3'
+
+defineProps({
+    stats: Object
 })
 
-onUnmounted(() => {
-    clearInterval(interval)
+const { start, stop } = usePoll(5000, {
+    only: ['stats'],
+    onStart() {
+        console.log('Polling request started')
+    },
+    onFinish() {
+        console.log('Polling request finished')
+    },
+}, {
+    autoStart: false,
+    keepAlive: true,
 })
 </script>
 
@@ -355,10 +375,14 @@ onUnmounted(() => {
     <div>
         <h1>Dashboard</h1>
         <div>Active Users: {{ stats.activeUsers }}</div>
+        <button @click="start">Start Polling</button>
+        <button @click="stop">Stop Polling</button>
     </div>
 </template>
 @endboostsnippet
-@endverbatim
+
+- `autoStart` (default `true`) — set to `false` to start polling manually via the returned `start()` function
+- `keepAlive` (default `false`) — set to `true` to prevent throttling when the browser tab is inactive
 
 ### WhenVisible
 
@@ -378,7 +402,6 @@ defineProps({
     <div>
         <h1>Dashboard</h1>
 
-        <!-- stats prop is loaded only when this section scrolls into view -->
         <WhenVisible data="stats" :buffer="200">
             <template #fallback>
                 <div class="animate-pulse">Loading stats...</div>
@@ -397,6 +420,32 @@ defineProps({
 @endboostsnippet
 @endverbatim
 
+### InfiniteScroll
+
+Automatically load additional pages of paginated data as users scroll:
+
+@verbatim
+@boostsnippet("InfiniteScroll Example", "vue")
+<script setup>
+import { InfiniteScroll } from '@inertiajs/vue3'
+
+defineProps({
+    users: Object
+})
+</script>
+
+<template>
+    <InfiniteScroll data="users">
+        <div v-for="user in users.data" :key="user.id">
+            {{ user.name }}
+        </div>
+    </InfiniteScroll>
+</template>
+@endboostsnippet
+@endverbatim
+
+The server must use `Inertia::scroll()` to configure the paginated data. Use the `search-docs` tool with a query of `infinite scroll` for detailed guidance on buffers, manual loading, reverse mode, and custom trigger elements.
+
 ## Server-Side Patterns
 
 Server-side patterns (Inertia::render, props, middleware) are covered in inertia-laravel guidelines.