{"id":25915785,"url":"https://github.com/peterbud/nuxt-query","last_synced_at":"2026-04-02T23:44:27.670Z","repository":{"id":279990160,"uuid":"932791074","full_name":"peterbud/nuxt-query","owner":"peterbud","description":"Nuxt module for TanStack Query (FKA Vue Query) with Nuxt DevTools integration","archived":false,"fork":false,"pushed_at":"2026-02-02T23:44:25.000Z","size":3394,"stargazers_count":35,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-03T01:13:55.503Z","etag":null,"topics":["data-fetching","dx","module","nuxt","nuxt-devtools","nuxt-module","tanstack","tanstack-query","tanstack-vue-query","vue","vue-query"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peterbud.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-14T14:27:42.000Z","updated_at":"2026-02-02T11:55:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"2cdafba6-bdeb-4b9c-a3df-42626e6a3825","html_url":"https://github.com/peterbud/nuxt-query","commit_stats":null,"previous_names":["peterbud/nuxt-query"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/peterbud/nuxt-query","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbud%2Fnuxt-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbud%2Fnuxt-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbud%2Fnuxt-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbud%2Fnuxt-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterbud","download_url":"https://codeload.github.com/peterbud/nuxt-query/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbud%2Fnuxt-query/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29167886,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T15:38:29.831Z","status":"ssl_error","status_checked_at":"2026-02-06T15:37:48.592Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-fetching","dx","module","nuxt","nuxt-devtools","nuxt-module","tanstack","tanstack-query","tanstack-vue-query","vue","vue-query"],"created_at":"2025-03-03T12:17:34.007Z","updated_at":"2026-02-06T16:13:18.170Z","avatar_url":"https://github.com/peterbud.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt Query\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nA powerful Nuxt module for integrating [TanStack Query](https://tanstack.com/query/latest/docs/framework/vue/overview) (formerly Vue Query) into your Nuxt application. Provides robust server state management with intelligent caching, background updates, and seamless data synchronization.\n\n- [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n- [🏀 \u0026nbsp;Online playground](https://stackblitz.com/github/peterbud/nuxt-query/tree/main/examples/minimal)\n\n## Features\n\n- ⚙️ \u0026nbsp; Zero-configuration integration\n- 💪 \u0026nbsp; Full TypeScript support with Vue Query configuration\n- 🏆 \u0026nbsp; Advanced `QueryClient` setup with custom handlers via hooks\n- 🤖 \u0026nbsp; Configurable auto-imports for Vue Query composables\n- 🧩 \u0026nbsp; Nuxt DevTools integration for debugging and inspection\n\n## Installation\n\nYou can add the module via the Nuxt CLI:\n\n```bash\nnpx nuxi module add @peterbud/nuxt-query\n```\n\nor via npm:\n\n```bash\nnpm install @peterbud/nuxt-query\n```\n\n## Configuration\n\nTo configure Nuxt Query, update your `nuxt.config.ts` specifying the options you want for Vue Query:\n\n```typescript\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['@peterbud/nuxt-query'],\n  nuxtQuery: {\n    /**\n     * Specify which Vue Query composables to auto-import\n     * Default: `false`, set to `true` to auto-import all Vue Query composables\n     */\n    autoImports: ['useQuery', 'useMutation'],\n\n    // Enable/disable Nuxt DevTools integration (default: true)\n    devtools: true,\n\n    /**\n     * These are the same options as the QueryClient \n     * from @tanstack/vue-query, which will be passed \n     * to the QueryClient constructor\n     * More details: https://tanstack.com/query/v5/docs/reference/QueryClient\n     */\n    \n    queryClientOptions: {\n      defaultOptions: {\n        queries: {\n          // for example disable refetching on window focus\n          refetchOnWindowFocus: false,\n\n          // or change the default refetch interval\n          refetchInterval: 5000,\n        },\n      },\n    },\n  },\n})\n```\n\nThen, in your component, you can define and run queries with the `useQuery` composable (auto-imported):\n\n```vue\n// app.vue\n\u003cscript setup\u003e\nconst getPosts = async () =\u003e {\n  await new Promise(resolve =\u003e setTimeout(resolve, 2000))\n  return await $fetch('https://jsonplaceholder.typicode.com/posts')\n}\n\nconst { isPending, isFetching, isError, data, error } = useQuery({\n  queryKey: ['posts'],\n  queryFn: getPosts,\n})\n\u003c/script\u003e\n```\n\nThat's it! You can now use Nuxt Query in your Nuxt app ✨\n\n## Module Hooks\n\nNuxt Query provides a hook that you can use in your application if you need a more complex setup for TanStack Query, such as a custom query client with centralized `onSuccess` or `onError` handlers, which would not be possible to configure with the options available in the `nuxt.config.ts`.\n\nThe hook is called `nuxt-query:configure` and you can use it in a plugin to return a custom `QueryClient` object in the following way:\n\n```typescript\n// plugins/nuxt-query.ts\nimport { QueryClient, QueryCache } from '@tanstack/vue-query'\n\nexport default defineNuxtPlugin({\n  enforce: 'pre',\n  setup(nuxtApp) {\n    nuxtApp.hook('nuxt-query:configure', (getPluginOptions) =\u003e {\n      const clientOptions = useRuntimeConfig().public.nuxtQuery?.queryClientOptions || {}\n\n      const queryClient = new QueryClient({\n        ...clientOptions,\n        queryCache: new QueryCache({\n          onSuccess: (data: unknown) =\u003e console.log('onSuccess', { data }),\n        }),\n      })\n\n      // return the plugin options which will be used\n      // by the module at startup\n      getPluginOptions(queryClient)\n    })\n  },\n})\n```\n\n## Nuxt DevTools Integration\n\nNuxt Query integrates with Nuxt DevTools to provide a dedicated tab for Vue Query, where you can inspect the state of your queries, view their cache, and properties, initiate refetch or remove certain queries and more.\n\n![Nuxt DevTools](assets/devtools.png)\n\nAlso, you can inspect your mutation cache using the same DevTools in a convenient way.\n\n![Mutation Cache](assets/mutationcache.png)\n\n## Contribution\n\n\u003cdetails\u003e\n  \u003csummary\u003eLocal development\u003c/summary\u003e\n  \n  ```bash\n  # Install dependencies\n  npm install\n  \n  # Generate type stubs\n  npm run dev:prepare\n  \n  # Develop with the playground\n  npm run dev:client\n  \n  # Build the playground\n  npm run dev:build\n  \n  # Run ESLint\n  npm run lint\n  \n  # Run Vitest\n  npm run test\n  npm run test:watch\n  \n  # Build the module\n  npm run build\n\n  # Release new version\n  npm run release\n  ```\n\n\u003c/details\u003e\n\nIf you want to report a bug, please make sure you have a minimal reproduction of the issue. You can use the [minimal example](https://stackblitz.com/github/peterbud/nuxt-query/tree/main/examples/minimal?title=Nuxt-Query%20Minimal%20Example) to create a reproduction.\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@peterbud/nuxt-query/latest.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-version-href]: https://npmjs.com/package/@peterbud/nuxt-query\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/@peterbud/nuxt-query.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-downloads-href]: https://npm.chart.dev/@peterbud/nuxt-query\n\n[license-src]: https://img.shields.io/npm/l/@peterbud/nuxt-query.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[license-href]: https://npmjs.com/package/@peterbud/nuxt-query\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbud%2Fnuxt-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterbud%2Fnuxt-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbud%2Fnuxt-query/lists"}