unplugin-vue-components

import Components from "unplugin-vue-components/vite";

import Components from "unplugin-vue-components/webpack";
import Components from "unplugin-vue-components/rollup";
import Components from "unplugin-vue-components/esbuild";
import Components from "unplugin-vue-components/rspack";

import Components from "unplugin-vue-components/nuxt";

import { ElementPlusResolver, AntDesignVueResolver } from "unplugin-vue-components/resolvers";

import { camelCase, kebabCase, pascalCase } from "unplugin-vue-components";

import type { Options, ComponentInfo, ComponentResolver } from "unplugin-vue-components/types";

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // Auto import components from src/components directory
      dirs: ["src/components"],
      // Generate TypeScript declarations
      dts: true,
      // Auto import from UI libraries
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

<template>
  <!-- Local component auto-imported from src/components/HelloWorld.vue -->
  <HelloWorld />
  
  <!-- UI library component auto-imported via resolver -->
  <ElButton type="primary">Click me</ElButton>
</template>

<script setup lang="ts">
// No manual imports needed - components are auto-imported!
</script>

interface Options {
  include?: FilterPattern;
  exclude?: FilterPattern;
  dirs?: string | string[];
  extensions?: string | string[];
  resolvers?: ComponentResolver[];
  dts?: boolean | string;
  transformer?: "vue2" | "vue3";
}

// Build tool specific plugin functions
function VitePlugin(options?: Options): Plugin & { api: PublicPluginAPI };
function WebpackPlugin(options?: Options): WebpackPlugin;
function RollupPlugin(options?: Options): RollupPlugin;

type ComponentResolver = ComponentResolverFunction | ComponentResolverObject;

interface ComponentResolverFunction {
  (name: string): ComponentResolveResult;
}

interface ComponentResolverObject {
  type: "component" | "directive";
  resolve: ComponentResolverFunction;
}

type ComponentResolveResult = string | ComponentInfo | null | undefined | void;

function ElementPlusResolver(options?: ElementPlusResolverOptions): ComponentResolver;
function AntDesignVueResolver(options?: AntDesignVueResolverOptions): ComponentResolver;
function VuetifyResolver(options?: VuetifyResolverOptions): ComponentResolver;

interface PublicPluginAPI {
  findComponent(name: string, filename?: string): Promise<ComponentInfo | undefined>;
  stringifyImport(info: ComponentInfo): string;
}

interface ComponentInfo {
  as?: string;
  name?: string;
  from: string;
  sideEffects?: SideEffectsInfo;
}

function camelCase(str: string): string;
function kebabCase(str: string): string;
function pascalCase(str: string): string;

// nuxt.config.ts
export default defineNuxtModule({
  modules: ["unplugin-vue-components/nuxt"],
  components: {
    // Configuration options
  },
});

interface Options {
  /** RegExp or glob to match files to be transformed */
  include?: FilterPattern;
  /** RegExp or glob to match files to NOT be transformed */
  exclude?: FilterPattern;
  /** RegExp or string to match component names that will NOT be imported */
  excludeNames?: FilterPattern;
  /** Relative paths to the directory to search for components */
  dirs?: string | string[];
  /** Valid file extensions for components */
  extensions?: string | string[];
  /** Glob patterns to match file names to be detected as components */
  globs?: string | string[];
  /** Negated glob patterns to exclude files from being detected as components */
  globsExclude?: string | string[];
  /** Search for subdirectories */
  deep?: boolean;
  /** Allow subdirectories as namespace prefix for components */
  directoryAsNamespace?: boolean;
  /** Generate components with prefix */
  prefix?: string;
  /** Collapse same prefixes of folders and components */
  collapseSamePrefixes?: boolean;
  /** Subdirectory paths for ignoring namespace prefixes */
  globalNamespaces?: string[];
  /** Custom component resolvers */
  resolvers?: ComponentResolver[];
  /** Custom function to transform the importing path */
  importPathTransform?: (path: string) => string | undefined;
  /** Transformer to apply */
  transformer?: "vue2" | "vue3";
  /** Transform users' usage of resolveComponent/resolveDirective as well */
  transformerUserResolveFunctions?: boolean;
  /** Generate TypeScript declaration for global components */
  dts?: boolean | string;
  /** Do not emit warning on component overriding */
  allowOverrides?: boolean;
  /** Auto import for directives */
  directives?: boolean;
  /** Only provide types of components in library */
  types?: TypeImport[];
  /** Vue version of project */
  version?: 2 | 2.7 | 3;
  /** Generate sourcemap for the transformed code */
  sourcemap?: boolean;
  /** Save component information into a JSON file */
  dumpComponentsInfo?: boolean | string;
}

type FilterPattern = string | RegExp | (string | RegExp)[];

interface ComponentInfo {
  /** Import alias name */
  as?: string;
  /** Component name */
  name?: string;
  /** Import path */
  from: string;
  /** Side effect imports */
  sideEffects?: SideEffectsInfo;
}

interface ImportInfo {
  /** Import alias */
  as?: string;
  /** Import name */
  name?: string;
  /** Import source */
  from: string;
}

type SideEffectsInfo = (ImportInfo | string)[] | ImportInfo | string | undefined;

interface TypeImport {
  /** Import source */
  from: string;
  /** Type names to import */
  names: string[];
}

interface PublicPluginAPI {
  /** Resolves a component using the configured resolvers */
  findComponent(name: string, filename?: string): Promise<ComponentInfo | undefined>;
  /** Obtain an import statement for a resolved component */
  stringifyImport(info: ComponentInfo): string;
}

type ComponentResolveResult = string | ComponentInfo | null | undefined | void;

type ComponentResolverFunction = (name: string) => ComponentResolveResult;

interface ComponentResolverObject {
  type: "component" | "directive";
  resolve: ComponentResolverFunction;
}

type ComponentResolver = ComponentResolverFunction | ComponentResolverObject;