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