unplugin-vue-components

On-demand auto-import for Vue components — eliminate all manual component imports and registrations in your Vue 3 project.

unplugin-vue-components

Vue

On-demand auto-import for Vue components — eliminate all manual component imports and registrations in your Vue 3 project.

npm GitHub Docs

Fit

Bundle (gzip)

84.7 kB

266.6 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Every Vue component must be imported and registered before use — either globally (pollutes the bundle) or locally (adds boilerplate to every single-file component). UI libraries like Naive UI and Element Plus make this especially verbose.

What It Does

This Vite/Webpack plugin scans your templates and auto-generates component imports on the fly. Use <NButton> in a template and the plugin automatically imports it from naive-ui — no manual imports needed. It also resolves your own components and generates TypeScript declarations.

Installation

bash

npm install -D unplugin-vue-components

Usage Example

typescript

// vite.config.ts
import Components from 'unplugin-vue-components/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    Components({
      resolvers: [NaiveUiResolver()],
      dts: true, // generate components.d.ts
    }),
  ],
};

vue

<!-- No imports needed! -->
<template>
  <NButton type="primary">Auto-imported!</NButton>
  <MyCustomCard />
</template>

Related packages

element-plusVue

A complete component library for Vue 3 with a clean, desktop-oriented design system.

floating-vueVue

Tooltip, popover, and dropdown directives for Vue 3 — powered by Floating UI with automatic placement and overflow detection.

naive-uiVue

Fairly complete Vue 3 UI component library — 90+ components with a TypeScript-first design and no dependency on legacy CSS frameworks.

piniaVue

The intuitive, type-safe, and lightweight state management store for Vue — the official successor to Vuex.

@tanstack/vue-queryVue

Powerful async state management for Vue — data fetching, caching, background refetching, and server state synchronization.