or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-vuepress--plugin-register-components

VuePress plugin that automatically registers Vue components globally within a VuePress site

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vuepress/plugin-register-components@1.9.x

To install, run

npx @tessl/cli install tessl/npm-vuepress--plugin-register-components@1.9.0

index.mddocs/

VuePress Plugin Register Components

VuePress plugin that automatically registers Vue components globally within a VuePress site. It supports both directory-based component discovery through glob patterns and explicit component registration via configuration, with customizable component naming strategies.

Package Information

  • Package Name: @vuepress/plugin-register-components
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install @vuepress/plugin-register-components or yarn add @vuepress/plugin-register-components

Core Imports

// For use in VuePress config
const registerComponentsPlugin = require('@vuepress/plugin-register-components');

For TypeScript projects:

import registerComponentsPlugin from '@vuepress/plugin-register-components';

Basic Usage

// In .vuepress/config.js
module.exports = {
  plugins: [
    // Basic usage - scan default components directory
    '@vuepress/register-components',
    
    // With configuration
    [
      '@vuepress/register-components',
      {
        componentsDir: './src/components',
        components: [
          {
            name: 'MyCustomComponent',
            path: './src/components/Custom.vue'
          }
        ]
      }
    ]
  ]
}

Architecture

The plugin operates during VuePress build time to generate dynamic JavaScript modules that register Vue components:

  • Directory Scanner: Uses glob patterns to find .vue files in specified directories
  • Dynamic Import Generator: Creates Vue component registrations with lazy loading
  • Multiple Instance Support: Can be used multiple times with unique module IDs
  • Component Name Transformation: Customizable function to convert file paths to component names

Capabilities

Plugin Factory Function

Creates a VuePress plugin instance with component registration functionality.

/**
 * VuePress plugin factory for registering components
 * @param {PluginOptions} options - Configuration options for component registration
 * @param {Context} context - VuePress context object
 * @returns {PluginEntry} VuePress plugin object with component registration capabilities
 */
function registerComponentsPlugin(options, context): PluginEntry;

interface PluginOptions {
  /** Directory or directories containing Vue components to register globally */
  componentsDir?: string | string[];
  /** Array of components to register explicitly by name and path */
  components?: ComponentDefinition[];
  /** Function to customize component names for files under componentsDir */
  getComponentName?: (file: string) => string;
}

interface ComponentDefinition {
  /** Component name for Vue.component registration */
  name: string;
  /** Absolute or relative path to the .vue component file */
  path: string;
}

interface PluginEntry {
  /** Allows plugin to be used multiple times */
  multiple: true;
  /** Generates component registration code during build */
  enhanceAppFiles(): Promise<FileDescriptor[]>;
}

interface FileDescriptor {
  /** Generated filename for the component registration module */
  name: string;
  /** JavaScript code that registers Vue components */
  content: string;
}

Usage Examples:

// Directory-based registration
module.exports = {
  plugins: [
    [
      '@vuepress/register-components',
      {
        componentsDir: [
          './src/components',
          './docs/.vuepress/components'
        ]
      }
    ]
  ]
}

// Explicit component registration
module.exports = {
  plugins: [
    [
      '@vuepress/register-components',
      {
        components: [
          {
            name: 'MyButton',
            path: './src/components/Button.vue'
          },
          {
            name: 'MyCard',
            path: './src/components/Card.vue'
          }
        ]
      }
    ]
  ]
}

// Custom naming function
module.exports = {
  plugins: [
    [
      '@vuepress/register-components',
      {
        componentsDir: './components',
        getComponentName: (file) => {
          // Convert path/to/component.vue to PathToComponent
          return file
            .split('/')
            .map(part => part.charAt(0).toUpperCase() + part.slice(1))
            .join('');
        }
      }
    ]
  ]
}

Component Directory Scanning

Automatically discovers Vue components in specified directories.

/**
 * Scans a directory for Vue component files
 * @param {string} componentDir - Directory path to scan for .vue files
 * @returns {Promise<string[] | undefined>} Array of component file names without .vue extension
 */
async function resolveComponents(componentDir: string): Promise<string[] | undefined>;

Component Name Transformation

Converts file paths to component names for registration.

/**
 * Default function to convert file paths to component names
 * @param {string} file - File path relative to component directory
 * @returns {string} Component name with slashes replaced by dashes
 */
function fileToComponentName(file: string): string;

Usage Example:

fileToComponentName('forms/UserForm') // Returns: 'forms-UserForm'
fileToComponentName('ui/buttons/PrimaryButton') // Returns: 'ui-buttons-PrimaryButton'

Generated Component Registration

The plugin generates JavaScript modules that register components with Vue during runtime:

// Example generated content
import Vue from 'vue'
Vue.component("MyComponent", () => import("/path/to/MyComponent.vue"))
Vue.component("forms-UserForm", () => import("/path/to/forms/UserForm.vue"))

Configuration Options

componentsDir

  • Type: string | string[]
  • Default: []
  • Description: Directory or array of directories containing Vue components to register globally

All .vue files in specified directories will be automatically registered as global components. Component names are generated using the getComponentName function.

components

  • Type: ComponentDefinition[]
  • Default: []
  • Description: Array of components to register explicitly by name and path

Allows precise control over component registration with custom names and paths.

getComponentName

  • Type: (file: string) => string
  • Default: file => file.replace(/\/|\\/g, '-')
  • Description: Function to customize component names for files under componentsDir

The function receives the file path (without .vue extension) relative to the component directory and should return the desired component name for Vue registration.

Plugin Features

  • Multiple Instance Support: The plugin can be used multiple times in the same VuePress configuration with different settings
  • Lazy Loading: Components are loaded dynamically using Vue's async component pattern for better performance
  • Cross-Platform Path Handling: Supports both Unix and Windows path separators
  • TypeScript Integration: Includes TypeScript definitions for configuration options
  • Build-Time Registration: Component registration happens during VuePress build process, not runtime