CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nuxt

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

core.mddocs/

Core Framework

Essential functions for creating, configuring, and building Nuxt applications programmatically. These APIs are primarily used for custom build processes, testing frameworks, and advanced deployment scenarios.

Capabilities

Create Nuxt Instance

Creates a new Nuxt instance with the provided configuration options.

/**
 * Creates a new Nuxt instance with configuration
 * @param options - Configuration options for the Nuxt instance
 * @returns Configured Nuxt instance with hooks and lifecycle methods
 */
function createNuxt(options: NuxtOptions): Nuxt;

interface NuxtOptions {
  rootDir?: string;
  srcDir?: string;
  dev?: boolean;
  ssr?: boolean;
  mode?: "spa" | "universal";
  modern?: boolean | "client" | "server";
  head?: MetaInfo;
  meta?: MetaInfo;
  fetch?: {
    server?: boolean;
    client?: boolean;
  };
  features?: {
    store?: boolean;
    layouts?: boolean;
    meta?: boolean;
    middleware?: boolean;
    transitions?: boolean;
    deprecations?: boolean;
    validate?: boolean;
    asyncData?: boolean;
    fetch?: boolean;
    clientOnline?: boolean;
    clientPrefetch?: boolean;
    clientUUID?: boolean;
    transformAssetUrls?: boolean;
  };
  render?: {
    bundleRenderer?: any;
    resourceHints?: boolean;
    ssr?: boolean;
    csp?: boolean | any;
    http2?: {
      push?: boolean;
      shouldPush?: Function;
    };
    static?: any;
    compressor?: any;
    etag?: any;
    dist?: any;
  };
  router?: {
    base?: string;
    mode?: "hash" | "history";
    middleware?: string | string[];
    linkActiveClass?: string;
    linkExactActiveClass?: string;
    linkPrefetchedClass?: string;
    extendRoutes?: Function;
    scrollBehavior?: Function;
    parseQuery?: Function;
    stringifyQuery?: Function;
    fallback?: boolean;
    prefetchLinks?: boolean;
    prefetchPayloads?: boolean;
    trailingSlash?: boolean;
  };
  dir?: {
    assets?: string;
    app?: string;
    layouts?: string;
    middleware?: string;
    pages?: string;
    plugins?: string;
    static?: string;
    store?: string;
  };
  [key: string]: any;
}

interface Nuxt {
  options: NuxtOptions;
  ready: () => Promise<Nuxt>;
  hook: (name: string, fn: Function) => void;
  callHook: (name: string, ...args: any[]) => Promise<void>;
  addPlugin: (template: NuxtPlugin) => void;
  addLayout: (template: NuxtTemplate, name?: string) => void;
  addErrorLayout: (dst: string) => void;
  addServerMiddleware: (middleware: any) => void;
  requiredModules: { [name: string]: any };
  close: (callback?: () => any) => Promise<void>;
  listen: (port?: number, host?: string) => Promise<void>;
  showReady: (showMemoryUsage?: boolean) => void;
  render: (req: any, res: any) => Promise<void>;
  renderRoute: (route: string, context?: any) => Promise<any>;
  renderAndGetWindow: (url: string, opts?: any) => Promise<any>;
  generate: (options?: any) => Promise<void>;
}

Usage Examples:

import { createNuxt } from "nuxt";

// Create a basic Nuxt instance
const nuxt = createNuxt({
  dev: process.env.NODE_ENV !== "production",
  rootDir: process.cwd(),
  srcDir: "src/"
});

// Create with custom configuration
const customNuxt = createNuxt({
  dev: false,
  ssr: true,
  head: {
    title: "My App",
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" }
    ]
  },
  modules: ["@nuxtjs/axios"]
});

// Set up hooks
nuxt.hook("ready", async () => {
  console.log("Nuxt is ready");
});

await nuxt.ready();

Load Nuxt Instance

Loads and initializes a Nuxt instance from configuration files with automatic config resolution.

/**
 * Loads and initializes a Nuxt instance from configuration
 * @param opts - Loading options including config overrides
 * @returns Promise resolving to initialized Nuxt instance
 */
function loadNuxt(opts: LoadNuxtOptions): Promise<Nuxt>;

interface LoadNuxtOptions {
  rootDir?: string;
  configFile?: string;
  ready?: boolean;
  dev?: boolean;
  envConfig?: {
    dotenv?: string | boolean;
    env?: Record<string, any>;
  };
  for?: "dev" | "build" | "start" | "generate";
}

