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.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
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.
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();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
});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();
}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();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();
}
}
}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