---
title: "Vite Plugin"
description: "Integrate @hey-api/openapi-ts into your Vite 5, 6, 7, or 8 build pipeline with the official Vite plugin."
url: "https://heyapi.dev/docs/openapi/typescript/configuration/vite"
---

### About

[Section titled “About”](#about)

[Vite](https://vite.dev) is a blazing fast frontend build tool powering the next generation of web applications.

The Vite plugin integrates `@hey-api/openapi-ts` into the Vite build pipeline, running automatically whenever Vite resolves its configuration – no separate script or manual step required.

## Features

[Section titled “Features”](#features)

* runs automatically as part of your Vite build
* reads your existing [configuration](https://heyapi.dev/openapi-ts/get-started) (or accepts inline config)
* supports Vite 5, 6, 7, and 8

## Installation

[Section titled “Installation”](#installation)

You can download `@hey-api/vite-plugin` from npm using your favorite package manager.

* npm

  ```sh
  npm install @hey-api/vite-plugin -D -E
  ```

* pnpm

  ```sh
  pnpm add @hey-api/vite-plugin -D -E
  ```

* yarn

  ```sh
  yarn add @hey-api/vite-plugin -D -E
  ```

* bun

  ```sh
  bun add @hey-api/vite-plugin -D
  ```

## Usage

[Section titled “Usage”](#usage)

Add the plugin to your `vite.config.ts`:

vite.config.ts

```js
import { heyApiPlugin } from '@hey-api/vite-plugin';
import { defineConfig } from 'vite';


export default defineConfig({
  plugins: [heyApiPlugin()],
});
```

The plugin will automatically pick up your [configuration](https://heyapi.dev/openapi-ts/configuration) file. You can also pass options inline using the `config` option:

vite.config.ts

```js
import { heyApiPlugin } from '@hey-api/vite-plugin';
import { defineConfig } from 'vite';


export default defineConfig({
  plugins: [
    heyApiPlugin({
      config: {
        input: 'hey-api/backend', // sign up at app.heyapi.dev
        output: 'src/client',
      },
    }),
  ],
});
```

## Vite Options

[Section titled “Vite Options”](#vite-options)

You can pass Vite Plugin API options using the `vite` option. For example, to run the plugin only during development:

vite.config.ts

```js
import { heyApiPlugin } from '@hey-api/vite-plugin';
import { defineConfig } from 'vite';


export default defineConfig({
  plugins: [
    heyApiPlugin({
      config: {
        input: 'hey-api/backend', // sign up at app.heyapi.dev
        output: 'src/client',
      },
      vite: {
        apply: 'serve',
      },
    }),
  ],
});
```

## Examples

You can view live examples on [StackBlitz](https://stackblitz.com/orgs/github/hey-api/collections/openapi-ts-examples) or on [GitHub](https://github.com/hey-api/openapi-ts/tree/main/examples).