Features

📦 How to use

1. Use npm, pnpm or yarn to install the dependencies.

npx nuxi@latest module add vue-querynpm i @tanstack/vue-query

2. Add the modules to your Nuxt modules

exportdefaultdefineNuxtConfig({modules:["@hebilicious/vue-query-nuxt"]})

3. Use right away

<scriptsetuplang="ts">// Access QueryClient instanceconstqueryClient=useQueryClient()// Queryconst{ isLoading, isError, data, suspense, error}=useQuery({queryKey:['todos'],queryFn:()=>$fetch("/api/todos"),// Use $fetch with your api routes to get typesafety})//SuspenseonServerPrefetch(suspense)// Mutationconst{ mutate}=useMutation({mutationFn:(newTodo)=>$fetch("/api/todos",{method:"POST",body:newTodo})onSuccess:()=>{// Invalidate and refetchqueryClient.invalidateQueries({queryKey:['todos']})},})functiononButtonClick(){mutate({id:Date.now(),title:'Do Laundry',})}</script><template><spanv-if="isLoading">Loading...</span><spanv-else-if="isError">Error: {{ error.message }}</span><!-- We can assume by this point that `isSuccess === true` --><ulv-else><liv-for="todo in data":key="todo.id">{{ todo.title }}</li></ul><button@click="onButtonClick">Add Todo</button></template>

4. Advanced configuration

exportdefaultdefineNuxtConfig({modules:["@hebilicious/vue-query-nuxt"],vueQuery:{// useState key used by nuxt for the vue query state.stateKey:"vue-query-nuxt",// default// If you only want to import some functions, specify them here.// You can pass false or an empty array to disable this feature.// default: ["useQuery", "useQueries", "useInfiniteQuery", "useMutation", "useIsFetching", "useIsMutating", "useQueryClient"]autoImports:["useQuery"],// Pass the vue query client options here ...queryClientOptions:{defaultOptions:{queries:{staleTime:5000}}// default},// Pass the vue query plugin options here ....vueQueryPluginOptions:{enableDevtoolsV6Plugin:true,// enable integrate with the official vue devtools}}})

import{library}from"@example/libray"exportdefaultdefineVueQueryPluginHook(({ queryClient, nuxt})=>{console.log(queryClient,nuxt)// You can access the queryClient herereturn{pluginReturn:{provide:{ library,test:console}},// nuxt plugin return valuevueQueryPluginOptions:{ queryClient}// You can pass dynamic options}})

📦 Contributing