docs(examples/vue): add 'pagination', 'auto-refetching', 'load-more-infinite-scroll', 'infinite-query-with-max-pages', 'prefetching' and 'optimistic-updates' examples with Nuxt (#12445)

Author: sukvvon

docs/config.json

@@ -6970,6 +6970,30 @@
             {
               "label": "Batching",
               "to": "framework/vue/examples/batching"
+            },
+            {
+              "label": "Auto Refetching / Polling / Realtime",
+              "to": "framework/vue/examples/auto-refetching"
+            },
+            {
+              "label": "Optimistic Updates",
+              "to": "framework/vue/examples/optimistic-updates"
+            },
+            {
+              "label": "Pagination",
+              "to": "framework/vue/examples/pagination"
+            },
+            {
+              "label": "Load-More & Infinite Scroll",
+              "to": "framework/vue/examples/load-more-infinite-scroll"
+            },
+            {
+              "label": "Infinite query with Max pages",
+              "to": "framework/vue/examples/infinite-query-with-max-pages"
+            },
+            {
+              "label": "Prefetching",
+              "to": "framework/vue/examples/prefetching"
             }
           ]
         },

examples/vue/auto-refetching/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

examples/vue/auto-refetching/README.md

@@ -0,0 +1,6 @@
+# Auto Refetching example
+
+To run this example:
+
+- `npm install` or `yarn` or `pnpm i` or `bun i`
+- `npm run dev` or `yarn dev` or `pnpm dev` or `bun dev`

examples/vue/auto-refetching/app/app.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
+import { todosMutations, todosQueries } from './services/todos/queries'
+
+const queryClient = useQueryClient()
+const intervalMs = ref(1000)
+const value = ref('')
+
+const { status, data, error, isFetching } = useQuery(() => ({
+  ...todosQueries.list(),
+  // Refetch the data every second
+  refetchInterval: intervalMs.value,
+}))
+
+const { mutate: addTodo } = useMutation({
+  ...todosMutations.create(),
+  onSuccess: () =>
+    queryClient.invalidateQueries({ queryKey: todosQueries.all() }),
+})
+
+const { mutate: clearTodos } = useMutation({
+  ...todosMutations.deleteAll(),
+  onSuccess: () =>
+    queryClient.invalidateQueries({ queryKey: todosQueries.all() }),
+})
+
+const onSubmit = () => {
+  addTodo(value.value, {
+    onSuccess: () => {
+      value.value = ''
+    },
+  })
+}
+</script>
+
+<template>
+  <h1 v-if="status === 'pending'">Loading...</h1>
+  <span v-else-if="status === 'error'">Error: {{ error?.message }}</span>
+  <div v-else>
+    <h1>Auto Refetch with refetchInterval set to {{ intervalMs }}ms</h1>
+    <p>
+      This example is best experienced on your own machine, where you can open
+      multiple tabs to the same localhost server and see your changes propagate
+      between the two.
+    </p>
+    <label>
+      Query Interval speed (ms):
+      <input v-model.number="intervalMs" type="number" step="100" />
+      {{ ' ' }}
+      <span
+        :style="{
+          display: 'inline-block',
+          marginLeft: '.5rem',
+          width: '10px',
+          height: '10px',
+          background: isFetching ? 'green' : 'transparent',
+          transition: !isFetching ? 'all .3s ease' : 'none',
+          borderRadius: '100%',
+          transform: 'scale(2)',
+        }"
+      />
+    </label>
+    <h2>Todo List</h2>
+    <form @submit.prevent="onSubmit">
+      <input v-model="value" placeholder="enter something" />
+    </form>
+    <ul>
+      <li v-for="item in data" :key="item">{{ item }}</li>
+    </ul>
+    <div>
+      <button @click="clearTodos()">Clear All</button>
+    </div>
+    <VueQueryDevtools initialIsOpen />
+  </div>
+</template>

examples/vue/auto-refetching/app/plugins/vue-query.ts

@@ -0,0 +1,29 @@
+import {
+  QueryClient,
+  VueQueryPlugin,
+  dehydrate,
+  hydrate,
+} from '@tanstack/vue-query'
+import type { DehydratedState } from '@tanstack/vue-query'
+
+export default defineNuxtPlugin((nuxt) => {
+  const vueQueryState = useState<DehydratedState | null>('vue-query')
+
+  const queryClient = new QueryClient()
+
+  nuxt.vueApp.use(VueQueryPlugin, { queryClient })
+
+  if (import.meta.server) {
+    nuxt.hooks.hook('app:rendered', () => {
+      vueQueryState.value = dehydrate(queryClient)
+    })
+  }
+
+  if (import.meta.client) {
+    nuxt.hooks.hook('app:created', () => {
+      if (vueQueryState.value) {
+        hydrate(queryClient, vueQueryState.value)
+      }
+    })
+  }
+})

examples/vue/auto-refetching/app/services/todos/api.ts

@@ -0,0 +1,9 @@
+export const todosAPI = {
+  getTodos: (): Promise<Array<string>> => $fetch('/api/data'),
+  createTodo: async (add: string) => {
+    await $fetch('/api/data', { query: { add } })
+  },
+  deleteTodos: async () => {
+    await $fetch('/api/data', { query: { clear: 1 } })
+  },
+}

examples/vue/auto-refetching/app/services/todos/queries.ts

@@ -0,0 +1,22 @@
+import { mutationOptions, queryOptions } from '@tanstack/vue-query'
+import { todosAPI } from './api'
+
+export const todosQueries = {
+  all: () => ['todos'] as const,
+  list: () =>
+    queryOptions({
+      queryKey: [...todosQueries.all(), 'list'] as const,
+      queryFn: () => todosAPI.getTodos(),
+    }),
+}
+
+export const todosMutations = {
+  create: () =>
+    mutationOptions({
+      mutationFn: (add: string) => todosAPI.createTodo(add),
+    }),
+  deleteAll: () =>
+    mutationOptions({
+      mutationFn: () => todosAPI.deleteTodos(),
+    }),
+}

examples/vue/auto-refetching/eslint.config.js

@@ -0,0 +1,19 @@
+// @ts-check
+
+import { tanstackConfig } from '@tanstack/eslint-config'
+import pluginQuery from '@tanstack/eslint-plugin-query'
+import { defineConfig } from 'eslint/config'
+
+export default defineConfig([
+  ...tanstackConfig,
+  ...pluginQuery.configs['flat/recommended-strict'],
+  {
+    languageOptions: {
+      parserOptions: {
+        project: false,
+        projectService: true,
+        extraFileExtensions: ['.vue'],
+      },
+    },
+  },
+])

examples/vue/auto-refetching/nuxt.config.ts

@@ -0,0 +1,10 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  typescript: {
+    nodeTsConfig: {
+      include: ['../eslint.config.js'],
+    },
+  },
+})

examples/vue/auto-refetching/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@tanstack/query-example-vue-auto-refetching",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "test:eslint": "eslint ./app ./server",
+    "test:types": "nuxt typecheck"
+  },
+  "dependencies": {
+    "@tanstack/vue-query": "^5.105.0",
+    "@tanstack/vue-query-devtools": "^6.3.6",
+    "nuxt": "4.6.2",
+    "vue": "^3.5.44",
+    "vue-router": "^5.4.0"
+  },
+  "devDependencies": {
+    "@tanstack/eslint-plugin-query": "^5.105.0",
+    "typescript": "^6.0.3",
+    "vue-tsc": "^3.3.13"
+  }
+}