or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

app-lifecycle.mdconfiguration.mdcore.mddata-fetching.mdhead.mdindex.mdmodule-dev.mdnavigation.mdperformance.mdssr.mdstate.md
tile.json

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.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/nuxt@4.1.x

To install, run

npx @tessl/cli install tessl/npm-nuxt@4.1.0

index.mddocs/

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. It provides server-side rendering, static site generation, hybrid rendering, and edge-side rendering capabilities with automatic routing, built-in data fetching, SEO optimization, and zero-configuration TypeScript support.

Package Information

  • Package Name: nuxt
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install nuxt

Core Imports

Main framework functions:

import { createNuxt, loadNuxt, build } from "nuxt";

Runtime composables and utilities:

import { 
  useAsyncData, 
  useFetch, 
  useState, 
  useRouter, 
  useHead,
  defineNuxtPlugin,
  useRuntimeConfig,
  navigateTo,
  createError
} from "nuxt/app";

Configuration:

import { defineNuxtConfig } from "nuxt/config";

Module development:

import { defineNuxtModule, useNuxt, addPlugin } from "nuxt/kit";

For CommonJS:

const { createNuxt, loadNuxt } = require("nuxt");
const { useAsyncData, useFetch } = require("nuxt/app");

Basic Usage

Configuration

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss"],
  css: ["~/assets/css/main.css"],
  runtimeConfig: {
    apiSecret: "",
    public: {
      apiBase: "/api"
    }
  }
});

Data Fetching

// pages/users.vue
<script setup>
import { useFetch } from "nuxt/app";

// Fetch data with SSR support
const { data: users, pending, error } = await useFetch("/api/users");

// Lazy data fetching (non-blocking)
const { data: posts } = await useLazyFetch("/api/posts");
</script>

<template>
  <div>
    <div v-if="pending">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <user-card v-for="user in users" :key="user.id" :user="user" />
    </div>
  </div>
</template>

State Management

// composables/useCounter.ts
export const useCounter = () => {
  return useState("counter", () => 0);
};

// components/Counter.vue
<script setup>
const counter = useCounter();

function increment() {
  counter.value++;
}
</script>

Navigation

// Programmatic navigation
import { navigateTo } from "nuxt/app";

await navigateTo("/users");
await navigateTo({ name: "users-id", params: { id: "123" } });

// Router access
const router = useRouter();
const route = useRoute();
</script>

Architecture

Nuxt is built around several key architectural components:

  • Universal Rendering: Server-side rendering (SSR), static site generation (SSG), and client-side rendering (SPA) support
  • Auto-routing: File-based routing system with dynamic routes and nested layouts
  • Data Fetching: Built-in composables for data fetching with SSR, caching, and loading states
  • Module System: Extensible architecture with 200+ community modules
  • Build System: Powered by Vite with automatic code splitting and optimization
  • TypeScript Integration: Full TypeScript support with auto-generated types
  • Server API: Built-in server API routes using Nitro
  • Development Tools: Hot module replacement, DevTools, and debugging utilities

Capabilities

Core Framework

Essential functions for creating, configuring, and building Nuxt applications. These are primarily used for programmatic Nuxt instances and custom build processes.

function createNuxt(options: NuxtOptions): Nuxt;
function loadNuxt(opts: LoadNuxtOptions): Promise<Nuxt>;
function build(nuxt: Nuxt): Promise<void>;

Core Framework

Configuration

Configuration utilities for defining and managing Nuxt application settings with full TypeScript support.

function defineNuxtConfig(config: NuxtConfig): NuxtConfig;

interface NuxtConfig {
  modules?: (string | ModuleOptions)[];
  css?: string[];
  runtimeConfig?: RuntimeConfig;
  ssr?: boolean;
  // ... extensive configuration options
}

Configuration

Data Fetching

Comprehensive data fetching system with server-side rendering support, caching, loading states, and error handling.

function useAsyncData<DataT, ErrorT>(
  key: string,
  handler: () => Promise<DataT>,
  options?: AsyncDataOptions<DataT>
): AsyncData<DataT, ErrorT>;

function useFetch<ResT>(
  request: string | Request | Ref<string | Request>,
  opts?: UseFetchOptions
): AsyncData<ResT>;

