{"id":16398110,"url":"https://github.com/hebilicious/vue-query-nuxt","last_synced_at":"2025-04-04T07:03:43.895Z","repository":{"id":171426455,"uuid":"647741172","full_name":"Hebilicious/vue-query-nuxt","owner":"Hebilicious","description":"A lightweight, 0 config Nuxt Module for Vue Query.","archived":false,"fork":false,"pushed_at":"2024-10-30T03:08:06.000Z","size":4509,"stargazers_count":85,"open_issues_count":17,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-30T06:13:58.681Z","etag":null,"topics":["data","data-fetching","fetch","nuxt","react-query","tanstack","tanstack-query","vue","vue-query"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hebilicious.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["Hebilicious"]}},"created_at":"2023-05-31T12:27:42.000Z","updated_at":"2024-10-18T17:27:32.000Z","dependencies_parsed_at":"2023-12-22T10:29:11.141Z","dependency_job_id":"1c95842e-cba4-4ebb-8587-cc69a0096279","html_url":"https://github.com/Hebilicious/vue-query-nuxt","commit_stats":{"total_commits":105,"total_committers":3,"mean_commits":35.0,"dds":"0.36190476190476195","last_synced_commit":"011281268fca02dbff2057473067c0b51701cba0"},"previous_names":["hebilicious/vue-query-nuxt"],"tags_count":9,"template":false,"template_full_name":"Hebilicious/nuxt-module-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fvue-query-nuxt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fvue-query-nuxt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fvue-query-nuxt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hebilicious%2Fvue-query-nuxt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hebilicious","download_url":"https://codeload.github.com/Hebilicious/vue-query-nuxt/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135138,"owners_count":20889420,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","data-fetching","fetch","nuxt","react-query","tanstack","tanstack-query","vue","vue-query"],"created_at":"2024-10-11T05:11:52.938Z","updated_at":"2025-04-04T07:03:43.879Z","avatar_url":"https://github.com/Hebilicious.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Hebilicious"],"categories":[],"sub_categories":[],"readme":"# ⚗️ Vue Query Nuxt\n\n[![CI](https://github.com/Hebilicious/vue-query-nuxt/actions/workflows/ci.yaml/badge.svg)](https://github.com/Hebilicious/vue-query-nuxt/actions/workflows/ci.yaml)\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n[npm-version-src]: https://img.shields.io/npm/v/@hebilicious/vue-query-nuxt\n[npm-version-href]: https://npmjs.com/package/@hebilicious/vue-query-nuxt\n[npm-downloads-src]: https://img.shields.io/npm/dm/@hebilicious/vue-query-nuxt\n[npm-downloads-href]: https://npmjs.com/package/@hebilicious/vue-query-nuxt\n\n🚀 Welcome to __Vue Query Nuxt__!  \n\nThis Nuxt Module automatically installs and configure Vue Query for your Nuxt application.\nIt has 0 config out-of-the box and extremely lightweight.\n\n## Features\n\n- 0 config out-of-the box\n- All configurations options available\n- Auto Imports for Vue Query composables\n\nRefer to the [Vue Query documentation](https://tanstack.com/query/latest/docs/vue/quick-start) for more information about Vue Query.\n\n## 📦 How to use\n\n### 1. Use npm, pnpm or yarn to install the dependencies.\n\n```bash\nnpx nuxi@latest module add vue-query\nnpm i @tanstack/vue-query\n```\n\n### 2. Add the modules to your Nuxt modules\n\nIn `nuxt.config.ts` :\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\"@hebilicious/vue-query-nuxt\"]\n})\n```\n\n### 3. Use right away\n\nIn a vue component :\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n// Access QueryClient instance\nconst queryClient = useQueryClient()\n\n// Query\nconst { isLoading, isError, data, suspense, error } = useQuery({\n  queryKey: ['todos'],\n  queryFn: () =\u003e $fetch(\"/api/todos\"), // Use $fetch with your api routes to get typesafety \n})\n\n//Suspense\nonServerPrefetch(suspense)\n\n// Mutation\nconst { mutate } = useMutation({\n  mutationFn: (newTodo) =\u003e $fetch(\"/api/todos\", { method: \"POST\", body: newTodo })\n  onSuccess: () =\u003e {\n    // Invalidate and refetch\n    queryClient.invalidateQueries({ queryKey: ['todos'] })\n  },\n})\n\nfunction onButtonClick() {\n   mutate({\n    id: Date.now(),\n    title: 'Do Laundry',\n  })\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cspan v-if=\"isLoading\"\u003eLoading...\u003c/span\u003e\n  \u003cspan v-else-if=\"isError\"\u003eError: {{ error.message }}\u003c/span\u003e\n  \u003c!-- We can assume by this point that `isSuccess === true` --\u003e\n  \u003cul v-else\u003e\n    \u003cli v-for=\"todo in data\" :key=\"todo.id\"\u003e{{ todo.title }}\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cbutton @click=\"onButtonClick\"\u003eAdd Todo\u003c/button\u003e\n\u003c/template\u003e\n```\n\n### 4. Advanced configuration\n\nYou can specify the options under the vueQuery key in your nuxt.config.ts file.\nEverything is typed.\n\nIn `nuxt.config.ts` :\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\"@hebilicious/vue-query-nuxt\"],\n  vueQuery: {\n    // useState key used by nuxt for the vue query state.\n    stateKey: \"vue-query-nuxt\", // default\n    // If you only want to import some functions, specify them here.\n    // You can pass false or an empty array to disable this feature.\n    // default: [\"useQuery\", \"useQueries\", \"useInfiniteQuery\", \"useMutation\", \"useIsFetching\", \"useIsMutating\", \"useQueryClient\"]\n    autoImports: [\"useQuery\"],\n    // Pass the vue query client options here ...\n    queryClientOptions: {\n      defaultOptions: { queries: { staleTime: 5000 } } // default\n    },\n    // Pass the vue query plugin options here ....\n    vueQueryPluginOptions: {\n      enableDevtoolsV6Plugin: true, // enable integrate with the official vue devtools\n    }\n  }\n})\n```\n\nIf you need to modify the plugin that installs vue query, you can create a `vue-query.config.ts` file at the root of your project.\n\nIn `vue-query.config.ts` :\n\n```ts\nimport { library } from \"@example/libray\"\n\nexport default defineVueQueryPluginHook(({ queryClient, nuxt }) =\u003e {\n  console.log(queryClient, nuxt) // You can access the queryClient here\n  return {\n    pluginReturn: { provide: { library, test: console } }, // nuxt plugin return value\n    vueQueryPluginOptions: { queryClient } // You can pass dynamic options\n  }\n})\n```\n\nThis hook will be run within the nuxt plugin installed by the module, so you can use it to `provide` something or replace the vue query options.\nThis can be useful if you need to run custom logic when the `queryClient` is being installed.\n\n## 📦 Contributing\n\nContributions, issues and feature requests are welcome!\n\n1. Fork this repo\n\n2. Install `node` and `pnpm` _Use `corepack enable \u0026\u0026 corepack prepare pnpm@latest --activate` to install pnpm easily_\n\n3. Use `pnpm i` at the mono-repo root.\n\n4. Make modifications and follow conventional commits.\n\n5. Open a PR 🚀🚀🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhebilicious%2Fvue-query-nuxt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhebilicious%2Fvue-query-nuxt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhebilicious%2Fvue-query-nuxt/lists"}