@kubb/plugin-vue-query

@kubb/plugin-vue-query turns each OpenAPI operation into a TanStack Query composable for Vue. Read operations become useFoo, with an optional useFooInfinite variant, and write operations become useFoo mutations. Every composable is typed: query keys, input variables, response data, and error shape all come from the spec.

The composables call an HTTP client, so a client plugin must be registered: add @kubb/plugin-ts for the types and either @kubb/plugin-axios or @kubb/plugin-fetch for the client.

Each composable takes its parameters as a single grouped options object shaped as { body, path, query, headers }, with camelCase property names. The request still sends the original parameter names from the spec, and Kubb writes that mapping for you.

Installation

bun

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

pnpm

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

npm

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

yarn

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

Dependencies

This plugin needs these plugins in your config:

• @kubb/plugin-ts for the types.
• A client plugin, @kubb/plugin-axios or @kubb/plugin-fetch, for the HTTP layer. The composables call its functions, so generation errors out when no client plugin is registered.

For runtime validation, set validator on the client plugin. The generated operations carry the validation, so the composables get it for free.

Example

kubb.config.ts

import { defineConfig } from 'kubb'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginAxios } from '@kubb/plugin-axios'
import { pluginVueQuery } from '@kubb/plugin-vue-query'

export default defineConfig({
  input: './petStore.yaml',
  output: { path: './src/gen' },
  plugins: [
    pluginTs(),
    pluginAxios(),
    pluginVueQuery({
      output: { path: './hooks', mode: 'directory' },
      group: {
        type: 'tag',
        name: ({ group }) => `${group}Hooks`,
      },
      client: 'axios',
      mutation: { methods: ['POST', 'PUT', 'DELETE'] },
      infinite: {
        queryParam: 'next_page',
        initialPageParam: 0,
        nextParam: 'pagination.next.cursor',
      },
      query: {
        methods: ['GET'],
        importPath: '@tanstack/vue-query',
      },
    }),
  ],
})

See also

• TanStack Query for Vue
• Changelog