tessl/npm-nuxt--kit
Toolkit for authoring modules and interacting with Nuxt
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-nuxt--kit@3.19.0index.mddocs/
@nuxt/kit
@nuxt/kit is a comprehensive toolkit for authoring Nuxt modules and programmatically interacting with Nuxt applications. It provides utilities for module definition, configuration loading, component management, plugin registration, template handling, build system integration, runtime configuration, routing, and development tools.
Package Information
- Package Name: @nuxt/kit
- Package Type: npm
- Language: TypeScript
- Installation:
npm install @nuxt/kit
Core Imports
import { defineNuxtModule, useNuxt, addComponent } from "@nuxt/kit";For CommonJS:
const { defineNuxtModule, useNuxt, addComponent } = require("@nuxt/kit");Basic Usage
import { defineNuxtModule, addComponent, addPlugin, useNuxt } from "@nuxt/kit";
// Define a Nuxt module
export default defineNuxtModule({
meta: {
name: "my-module",
configKey: "myModule"
},
defaults: {},
setup(options, nuxt) {
// Add a component
addComponent({
name: "MyComponent",
filePath: "~/components/MyComponent.vue"
});
// Add a plugin
addPlugin("~/plugins/my-plugin.client.js");
// Access the Nuxt instance
const nuxtInstance = useNuxt();
}
});Architecture
@nuxt/kit is built around several key systems:
- Module System: Core functionality for defining, installing, and managing Nuxt modules
- Configuration System: Loading and extending Nuxt configuration with layer support
- Build Integration: Plugin and configuration management for Vite, Webpack, and Rspack
- Component System: Registration and auto-discovery of Vue components
- Template System: Virtual file generation and TypeScript declarations
- Context Management: Nuxt instance access and async context handling
- Development Tools: Path resolution, logging, and compatibility checking
Capabilities
Module System
Module definition, installation, and compatibility checking for building Nuxt modules and extensions.
function defineNuxtModule<T>(definition: ModuleDefinition<T>): NuxtModule<T>;
function installModule<T>(moduleToInstall: T, inlineOptions?: any, nuxt?: Nuxt): Promise<NuxtModule>;
function hasNuxtModule(moduleName: string, nuxt?: Nuxt): boolean;Configuration & Loading
Configuration loading and schema management with support for layers and custom configurations.
function loadNuxtConfig(opts: LoadNuxtConfigOptions): Promise<NuxtOptions>;
function loadNuxt(opts: LoadNuxtOptions): Promise<Nuxt>;
function extendNuxtSchema(def: SchemaDefinition | (() => SchemaDefinition)): void;Build System Integration
Build plugin and configuration management for multiple bundlers including Vite, Webpack, and Rspack.
function addVitePlugin(plugin: VitePlugin | VitePlugin[], options?: ExtendViteConfigOptions): void;
function addWebpackPlugin(plugin: WebpackPluginInstance | WebpackPluginInstance[], options?: ExtendWebpackConfigOptions): void;
function extendViteConfig(fn: (config: ViteConfig) => void, options?: ExtendViteConfigOptions): void;Component Management
Component registration, directory scanning, and auto-discovery for Vue components.
function addComponent(opts: AddComponentOptions): void;
function addComponentsDir(dir: ComponentsDir, opts?: { prepend?: boolean }): void;
function addComponentExports(opts: Omit<AddComponentOptions, 'name'> & { prefix?: string }): void;Context & Runtime
Nuxt instance access, runtime configuration, and context management utilities.
function useNuxt(): Nuxt;
function tryUseNuxt(): Nuxt | null;
function useRuntimeConfig(): RuntimeConfig;
function updateRuntimeConfig(runtimeConfig: Record<string, unknown>): void;Auto-Imports System
Auto-import registration and management for both client-side and server-side code.
function addImports(imports: Import | Import[]): void;
function addImportsDir(dirs: string | string[], opts?: { prepend?: boolean }): void;
function addServerImports(imports: Import | Import[]): void;Plugin & Template System
Plugin registration and template generation for virtual file system and TypeScript support.
function addPlugin(plugin: NuxtPlugin | string, opts?: AddPluginOptions): NuxtPlugin;
function addTemplate<T>(template: NuxtTemplate<T> | string): ResolvedNuxtTemplate<T>;
function addTypeTemplate<T>(template: NuxtTypeTemplate<T>): ResolvedNuxtTemplate<T>;Path Resolution & File Utilities
Path resolution, alias handling, and file discovery with Nuxt-aware logic.
function createResolver(base: string | URL): Resolver;
function resolvePath(path: string, opts?: ResolvePathOptions): Promise<string>;
function resolveFiles(path: string, pattern: string | string[]): Promise<string[]>;Server Integration
Nitro server handler management, plugin registration, and server-side functionality.
function addServerHandler(handler: NitroEventHandler): void;
function addServerPlugin(plugin: string): void;
function useNitro(): Nitro;Compatibility Utilities
Version checking, compatibility validation, and migration support tools.
function getNuxtVersion(nuxt?: Nuxt): string;
function checkNuxtCompatibility(constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<NuxtCompatibilityIssues>;
function assertNuxtCompatibility(constraints: NuxtCompatibility, nuxt?: Nuxt): Promise<true>;Development Tools
Logging, ignore patterns, layer management, and other development utilities.
function useLogger(tag?: string, options?: Partial<ConsolaOptions>): ConsolaInstance;
function isIgnored(pathname: string, stats?: unknown, nuxt?: Nuxt): boolean;
function getLayerDirectories(nuxt?: Nuxt): LayerDirectories[];