Vue Query

Generates TanStack Query helpers for Vue from your OpenAPI spec. By default you get queryOptions factories with their query and mutation keys. Set hooks: true to also get useQuery, useInfiniteQuery, 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.
• Install @tanstack/vue-query v5 or higher 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 option factories.
• infinite adds infinite queries for pagination. Set infinite.queryParam to the query parameter that holds the page cursor.
• query and mutation set which HTTP methods become queries (GET) and mutations (POST, PUT, PATCH, DELETE), and where the TanStack Query runtime is imported from. Set either to false to skip it.