tessl/npm-nuxt--kit

Toolkit for authoring modules and interacting with Nuxt

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Component Management

Name: tessl/npm-nuxt--kit
Author: tessl

Component registration, directory scanning, and auto-discovery for Vue components within Nuxt applications. Provides utilities for both manual component registration and automatic discovery.

Capabilities

Component Registration

/**
 * Register a component by name and file path
 * @param opts - Component registration options
 */
function addComponent(opts: AddComponentOptions): void;

interface AddComponentOptions {
  /** Component name for usage in templates */
  name: string;
  /** File path to the component */
  filePath: string;
  /** Export name if not default export */
  export?: string;
  /** Make component globally available */
  global?: boolean;
  /** Component is for development only */
  dev?: boolean;
  /** Component is for islands */
  island?: boolean;
  /** Component mode (client, server, all) */
  mode?: ComponentMode;
  /** Component prefix */
  prefix?: string;
  /** Component suffix */
  suffix?: string;
  /** Kebab case the component name */
  kebabCase?: boolean;
  /** Pascal case the component name */
  pascalCase?: boolean;
  /** Component priority for name conflicts */
  priority?: number;
  /** Component metadata */
  meta?: Record<string, any>;
}

type ComponentMode = "client" | "server" | "all";

Usage Examples:

import { addComponent } from "@nuxt/kit";

// Register a global component
addComponent({
  name: "MyButton",
  filePath: "~/components/MyButton.vue",
  global: true
});

// Register a client-only component
addComponent({
  name: "ClientChart",
  filePath: "~/components/ClientChart.vue",
  mode: "client",
  global: false
});

// Register component with specific export
addComponent({
  name: "SpecialComponent",
  filePath: "~/components/exports.ts",
  export: "SpecialComponent"
});

Component Exports

Add components from named exports of files or packages.

/**
 * Add components from named exports of a file/package
 * @param opts - Component exports options
 */
function addComponentExports(
  opts: Omit<AddComponentOptions, 'name'> & { prefix?: string }
): void;

Usage Examples:

import { addComponentExports } from "@nuxt/kit";

// Add all exports from a file
addComponentExports({
  filePath: "~/components/ui/index.ts",
  prefix: "Ui"
});

// Add exports from an npm package
addComponentExports({
  filePath: "my-component-library",
  global: true,
  prefix: "Lib"
});

Directory Scanning

/**
 * Register a directory to be scanned for components
 * @param dir - Directory configuration or path string
 * @param opts - Directory scanning options
 */
function addComponentsDir(
  dir: ComponentsDir,
  opts?: { prepend?: boolean }
): void;

interface ComponentsDir {
  /** Directory path to scan */
  path: string;
  /** Pattern to match files (default: **/*.{vue,js,ts,jsx,tsx}) */
  pattern?: string | string[];
  /** Ignore patterns */
  ignore?: string[];
  /** Prefix for component names */
  prefix?: string;
  /** Make all components global */
  global?: boolean;
  /** Watch directory for changes */
  watch?: boolean;
  /** Extensions to scan */
  extensions?: string[];
  /** Component mode for all components */
  mode?: ComponentMode;
  /** Path prefix to remove from component names */
  pathPrefix?: boolean;
  /** Enable islands for components */
  island?: boolean;
  /** Component priority */
  priority?: number;
  /** Enable transpilation */
  transpile?: boolean | "auto";
}

Usage Examples:

import { addComponentsDir } from "@nuxt/kit";

// Add basic components directory
addComponentsDir({
  path: "~/components/ui",
  prefix: "Ui"
});

// Add directory with custom configuration
addComponentsDir({
  path: "~/components/charts",
  pattern: "**/*.chart.vue",
  prefix: "Chart",
  global: true,
  mode: "client",
  extensions: [".vue"],
  watch: true
});

// Add directory with path prefix removal
addComponentsDir({
  path: "~/components/form",
  pathPrefix: false,
  ignore: ["**/internal/**"]
});

// Prepend directory (higher priority)
addComponentsDir({
  path: "~/components/override",
  priority: 10
}, { prepend: true });

Component Discovery Patterns

Examples of component discovery and naming patterns.

File Structure to Component Names:

components/
├── ui/
│   ├── Button.vue          → <UiButton>
│   ├── form/
│   │   ├── Input.vue       → <UiFormInput>
│   │   └── Select.vue      → <UiFormSelect>
├── layout/
│   ├── Header.vue          → <LayoutHeader>
│   └── Footer.vue          → <LayoutFooter>
└── MyComponent.vue         → <MyComponent>

Advanced Component Registration:

import { addComponent, addComponentsDir } from "@nuxt/kit";

// Register components with islands support
addComponent({
  name: "LazyChart",
  filePath: "~/components/LazyChart.vue",
  island: true,
  mode: "client"
});

// Directory with island components
addComponentsDir({
  path: "~/components/islands",
  island: true,
  pattern: "**/*.island.vue",
  global: true
});

// Development-only components
addComponentsDir({
  path: "~/components/dev",
  global: true,
  // Only available in development
  watch: process.env.NODE_ENV === "development"
});

Types

interface ComponentMeta {
  /** Component is async */
  async?: boolean;
  /** Component file size */
  size?: number;
  /** Component dependencies */
  deps?: string[];
  [key: string]: any;
}

Install with Tessl CLI