interface AsyncData<DataT, ErrorT> {
  data: Ref<DataT | null>;
  pending: Ref<boolean>;
  error: Ref<ErrorT | null>;
  refresh: () => Promise<void>;
}

Data Fetching

State Management

Reactive state management with server-side hydration, cookie management, and error handling.

function useState<T>(key?: string, init?: () => T): Ref<T>;
function useCookie<T>(name: string, opts?: CookieOptions<T>): CookieRef<T>;
function useError(): Ref<NuxtError | null>;
function createError<DataT>(err: string | Partial<NuxtError<DataT>>): NuxtError<DataT>;

State Management

Navigation & Routing

Vue Router integration with programmatic navigation, route middleware, and layout management.

function useRouter(): Router;
function useRoute(): RouteLocationNormalizedLoaded;
function navigateTo(
  to: RouteLocationRaw,
  options?: NavigateToOptions
): Promise<void | NavigationFailure | false> | false | void;
function addRouteMiddleware(
  name: string | RouteMiddleware,
  middleware?: RouteMiddleware,
  options?: AddRouteMiddlewareOptions
): void;

Navigation & Routing

Server-Side Rendering

Server-side rendering utilities for hydration, request handling, and server-client data synchronization.

function useHydration<K, T>(key: K, get: () => T, set: (value: T) => void): void;
function useRequestHeaders(include?: string[]): Record<string, string>;
function useRequestEvent(): H3Event;
function setResponseStatus(code: number, message?: string): void;

SSR & Hydration

Head Management

Document head management with reactive updates, SEO optimization, and server-side rendering support.

function useHead(meta: MaybeComputedRef<MetaObject>): void;
function useHeadSafe(meta: MaybeComputedRef<MetaObject>): void;
function useSeoMeta(meta: MaybeComputedRef<MetaObject>): void;
function useServerHead(meta: MaybeComputedRef<MetaObject>): void;

Head Management

Module Development

Comprehensive utilities for developing Nuxt modules, including configuration, plugins, components, and build system integration.

function defineNuxtModule<OptionsT>(definition: ModuleDefinition<OptionsT>): NuxtModule<OptionsT>;
function useNuxt(): Nuxt;
function addPlugin(plugin: AddPluginOptions): void;
function addComponent(options: AddComponentOptions): void;

Module Development

App Lifecycle & Utilities

Application lifecycle management, loading states, runtime hooks, and utility functions for controlling app behavior.

function useLoadingIndicator(opts?: UseLoadingIndicatorOptions): LoadingIndicator;
function reloadNuxtApp(options?: ReloadNuxtAppOptions): void;
function useRuntimeHook<T>(name: T, fn: RuntimeNuxtHooks[T]): void;
function callOnce<T>(key?: string, fn?: () => T): T | undefined;
function onNuxtReady(callback: () => void): void;
function useId(): string;

App Lifecycle & Utilities

Performance & Optimization

Advanced performance optimization APIs for component preloading, payload management, and app manifest handling.

function preloadComponents(components: string | string[]): Promise<void>;
function prefetchComponents(components: string | string[]): Promise<void>;
function loadPayload<T>(url: string, opts?: LoadPayloadOptions): Promise<T | null>;
function preloadPayload(url: string, opts?: PreloadPayloadOptions): Promise<void>;
function getAppManifest(): Promise<NuxtAppManifest>;
function getRouteRules(path: string): Promise<NitroRouteRules>;
function isPrerendered(url?: string): Promise<boolean>;
function defineNuxtLink<T>(options: NuxtLinkOptions<T>): Component;

Performance & Optimization

Types

interface NuxtApp {
  vueApp: App<Element>;
  globalName: string;
  hooks: Hookable<RuntimeNuxtHooks>;
  hook: HookCallback;
  callHook: HookCallback;
  [key: string]: any;
}

interface AsyncDataOptions<ResT, DataT = ResT, PickKeys extends KeysOf<DataT> = KeysOf<DataT>, DefaultT = null> {
  server?: boolean;
  client?: boolean;
  lazy?: boolean;
  immediate?: boolean;
  default?: () => DefaultT | Ref<DefaultT>;
  transform?: (input: ResT) => DataT;
  pick?: PickKeys[];
  watch?: MultiWatchSources;
  deep?: boolean;
}

