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

bun add -d @kubb/plugin-vue-query

pnpm add -D @kubb/plugin-vue-query

npm install --save-dev @kubb/plugin-vue-query

yarn add -D @kubb/plugin-vue-query

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

Setup

• Add @kubb/plugin-ts and a client plugin: @kubb/plugin-fetch or @kubb/plugin-axios. 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 for every option and its default.

Example

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

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 }),
  ],
})