Open Studio
Officialv5.1.4MITkubb >=5.0.0node >=22

@kubb/plugin-vue-query

Generates TanStack Query composables for Vue from your OpenAPI spec, so every read and write is a typed useQuery, useInfiniteQuery, or useMutation.

vue-querytanstack-queryvuecomposablesdata-fetchingcodegenopenapi
Stijn Van Hulle

Stijn Van Hulle

@stijnvanhulle

Downloads
28k/ mo
Stars
8
Bundle size
429.8 kB
Updated
today

@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 ​

shell
bun add -d @kubb/plugin-vue-query
shell
pnpm add -D @kubb/plugin-vue-query
shell
npm install --save-dev @kubb/plugin-vue-query
shell
yarn add -D @kubb/plugin-vue-query

Dependencies ​

This plugin needs these plugins in your config:

Important

The generated composables need @tanstack/vue-query v5 or higher.

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

Example ​

typescript
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 ​

Options