interface CookieOptions<T = string> {
  default?: () => T | Ref<T>;
  decode?: (value: string) => T;
  encode?: (value: T) => string;
  domain?: string;
  expires?: Date;
  httpOnly?: boolean;
  maxAge?: number;
  path?: string;
  sameSite?: boolean | "lax" | "strict" | "none";
  secure?: boolean;
}

interface NuxtError<DataT = any> {
  statusCode: number;
  statusMessage?: string;
  message: string;
  stack?: string;
  data?: DataT;
  cause?: unknown;
}

interface NavigateToOptions {
  replace?: boolean;
  redirectCode?: number;
  external?: boolean;
  open?: {
    target: string;
    windowFeatures?: {
      [key: string]: any;
    };
  };
}

interface ModuleOptions {
  src: string;
  options?: any;
  mode?: "client" | "server" | "all";
}

interface RuntimeConfig {
  [key: string]: any;
  public?: {
    [key: string]: any;
  };
}

interface UseFetchOptions<ResT = any> {
  method?: string;
  body?: any;
  headers?: Record<string, string>;
  query?: Record<string, any>;
  server?: boolean;
  client?: boolean;
  lazy?: boolean;
  immediate?: boolean;
  default?: () => ResT | null;
  transform?: (input: any) => ResT;
  pick?: string[];
  watch?: any[];
}

interface CookieRef<T> extends Ref<T> {
  value: T;
}

type KeysOf<T> = Array<keyof T extends string ? keyof T : string>;

type MultiWatchSources = any[];

interface Hookable<T = Record<string, any>> {
  hook<K extends keyof T>(name: K, fn: T[K]): void;
  callHook<K extends keyof T>(name: K, ...args: any[]): Promise<void>;
}

interface RuntimeNuxtHooks {
  "app:created": (app: any) => void;
  "app:beforeMount": (app: any) => void;
  "app:mounted": (app: any) => void;
  "app:suspense:resolve": (app: any) => void;
  [key: string]: (...args: any[]) => void;
}

type HookCallback = (...args: any[]) => void | Promise<void>;

type MaybeComputedRef<T> = T | Ref<T> | ComputedRef<T> | (() => T);

type RouteLocationRaw = string | { name?: string; path?: string; params?: Record<string, any>; query?: Record<string, any>; hash?: string };

interface Request extends globalThis.Request {}
interface Response extends globalThis.Response {}
interface ComputedRef<T> extends Ref<T> {}

// App Lifecycle & Utilities Types
interface UseLoadingIndicatorOptions {
  duration?: number;
  throttle?: number;
}

interface LoadingIndicator {
  progress: Ref<number>;
  isLoading: Ref<boolean>;
  error: Ref<any>;
  start(): void;
  finish(): void;
  set(value: number): void;
  clear(): void;
}

interface ReloadNuxtAppOptions {
  ttl?: number;
  force?: boolean;
  persistState?: boolean;
  path?: string;
}

// Performance & Optimization Types
interface LoadPayloadOptions {
  fresh?: boolean;
  hash?: string;
}

interface PreloadPayloadOptions {
  hash?: string;
}

interface NuxtAppManifest {
  id: string;
  timestamp: number;
  routes: Record<string, {
    id: string;
    file: string;
    children?: string[];
  }>;
  prerendered?: string[];
}

interface NitroRouteRules {
  cors?: boolean;
  headers?: Record<string, string>;
  redirect?: string | {
    to: string;
    statusCode?: number;
  };
  prerender?: boolean;
  index?: boolean;
  robots?: boolean;
  sitemap?: boolean;
  experimentalNoScripts?: boolean;
}

interface NuxtLinkOptions<T> {
  componentName?: string;
  externalRelAttribute?: string;
  activeClass?: string;
  exactActiveClass?: string;
  prefetchedClass?: string;
  trailingSlash?: 'append' | 'remove';
}

// Navigation Types
interface RouteAnnouncerOptions {
  politeness?: 'polite' | 'assertive';
  skipRoutes?: string[];
  formatMessage?: (route: RouteLocationNormalized) => string;
}

interface RouteAnnouncer {
  announce(): void;
  skip(): void;
  set(message: string): void;
}

// Server Context Types  
interface AppConfig {
  [key: string]: any;
}