Vite

About

Vite 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

• runs automatically as part of your Vite build
• reads your existing configuration (or accepts inline config)
• supports Vite 5, 6, 7, and 8

Installation

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

npm

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

pnpm

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

yarn

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

bun

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

Usage

Add the plugin to your vite.config.ts:

vite.config.ts

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

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

The plugin will automatically pick up your configuration file. You can also pass options inline using the config option:

vite.config.ts

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

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

vite.config.ts

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 or on GitHub.