snapshot of https://github.com/TanStack/query.git (main, 2026-09-16; blobs > 131072B omitted)

examples/vue/nuxt3/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+*.log
+.nuxt
+nuxt.d.ts
+.output
+.env
+
+package-lock.json
+yarn.lock
+pnpm-lock.yaml

examples/vue/nuxt3/README.md

@@ -0,0 +1,29 @@
+# Nuxt 3 Minimal Starter
+
+We recommend looking at the [documentation](https://nuxt.com/docs/3.x/getting-started/introduction).
+
+## Setup
+
+Make sure to install the dependencies
+
+```bash
+pnpm install
+```
+
+## Development
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/3.x/getting-started/deployment).

examples/vue/nuxt3/app.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>{{ data }}</div>
+</template>
+
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+
+const fetcher = async () =>
+  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
+    response.json(),
+  )
+
+const { data, suspense } = useQuery({ queryKey: ['test'], queryFn: fetcher })
+
+await suspense()
+</script>

examples/vue/nuxt3/nuxt.config.ts

@@ -0,0 +1,4 @@
+import { defineNuxtConfig } from 'nuxt/config'
+
+// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
+export default defineNuxtConfig({})

examples/vue/nuxt3/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@tanstack/query-example-vue-nuxt3",
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev",
+    "_build": "nuxi build",
+    "_start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@tanstack/vue-query": "^5.90.2"
+  },
+  "devDependencies": {
+    "nuxt": "^3.12.4"
+  }
+}

examples/vue/nuxt3/plugins/vue-query.ts

@@ -0,0 +1,36 @@
+import type {
+  DehydratedState,
+  VueQueryPluginOptions,
+} from '@tanstack/vue-query'
+import {
+  VueQueryPlugin,
+  QueryClient,
+  hydrate,
+  dehydrate,
+} from '@tanstack/vue-query'
+// Nuxt 3 app aliases
+import { defineNuxtPlugin, useState } from '#imports'
+
+export default defineNuxtPlugin((nuxt) => {
+  const vueQueryState = useState<DehydratedState | null>('vue-query')
+
+  // Modify your Vue Query global settings here
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { staleTime: 5000 } },
+  })
+  const options: VueQueryPluginOptions = { queryClient }
+
+  nuxt.vueApp.use(VueQueryPlugin, options)
+
+  if (import.meta.server) {
+    nuxt.hooks.hook('app:rendered', () => {
+      vueQueryState.value = dehydrate(queryClient)
+    })
+  }
+
+  if (import.meta.client && vueQueryState.value !== null) {
+    nuxt.hooks.hook('app:created', () => {
+      hydrate(queryClient, vueQueryState.value)
+    })
+  }
+})

examples/vue/nuxt3/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}