tessl/npm-unplugin-vue-components

Vue component auto-importing plugin for multiple build tools including Vite, Webpack, Rollup, and esbuild

—

Pending

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-unplugin-vue-components
Author: tessl

Core plugin setup and configuration options for customizing component discovery, transformations, and build tool integration across Vite, Webpack, Rollup, esbuild, and Rspack.

Capabilities

Build Tool Plugins

Plugin factory functions for different build tools, all sharing the same configuration interface.

/**
 * Vite plugin factory with public API access
 * @param options - Plugin configuration options
 * @returns Vite plugin with attached API for programmatic access
 */
function VitePlugin(options?: Options): Plugin & { api: PublicPluginAPI };

/**
 * Webpack plugin factory
 * @param options - Plugin configuration options
 * @returns Webpack plugin instance
 */
function WebpackPlugin(options?: Options): WebpackPlugin;

/**
 * Rollup plugin factory
 * @param options - Plugin configuration options
 * @returns Rollup plugin instance
 */
function RollupPlugin(options?: Options): RollupPlugin;

/**
 * ESBuild plugin factory
 * @param options - Plugin configuration options
 * @returns ESBuild plugin instance
 */
function ESBuildPlugin(options?: Options): ESBuildPlugin;

/**
 * Rspack plugin factory
 * @param options - Plugin configuration options
 * @returns Rspack plugin instance
 */
function RspackPlugin(options?: Options): RspackPlugin;

File Matching Configuration

Configure which files should be processed for component auto-importing.

interface FileMatchingOptions {
  /** 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;
}

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

Usage Examples:

// Include only Vue files and TypeScript files
Components({
  include: [/\.vue$/, /\.tsx?$/],
  exclude: [/node_modules/, /\.test\.(js|ts)$/],
  excludeNames: ["RouterView", "RouterLink"]
});

// Using glob patterns
Components({
  include: ["**/*.vue", "**/*.tsx"],
  exclude: ["**/node_modules/**", "**/*.spec.*"],
});

Component Directory Configuration

Configure how and where components are discovered from the filesystem.

interface DirectoryOptions {
  /** Relative paths to directories to search for components */
  dirs?: 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[];
}

Usage Examples:

// Multiple component directories
Components({
  dirs: ["src/components", "src/ui", "src/widgets"],
  deep: true,
  directoryAsNamespace: true,
});

// Namespace configuration
Components({
  dirs: ["src/components"],
  directoryAsNamespace: true,
  globalNamespaces: ["common", "shared"],
  collapseSamePrefixes: true,
});

// Component prefix
Components({
  dirs: ["src/components"],
  prefix: "App",
});

File Pattern Configuration

Advanced file discovery using glob patterns instead of directory-based search.

interface GlobOptions {
  /** 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[];
  /** Valid file extensions for components */
  extensions?: string | string[];
}

Usage Examples:

// Custom glob patterns
Components({
  globs: ["src/**/components/*.vue", "src/ui/**/*.tsx"],
  globsExclude: ["**/*.test.*", "**/*.story.*"],
});

// File extensions
Components({
  dirs: ["src/components"],
  extensions: ["vue", "tsx", "jsx"],
});

Vue Configuration

Vue-specific configuration options for different Vue versions and transformation modes.

interface VueOptions {
  /** Vue version of project - auto-detected if not specified */
  version?: 2 | 2.7 | 3;
  /** Transformer to apply */
  transformer?: "vue2" | "vue3";
  /** Transform users' usage of resolveComponent/resolveDirective as well */
  transformerUserResolveFunctions?: boolean;
  /** Auto import for directives */
  directives?: boolean;
}

Usage Examples:

// Vue 2 configuration
Components({
  version: 2,
  transformer: "vue2",
  directives: false, // Requires @babel/parser for Vue 2
});

// Vue 3 with directives
Components({
  version: 3,
  transformer: "vue3",
  directives: true,
  transformerUserResolveFunctions: true,
});

Development and Build Options

Configuration for TypeScript declarations, source maps, and development features.

interface BuildOptions {
  /** Generate TypeScript declaration for global components */
  dts?: boolean | string;
  /** Generate sourcemap for the transformed code */
  sourcemap?: boolean;
  /** Save component information into a JSON file for other tools to consume */
  dumpComponentsInfo?: boolean | string;
  /** Do not emit warning on component overriding */
  allowOverrides?: boolean;
}

Usage Examples:

// TypeScript declarations
Components({
  dts: true, // generates components.d.ts
  // or custom path
  dts: "src/types/components.d.ts",
});

// Development features
Components({
  sourcemap: true,
  dumpComponentsInfo: ".components-info.json",
  allowOverrides: false,
});

Advanced Configuration

Advanced options for custom transformations and resolvers.

interface AdvancedOptions {
  /** Custom component resolvers */
  resolvers?: ComponentResolver[];
  /** Custom function to transform the importing path */
  importPathTransform?: (path: string) => string | undefined;
  /** Only provide types of components in library (registered globally) */
  types?: TypeImport[];
}

interface TypeImport {
  from: string;
  names: string[];
}

Usage Examples:

// Custom path transformation
Components({
  importPathTransform: (path) => {
    // Transform absolute paths to relative
    return path.replace(/^@\//, "./src/");
  },
});

// Type-only imports
Components({
  types: [
    {
      from: "vue-router",
      names: ["RouteLocationNormalized", "Router"],
    },
  ],
});

Complete Configuration Example

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

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // File matching
      include: [/\.vue$/, /\.tsx?$/],
      exclude: [/node_modules/, /\.test\./],
      excludeNames: ["RouterView"],
      
      // Component discovery
      dirs: ["src/components", "src/ui"],
      extensions: ["vue", "tsx"],
      deep: true,
      directoryAsNamespace: true,
      globalNamespaces: ["common"],
      
      // Vue configuration
      version: 3,
      transformer: "vue3",
      directives: true,
      
      // Build options
      dts: "src/types/components.d.ts",
      sourcemap: true,
      allowOverrides: false,
      
      // UI library resolvers
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass",
        }),
        AntDesignVueResolver({
          importStyle: false,
        }),
      ],
      
      // Advanced options
      importPathTransform: (path) => path.replace(/^@\//, "./src/"),
    }),
  ],
});

Other Build Tools Configuration

Examples for Webpack, Rollup, ESBuild, and Rspack configurations:

Webpack Configuration:

// webpack.config.js
const Components = require("unplugin-vue-components/webpack");

module.exports = {
  plugins: [
    Components({
      dirs: ["src/components"],
      dts: true,
      resolvers: [ElementPlusResolver()],
    }),
  ],
};

Rollup Configuration:

// rollup.config.js
import Components from "unplugin-vue-components/rollup";

export default {
  plugins: [
    Components({
      dirs: ["src/components"],
      dts: true,
      resolvers: [ElementPlusResolver()],
    }),
  ],
};

ESBuild Configuration:

// esbuild.config.js
import { build } from "esbuild";
import Components from "unplugin-vue-components/esbuild";

build({
  plugins: [
    Components({
      dirs: ["src/components"],
      dts: true,
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

Rspack Configuration:

// rspack.config.js
const Components = require("unplugin-vue-components/rspack");

module.exports = {
  plugins: [
    Components({
      dirs: ["src/components"],
      dts: true,
      resolvers: [ElementPlusResolver()],
    }),
  ],
};

Install with Tessl CLI

npx tessl i tessl/npm-unplugin-vue-components

docs

component-resolution.md

index.md

nuxt-integration.md

plugin-configuration.md

typescript-integration.md

ui-library-resolvers.md

tile.json

tessl/npm-unplugin-vue-components