Vue Support

tsdown provides first-class support for building Vue component libraries by seamlessly integrating with unplugin-vue and rolldown-plugin-dts. This setup enables you to bundle Vue components and generate type declarations with modern TypeScript tooling.

Quick Start

For the fastest way to get started, use the vue-components-starter template. This starter project comes pre-configured for Vue library development, so you can focus on building components right away.

Minimal Example

To configure tsdown for a Vue library, use the following setup in your tsdown.config.ts:

tsdown.config.ts

import { defineConfig } from 'tsdown'
import Vue from 'unplugin-vue/rolldown'

export default defineConfig({
  entry: ['./src/index.ts'],
  platform: 'neutral',
  plugins: [Vue({ isProduction: true })],
  dts: { vue: true },
})

Install the required dependencies:

npm install -D unplugin-vue vue-tsc

How It Works

• unplugin-vue compiles .vue single-file components into JavaScript and extracts CSS, making them ready for bundling.
• rolldown-plugin-dts (with vue: true) and vue-tsc work together to generate accurate TypeScript declaration files for your Vue components, ensuring consumers of your library get full type support.

TIP

Set platform: 'neutral' to maximize compatibility for libraries that may be used in both browser and Node.js environments.