> Index of every page on this site: [llms.txt](https://kubb.dev/llms.txt)

# Vue Query

The Vue Query plugin generates TanStack Query helpers for Vue from your OpenAPI spec. By default you get `queryOptions` factories with their query keys, plus a key for each mutation. Set `hooks: true` to also get `useQuery` and `useMutation` composables with reactive parameters.

The plugin ships no HTTP client. Each helper calls a function generated by a client plugin.

## Installation

::code-group{sync="package-manager"}

```shell [bun]
bun add -d @kubb/plugin-vue-query
```

```shell [pnpm]
pnpm add -D @kubb/plugin-vue-query
```

```shell [npm]
npm install --save-dev @kubb/plugin-vue-query
```

```shell [yarn]
yarn add -D @kubb/plugin-vue-query
```

::

Or run `kubb add plugin-vue-query` to install the version the [Kubb registry](/registry) pins and add `pluginVueQuery()` to `kubb.config.ts`.

## Setup

- Add `@kubb/plugin-ts` and a client plugin: `@kubb/plugin-fetch`, `@kubb/plugin-axios`, or `@kubb/plugin-client`. Leave `sdk` unset on the client plugin.
- Install `@tanstack/vue-query` 5.41 or a later v5 release and `vue` 3.3 or a later v3 release in the app that uses the generated code.
- Configure validation on the client plugin, not here.

## Options worth knowing

- `client` picks `fetch` or `axios` when both client plugins are registered. A single client is detected automatically.
- `hooks` adds the `use*` composables on top of the query option factories.
- `infinite` adds `useInfiniteQuery` composables for pagination. It needs `hooks: true` and covers the operations that take the query parameter named in `infinite.queryParam`, which defaults to `'id'`.
- `query` and `mutation` set which HTTP methods become queries (`GET`) and mutations (`POST`, `PUT`, `PATCH`, `DELETE`). They also set where the TanStack Query runtime is imported from. Set either to `false` to skip those helpers.

See [Options](https://kubb.dev/extensions/kubb-labs/plugin-vue-query/options) for every option and its default.

## Example

The config below generates `useQuery` and `useMutation` composables that call the Fetch client.

```typescript [kubb.config.ts]
import { defineConfig } from 'kubb/config'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginFetch } from '@kubb/plugin-fetch'
import { pluginVueQuery } from '@kubb/plugin-vue-query'

export default defineConfig({
  input: './petStore.yaml',
  output: { path: './src/gen' },
  plugins: [
    pluginTs(),
    pluginFetch(),
    pluginVueQuery({ hooks: true }),
  ],
})
```

## Sitemap

See the full [sitemap](https://kubb.dev/sitemap.md) for all pages.