vite-plugin-dts

Install

pnpm i -D vite-plugin-dts

Usage

In vite.config.ts:

import { resolve } from 'path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      formats: ['es'],
      fileName: 'my-lib',
    },
  },
  plugins: [dts()],
})

By default, the generated declaration files are following the source structure.

Fortunately, with the help of API Extractor, the plugin can bundle all types into a single file. You just need to install @microsoft/api-extractor and set bundleTypes: true:

export default defineConfig({
  plugins: [dts({ bundleTypes: true })],
})

When moduleFormat is omitted, the plugin preserves TypeScript's declaration extensions: .ts → .d.ts, .mts → .d.mts, and .cts → .d.cts, including declaration maps.

Declaration maps preserve absolute file:// source URLs, including Windows cross-drive paths, across all output directories.

When publishing both ESM and CommonJS, explicitly add outDirs entries with moduleFormat: 'esm' and moduleFormat: 'cjs'; Vite's JavaScript formats are not inferred. Each entry is bundled once and reused for both declaration formats. Configure conditional exports.types entries separately in package.json.

If you start with official Vite template, you should specify the tsconfigPath:

export default defineConfig({
  plugins: [dts({ tsconfigPath: './tsconfig.app.json' })],
})

Documentation

For full documentation, please refer to unplugin-dts.

Example

A real project using this plugin: Vexip UI.

License

MIT License.