CtrlK
BlogDocsLog inGet started
Tessl Logo

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

auto-imports.mddocs/

Auto-Imports System

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.

Capabilities

Client-Side Auto-Imports

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"]
  }
]);

Server-Side Auto-Imports

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"
]);

Import Presets and Sources

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"
  }
]);

Auto-Import Configuration

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-imported

File 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();
}

Types

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

docs

auto-imports.md

build-system.md

compatibility.md

components.md

configuration.md

context-runtime.md

development-tools.md

index.md

module-system.md

path-resolution.md

plugins-templates.md

server-integration.md

tile.json