[{"data":1,"prerenderedAt":450},["ShallowReactive",2],{"page:\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query":3},{"id":4,"title":5,"body":6,"description":431,"extension":439,"frontmatter":440,"heading":5,"meta":441,"navigation":442,"order":443,"path":444,"seo":445,"sitemap":446,"source":4,"stem":447,"__hash__":448,"hasPopups":449},"extensions\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Findex.md","Vue Query",{"type":7,"value":8,"toc":430},"minimark",[9,30,33,38,122,143,147,188,192,268,276,280,288],[10,11,12,13,17,18,21,22,25,26,29],"p",{},"The Vue Query plugin generates TanStack Query helpers for Vue from your OpenAPI spec. By default you get ",[14,15,16],"code",{},"queryOptions"," factories with their query keys, plus a key for each mutation. Set ",[14,19,20],{},"hooks: true"," to also get ",[14,23,24],{},"useQuery"," and ",[14,27,28],{},"useMutation"," composables with reactive parameters.",[10,31,32],{},"The plugin ships no HTTP client. Each helper calls a function generated by a client plugin.",[34,35,37],"h2",{"id":36},"installation","Installation",[39,40,42,71,88,106],"code-group",{"sync":41},"package-manager",[43,44,49],"pre",{"language":45,"filename":46,"code":47,"class":48},"shell","bun","bun add -d @kubb\u002Fplugin-vue-query","shiki shiki-themes github-light github-dark dark:github-dark",[14,50,52],{"class":51},"language-shell",[53,54,57,60,64,68],"span",{"class":55,"style":56},"line","display: inline",[53,58,46],{"style":59},"color:#6F42C1;--shiki-dark:#B392F0",[53,61,63],{"style":62},"color:#032F62;--shiki-dark:#9ECBFF"," add",[53,65,67],{"style":66},"color:#005CC5;--shiki-dark:#79B8FF"," -d",[53,69,70],{"style":62}," @kubb\u002Fplugin-vue-query",[43,72,75],{"language":45,"filename":73,"code":74,"class":48},"pnpm","pnpm add -D @kubb\u002Fplugin-vue-query",[14,76,77],{"class":51},[53,78,79,81,83,86],{"class":55,"style":56},[53,80,73],{"style":59},[53,82,63],{"style":62},[53,84,85],{"style":66}," -D",[53,87,70],{"style":62},[43,89,92],{"language":45,"filename":90,"code":91,"class":48},"npm","npm install --save-dev @kubb\u002Fplugin-vue-query",[14,93,94],{"class":51},[53,95,96,98,101,104],{"class":55,"style":56},[53,97,90],{"style":59},[53,99,100],{"style":62}," install",[53,102,103],{"style":66}," --save-dev",[53,105,70],{"style":62},[43,107,110],{"language":45,"filename":108,"code":109,"class":48},"yarn","yarn add -D @kubb\u002Fplugin-vue-query",[14,111,112],{"class":51},[53,113,114,116,118,120],{"class":55,"style":56},[53,115,108],{"style":59},[53,117,63],{"style":62},[53,119,85],{"style":66},[53,121,70],{"style":62},[10,123,124,125,128,129,134,135,138,139,142],{},"Or run ",[14,126,127],{},"kubb add plugin-vue-query"," to install the version the ",[130,131,133],"a",{"href":132},"\u002Fregistry","Kubb registry"," pins and add ",[14,136,137],{},"pluginVueQuery()"," to ",[14,140,141],{},"kubb.config.ts",".",[34,144,146],{"id":145},"setup","Setup",[148,149,150,174,185],"ul",{},[151,152,153,154,157,158,161,162,165,166,169,170,173],"li",{},"Add ",[14,155,156],{},"@kubb\u002Fplugin-ts"," and a client plugin: ",[14,159,160],{},"@kubb\u002Fplugin-fetch",", ",[14,163,164],{},"@kubb\u002Fplugin-axios",", or ",[14,167,168],{},"@kubb\u002Fplugin-client",". Leave ",[14,171,172],{},"sdk"," unset on the client plugin.",[151,175,176,177,180,181,184],{},"Install ",[14,178,179],{},"@tanstack\u002Fvue-query"," 5.41 or a later v5 release and ",[14,182,183],{},"vue"," 3.3 or a later v3 release in the app that uses the generated code.",[151,186,187],{},"Configure validation on the client plugin, not here.",[34,189,191],{"id":190},"options-worth-knowing","Options worth knowing",[148,193,194,208,218,238],{},[151,195,196,199,200,203,204,207],{},[14,197,198],{},"client"," picks ",[14,201,202],{},"fetch"," or ",[14,205,206],{},"axios"," when both client plugins are registered. A single client is detected automatically.",[151,209,210,213,214,217],{},[14,211,212],{},"hooks"," adds the ",[14,215,216],{},"use*"," composables on top of the query option factories.",[151,219,220,223,224,227,228,230,231,234,235,142],{},[14,221,222],{},"infinite"," adds ",[14,225,226],{},"useInfiniteQuery"," composables for pagination. It needs ",[14,229,20],{}," and covers the operations that take the query parameter named in ",[14,232,233],{},"infinite.queryParam",", which defaults to ",[14,236,237],{},"'id'",[151,239,240,25,243,246,247,250,251,161,254,161,257,161,260,263,264,267],{},[14,241,242],{},"query",[14,244,245],{},"mutation"," set which HTTP methods become queries (",[14,248,249],{},"GET",") and mutations (",[14,252,253],{},"POST",[14,255,256],{},"PUT",[14,258,259],{},"PATCH",[14,261,262],{},"DELETE","). They also set where the TanStack Query runtime is imported from. Set either to ",[14,265,266],{},"false"," to skip those helpers.",[10,269,270,271,275],{},"See ",[130,272,274],{"href":273},"https:\u002F\u002Fkubb.dev\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Foptions","Options"," for every option and its default.",[34,277,279],{"id":278},"example","Example",[10,281,282,283,25,285,287],{},"The config below generates ",[14,284,24],{},[14,286,28],{}," composables that call the Fetch client.",[43,289,292],{"language":290,"filename":141,"code":291,"class":48},"typescript","import { defineConfig } from 'kubb\u002Fconfig'\nimport { pluginTs } from '@kubb\u002Fplugin-ts'\nimport { pluginFetch } from '@kubb\u002Fplugin-fetch'\nimport { pluginVueQuery } from '@kubb\u002Fplugin-vue-query'\n\nexport default defineConfig({\n  input: '.\u002FpetStore.yaml',\n  output: { path: '.\u002Fsrc\u002Fgen' },\n  plugins: [\n    pluginTs(),\n    pluginFetch(),\n    pluginVueQuery({ hooks: true }),\n  ],\n})",[14,293,295,311,312,311,324,311,336,311,348,311,350,311,364,311,375,311,386,311,391,311,399,311,406,311,420,311,425],{"class":294},"language-typescript",[53,296,297,301,305,308],{"class":55,"style":56},[53,298,300],{"style":299},"color:#D73A49;--shiki-dark:#F97583","import",[53,302,304],{"style":303},"color:#24292E;--shiki-dark:#E1E4E8"," { defineConfig } ",[53,306,307],{"style":299},"from",[53,309,310],{"style":62}," 'kubb\u002Fconfig'","\n",[53,313,314,316,319,321],{"class":55,"style":56},[53,315,300],{"style":299},[53,317,318],{"style":303}," { pluginTs } ",[53,320,307],{"style":299},[53,322,323],{"style":62}," '@kubb\u002Fplugin-ts'",[53,325,326,328,331,333],{"class":55,"style":56},[53,327,300],{"style":299},[53,329,330],{"style":303}," { pluginFetch } ",[53,332,307],{"style":299},[53,334,335],{"style":62}," '@kubb\u002Fplugin-fetch'",[53,337,338,340,343,345],{"class":55,"style":56},[53,339,300],{"style":299},[53,341,342],{"style":303}," { pluginVueQuery } ",[53,344,307],{"style":299},[53,346,347],{"style":62}," '@kubb\u002Fplugin-vue-query'",[53,349],{"class":55,"style":56},[53,351,352,355,358,361],{"class":55,"style":56},[53,353,354],{"style":299},"export",[53,356,357],{"style":299}," default",[53,359,360],{"style":59}," defineConfig",[53,362,363],{"style":303},"({",[53,365,366,369,372],{"class":55,"style":56},[53,367,368],{"style":303},"  input: ",[53,370,371],{"style":62},"'.\u002FpetStore.yaml'",[53,373,374],{"style":303},",",[53,376,377,380,383],{"class":55,"style":56},[53,378,379],{"style":303},"  output: { path: ",[53,381,382],{"style":62},"'.\u002Fsrc\u002Fgen'",[53,384,385],{"style":303}," },",[53,387,388],{"class":55,"style":56},[53,389,390],{"style":303},"  plugins: [",[53,392,393,396],{"class":55,"style":56},[53,394,395],{"style":59},"    pluginTs",[53,397,398],{"style":303},"(),",[53,400,401,404],{"class":55,"style":56},[53,402,403],{"style":59},"    pluginFetch",[53,405,398],{"style":303},[53,407,408,411,414,417],{"class":55,"style":56},[53,409,410],{"style":59},"    pluginVueQuery",[53,412,413],{"style":303},"({ hooks: ",[53,415,416],{"style":66},"true",[53,418,419],{"style":303}," }),",[53,421,422],{"class":55,"style":56},[53,423,424],{"style":303},"  ],",[53,426,427],{"class":55,"style":56},[53,428,429],{"style":303},"})",{"title":431,"searchDepth":432,"depth":432,"links":433},"",5,[434,436,437,438],{"id":36,"depth":435,"text":37},2,{"id":145,"depth":435,"text":146},{"id":190,"depth":435,"text":191},{"id":278,"depth":435,"text":279},"md",{},{},true,null,"\u002Fextensions\u002Fkubb-labs\u002Fplugin-vue-query",{"title":5},{"loc":444},"extensions\u002Fkubb-labs\u002Fplugin-vue-query\u002Findex","G6M2GrRfsEW2JAySV1xqUwuUbyX3qXNINMTJlHjM-sQ",false,1792779445585]