Usage Examples:

import { loadNuxt } from "nuxt";

// Load with default configuration
const nuxt = await loadNuxt({
  for: "dev"
});

// Load for production build
const buildNuxt = await loadNuxt({
  for: "build",
  dev: false,
  rootDir: "/path/to/project"
});

// Load with custom config file
const customNuxt = await loadNuxt({
  configFile: "nuxt.custom.config.js",
  ready: true
});

// Load for static generation
const generateNuxt = await loadNuxt({
  for: "generate",
  dev: false
});

Build Application

Builds the Nuxt application, setting up app generation, bundling, and optimization.

/**
 * Builds the Nuxt application
 * @param nuxt - The Nuxt instance to build
 * @returns Promise that resolves when build is complete
 */
function build(nuxt: Nuxt): Promise<void>;

Usage Examples:

import { loadNuxt, build } from "nuxt";

// Standard build process
const nuxt = await loadNuxt({ for: "build" });
await build(nuxt);
await nuxt.close();

// Build with hooks
const nuxt = await loadNuxt({ for: "build" });

nuxt.hook("build:before", (nuxt, buildOptions) => {
  console.log("Build starting...");
});

nuxt.hook("build:done", (nuxt) => {
  console.log("Build completed!");
});

await build(nuxt);

// Build for different environments
if (process.env.ANALYZE === "true") {
  const nuxt = await loadNuxt({ 
    for: "build",
    dev: false 
  });
  
  // Enable bundle analyzer
  nuxt.options.build = nuxt.options.build || {};
  nuxt.options.build.analyze = true;
  
  await build(nuxt);
  await nuxt.close();
}

Complete Build Workflow

import { loadNuxt, build } from "nuxt";

async function buildApplication() {
  let nuxt;
  
  try {
    // Load Nuxt configuration
    nuxt = await loadNuxt({
      for: "build",
      rootDir: process.cwd()
    });

    // Set up build hooks
    nuxt.hook("build:before", () => {
      console.log("Starting build process...");
    });

    nuxt.hook("build:compile", ({ name, compiler }) => {
      console.log(`Compiling ${name}...`);
    });

    nuxt.hook("build:compiled", ({ name, stats }) => {
      console.log(`Compiled ${name} in ${stats.endTime - stats.startTime}ms`);
    });

    nuxt.hook("build:done", () => {
      console.log("Build process completed!");
    });

    // Start the build
    await build(nuxt);
    
    console.log("✓ Build successful!");
    
  } catch (error) {
    console.error("Build failed:", error);
    process.exit(1);
  } finally {
    // Clean up
    if (nuxt) {
      await nuxt.close();
    }
  }
}

// Run the build
buildApplication();

Error Handling

import { loadNuxt, build } from "nuxt";

async function safeBuild() {
  let nuxt = null;
  
  try {
    nuxt = await loadNuxt({ for: "build" });
    
    // Handle build errors
    nuxt.hook("build:error", (error) => {
      console.error("Build error:", error);
      throw error;
    });
    
    await build(nuxt);
    
  } catch (error) {
    if (error.statusCode === 404) {
      console.error("Configuration file not found");
    } else if (error.name === "ModuleNotFoundError") {
      console.error("Missing module dependency:", error.message);
    } else {
      console.error("Unexpected build error:", error);
    }
    throw error;
  } finally {
    if (nuxt) {
      await nuxt.close();
    }
  }
}

Types

interface LoadNuxtConfigOptions {
  rootDir?: string;
  configFile?: string;
  configContext?: any;
  configOverrides?: any;
}

interface NuxtPlugin {
  src: string;
  fileName?: string;
  dst?: string;
  mode?: "client" | "server" | "all";
  ssr?: boolean;
  options?: any;
}

interface NuxtTemplate {
  src: string;
  fileName?: string;
  dst?: string;
  options?: any;
}

interface MetaInfo {
  title?: string;
  titleTemplate?: string | ((title?: string) => string);
  meta?: any[];
  link?: any[];
  style?: any[];
  script?: any[];
  base?: any;
  noscript?: any[];
  __dangerouslyDisableSanitizers?: string[];
  __dangerouslyDisableSanitizersByTagID?: { [id: string]: string[] };
}

Install with Tessl CLI

npx tessl i tessl/npm-nuxt

docs

app-lifecycle.md

configuration.md

core.md

data-fetching.md

head.md

index.md

module-dev.md

navigation.md

performance.md

ssr.md

state.md

tile.json