Toolkit for authoring modules and interacting with Nuxt
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Auto-import registration and management for both client-side and server-side code. Enables automatic importing of functions, composables, and utilities without explicit import statements.
Register auto-imports for client-side and universal code.
/**
* Add auto-imports to the imports system
* @param imports - Import or array of imports to register
*/
function addImports(imports: Import | Import[]): void;
/**
* Add directories to be scanned for auto-imports
* @param dirs - Directory path(s) to scan
* @param opts - Directory scanning options
*/
function addImportsDir(
dirs: string | string[],
opts?: { prepend?: boolean }
): void;
/**
* Add import sources/presets for auto-imports
* @param presets - Import preset(s) to register
*/
function addImportsSources(
presets: ImportPresetWithDeprecation | ImportPresetWithDeprecation[]
): void;
interface Import {
/** Function/variable name to import */
name: string;
/** Alternative name to use locally */
as?: string;
/** Module to import from */
from: string;
/** Named import (default: true) */
type?: boolean;
/** Type import only */
typeOnly?: boolean;
/** Import priority */
priority?: number;
/** Disabled flag */
disabled?: boolean;
/** Import metadata */
meta?: ImportMeta;
}
interface ImportMeta {
/** Function description */
description?: string;
/** Function documentation URL */
docsUrl?: string;
/** Import category */
category?: string;
[key: string]: any;
}Usage Examples:
import { addImports, addImportsDir, addImportsSources } from "@nuxt/kit";
// Add individual imports
addImports([
{ name: "useMyComposable", from: "~/composables/useMyComposable" },
{ name: "myUtility", from: "~/utils/myUtility" },
{ name: "default", as: "MyClass", from: "~/classes/MyClass" }
{
name: "computed",
from: "vue",
type: true // TypeScript type import
}
]);
// Add directory for auto-scanning
addImportsDir([
"~/composables",
"~/utils"
]);
// Add with prepend (higher priority)
addImportsDir("~/priority-utils", { prepend: true });
// Add import presets
addImportsSources([
{
from: "lodash-es",
imports: ["debounce", "throttle", "cloneDeep"]
},
{
from: "@vueuse/core",
imports: ["useStorage", "useFetch", "useToggle"]
}
]);Register auto-imports specifically for server-side and Nitro code.
/**
* Add server-side auto-imports for Nitro
* @param imports - Import or array of imports to register
*/
function addServerImports(imports: Import | Import[]): void;
/**
* Add directories to be scanned for server auto-imports
* @param dirs - Directory path(s) to scan
* @param opts - Directory scanning options
*/
function addServerImportsDir(
dirs: string | string[],
opts?: { prepend?: boolean }
): void;
/**
* Add directories to be scanned by Nitro like ~/server
* @param dirs - Directory path(s) to scan
* @param opts - Directory scanning options
*/
function addServerScanDir(
dirs: string | string[],
opts?: { prepend?: boolean }
): void;Usage Examples:
import {
addServerImports,
addServerImportsDir,
addServerScanDir
} from "@nuxt/kit";
// Add server-specific imports
addServerImports([
{ name: "useServerDatabase", from: "~/server/utils/database" },
{ name: "validateRequest", from: "~/server/utils/validation" }
]);
// Add server utils directory
addServerImportsDir([
"~/server/utils",
"~/server/composables"
]);
// Add server scan directories (for API routes, middleware, etc.)
addServerScanDir([
"~/server/custom-api",
"~/server/custom-middleware"
]);Configure bulk imports from packages and libraries.
interface ImportPresetWithDeprecation {
/** Package name to import from */
from: string;
/** List of imports from the package */
imports: (string | ImportPresetImport)[];
/** Import all as namespace */
as?: string;
/** Deprecation message */
deprecatedFrom?: string;
/** Import priority */
priority?: number;
}
interface ImportPresetImport {
/** Import name */
name: string;
/** Local alias */
as?: string;
/** Type import only */
type?: boolean;
}Usage Examples:
import { addImportsSources } from "@nuxt/kit";
// Vue ecosystem imports
addImportsSources([
{
from: "vue",
imports: [
"ref",
"reactive",
"computed",
"watch",
"onMounted",
"onUnmounted",
{ name: "defineComponent", type: true }
]
},
{
from: "vue-router",
imports: ["useRoute", "useRouter", "RouteLocationRaw"]
}
]);
// Utility library imports
addImportsSources([
{
from: "lodash-es",
imports: [
"debounce",
"throttle",
"merge",
"cloneDeep",
"isEqual"
]
},
{
from: "date-fns",
imports: [
"format",
"parseISO",
"addDays",
"differenceInDays"
]
}
]);
// Namespace imports
addImportsSources([
{
from: "three",
as: "THREE"
}
]);Control auto-import behavior and discovery patterns.
Module-Level Configuration:
export default defineNuxtModule({
setup(options, nuxt) {
// Configure auto-imports for your module
addImports([
{
name: "useMyModuleState",
from: resolve(runtimeDir, "composables"),
meta: {
description: "Access module state",
category: "My Module"
}
}
]);
// Add module utilities directory
addImportsDir(resolve(runtimeDir, "utils"));
}
});Directory Structure for Auto-Discovery:
composables/
├── useAuth.ts → auto-imported as useAuth
├── useStorage.ts → auto-imported as useStorage
├── user/
│ ├── useProfile.ts → auto-imported as useProfile
│ └── useSettings.ts → auto-imported as useSettings
utils/
├── formatters.ts → exports auto-imported
├── validators.ts → exports auto-imported
└── api.ts → exports auto-importedFile Export Patterns:
// composables/useCounter.ts - default export
export default function useCounter() {
const count = ref(0);
return { count };
}
// utils/formatters.ts - named exports
export function formatCurrency(amount: number) {
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD"
}).format(amount);
}
export function formatDate(date: Date) {
return date.toLocaleDateString();
}interface ImportSources {
/** Global imports configuration */
global?: boolean;
/** Preset imports from packages */
presets?: ImportPresetWithDeprecation[];
/** Custom import directories */
dirs?: string[];
/** Transform function for imports */
transform?: (imports: Import[]) => Import[];
}Install with Tessl CLI
npx tessl i tessl/npm-nuxt--kit