How-to guides

Configure generation

Configure common Kubb stacks, formatting, linting, and post-generate commands.

Use these configurations in a project with Kubb installed and an OpenAPI specification. Replace ./petStore.yaml with your specification path, install the packages for your stack, then run npx kubb generate. Each plugin page shows its single-plugin configuration. The stacks below combine several plugins.

The examples write to ./src/gen. With clean: true, Kubb removes that directory before generation, so keep handwritten files elsewhere.

Pick a stack

Types, an Axios client, and TanStack Query hooks for React.

Terminal

npm install -D kubb typescript @kubb/plugin-ts @kubb/plugin-axios @kubb/plugin-react-query
npm install axios react @tanstack/react-query

kubb.config.ts

import { defineConfig } from 'kubb/config'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginAxios } from '@kubb/plugin-axios'
import { pluginReactQuery } from '@kubb/plugin-react-query'

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

Types, an Axios client, and TanStack Query composables for Vue.

Terminal

npm install -D kubb typescript @kubb/plugin-ts @kubb/plugin-axios @kubb/plugin-vue-query
npm install axios vue @tanstack/vue-query

kubb.config.ts

import { defineConfig } from 'kubb/config'
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', clean: true },
  plugins: [pluginTs(), pluginAxios(), pluginVueQuery({ hooks: true })],
})

Runtime validation with Zod, plus MSW request handlers backed by Faker.js mock data.

Terminal

npm install -D kubb typescript @kubb/plugin-ts @kubb/plugin-zod @kubb/plugin-faker @kubb/plugin-msw
npm install zod msw @faker-js/faker

kubb.config.ts

import { defineConfig } from 'kubb/config'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginZod } from '@kubb/plugin-zod'
import { pluginFaker } from '@kubb/plugin-faker'
import { pluginMsw } from '@kubb/plugin-msw'

export default defineConfig({
  input: './petStore.yaml',
  output: { path: './src/gen', clean: true },
  plugins: [pluginTs(), pluginZod(), pluginFaker(), pluginMsw({ parser: 'faker', handlers: true })],
})

To call the API with the global fetch instead of Axios, replace pluginAxios with pluginFetch from @kubb/plugin-fetch.

Format, lint, and run commands after generation

Set format and lint to a tool name, or to 'auto' to pick whichever tool is installed. output.postGenerate runs shell commands once the files are formatted and linted. Install the tools first, for example npm install -D @biomejs/biome oxlint.

kubb.config.ts

import { defineConfig } from 'kubb/config'
import { pluginTs } from '@kubb/plugin-ts'

export default defineConfig({
  input: './petStore.yaml',
  output: {
    path: './src/gen',
    clean: true,
    format: 'biome',
    lint: 'oxlint',
    postGenerate: ['npm run typecheck'],
  },
  plugins: [pluginTs()],
})

Watch mode, several specifications, and scripts

Run kubb generate --watch to regenerate on spec changes. Pass a function to defineConfig to read watch and keep clean off during incremental runs. See Config formats.
Pass an array to defineConfig to generate from several specifications in one run, each with its own plugins and output directory. Set a name per entry so the CLI output tells them apart.
Drive Kubb from a script with createKubb when you orchestrate builds or inspect diagnostics.
Run kubb validate before generation in CI to fail on an invalid specification.

Installation

Customize names and paths