0Pricing
Vue Academy · Lesson

TypeScript Declarations for Component Libraries

vite-plugin-dts, generating .d.ts files, typing component props for library consumers.

TypeScript Declarations for Component Libraries is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Type Declarations

TypeScript consumers expect .d.ts files so they get autocompletion and type checking on your components and props. A published library should ship generated declarations alongside its JS.

vite-plugin-dts

vite-plugin-dts generates .d.ts files from your source during the Vite build, including types for .vue single-file components.

npm install -D vite-plugin-dts

Adding the Plugin

Add dts() to the plugins array. It runs after compilation to emit declarations into dist.

import dts from "vite-plugin-dts";

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

insertTypesEntry

The insertTypesEntry option emits a single index.d.ts entry that re-exports all your types, matching your JS entry point.

dts({
  insertTypesEntry: true
})

Generated d.ts Files

After building, dist contains .d.ts files mirroring your source plus the aggregated entry declaration. These describe component props, emits, and exports.

// dist/index.d.ts
export { MyButton } from "./MyButton.vue";
// dist/MyButton.vue.d.ts describes its props

The package.json types Field

Point consumers at the entry declaration with the types (or typings) field so TypeScript resolves your library's types.

{
  "types": "./dist/index.d.ts"
}

types in exports Map

Modern packages also expose types per entry in the exports map so subpath imports resolve correctly.

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js"
    }
  }
}

Global Component Autocompletion

When consumers register your components globally, TypeScript needs them declared in the GlobalComponents interface to get template autocompletion and prop checking.

Augmenting GlobalComponents

Ship a module augmentation that adds your components to vue's GlobalComponents. Consumers who reference your types get IntelliSense in templates.

// global.d.ts
import MyButton from "./MyButton.vue";

declare module "vue" {
  export interface GlobalComponents {
    MyButton: typeof MyButton;
  }
}
export {};

Typing Component Props

Use defineProps with a TypeScript type so the generated declaration carries accurate prop types to consumers.

// MyButton.vue <script setup lang="ts">
defineProps<{
  label: string;
  disabled?: boolean;
}>();

Verifying the Types

Before publishing, run tsc --noEmit in a sample consumer (or use a tool like attw/are-the-types-wrong) to confirm the declarations resolve and props are checked.

npx tsc --noEmit

Quick Check

What does the GlobalComponents augmentation give library consumers?

Recap

Use vite-plugin-dts with insertTypesEntry to generate .d.ts files, point package.json's types field (and exports map) at the entry declaration, and ship a GlobalComponents augmentation so consumers get template autocompletion. Type props with defineProps and verify with tsc --noEmit.

Frequently asked questions

Is the “TypeScript Declarations for Component Libraries” lesson free?

Yes — the full text of “TypeScript Declarations for Component Libraries” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “TypeScript Declarations for Component Libraries”?

vite-plugin-dts, generating .d.ts files, typing component props for library consumers. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “TypeScript Declarations for Component Libraries” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Vite Library Mode Configuration
  2. TypeScript Declarations for Component Libraries
  3. Tree-Shaking and Auto-Import
  4. Publishing to npm and Semantic Versioning
← Back to Vue Academy