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

performance.mddocs/

Performance & Optimization

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

Capabilities

Component Preloading

Preload and prefetch components for better performance and user experience.

/**
 * Preload components to make them available immediately
 * @param components - Component names or array of component names to preload
 * @returns Promise that resolves when components are preloaded
 */
function preloadComponents(components: string | string[]): Promise<void>;

/**
 * Prefetch components for future use with lower priority
 * @param components - Component names or array of component names to prefetch
 * @returns Promise that resolves when components are prefetched
 */
function prefetchComponents(components: string | string[]): Promise<void>;

/**
 * Preload all components for a specific route
 * @param to - Route location to preload components for
 * @param router - Router instance (optional)
 * @returns Promise that resolves when route components are preloaded
 */
function preloadRouteComponents(
  to: RouteLocationRaw,
  router?: Router
): Promise<void>;

Usage Examples:

import { 
  preloadComponents, 
  prefetchComponents, 
  preloadRouteComponents 
} from "nuxt/app";

// Preload critical components immediately
await preloadComponents(['UserProfile', 'Dashboard']);

// Prefetch components for future use
prefetchComponents(['Settings', 'Reports']);

// Preload all components for a route
await preloadRouteComponents('/user/profile');

Payload Management

Advanced payload handling for optimization and custom data serialization.

/**
 * Load payload data for a specific URL
 * @param url - URL to load payload for
 * @param opts - Loading options
 * @returns Promise resolving to payload data
 */
function loadPayload<T = Record<string, any>>(
  url: string,
  opts?: LoadPayloadOptions
): Promise<T | null>;

/**
 * Preload payload data for a URL without navigation
 * @param url - URL to preload payload for
 * @param opts - Preload options  
 * @returns Promise that resolves when payload is preloaded
 */
function preloadPayload(
  url: string,
  opts?: PreloadPayloadOptions
): Promise<void>;

/**
 * Define a payload reducer for custom data serialization
 * @param name - Reducer name
 * @param reducer - Function to transform data during serialization
 */
function definePayloadReducer<T>(
  name: string,
  reducer: (data: T) => any
): void;

/**
 * Define a payload reviver for custom data deserialization
 * @param name - Reviver name
 * @param reviver - Function to restore data during deserialization
 */
function definePayloadReviver<T>(
  name: string,
  reviver: (data: any) => T
): void;

/**
 * Check if a route is prerendered (static)
 * @param url - URL to check (optional, defaults to current route)
 * @returns Promise resolving to true if route is prerendered
 */
function isPrerendered(url?: string): Promise<boolean>;

Usage Examples:

import { 
  loadPayload, 
  preloadPayload, 
  definePayloadReducer,
  definePayloadReviver,
  isPrerendered 
} from "nuxt/app";

// Load payload for a specific page
const userData = await loadPayload('/user/123');

// Preload payload on hover
async function onUserHover() {
  await preloadPayload('/user/profile');
}

// Custom date serialization
definePayloadReducer('date', (date: Date) => date.toISOString());
definePayloadReviver('date', (dateString: string) => new Date(dateString));

// Check if current route is prerendered
const isStatic = await isPrerendered();

App Manifest & Route Rules

Access application manifest and route-specific configuration for advanced optimizations.

/**
 * Get the application manifest with metadata and route information
 * @returns Promise resolving to the app manifest
 */
function getAppManifest(): Promise<NuxtAppManifest>;

/**
 * Get route-specific rules and configuration
 * @param path - Route path to get rules for
 * @returns Promise resolving to route rules
 */
function getRouteRules(path: string): Promise<NitroRouteRules>;

Usage Examples:

import { getAppManifest, getRouteRules } from "nuxt/app";

// Get app manifest
const manifest = await getAppManifest();
console.log('Available routes:', manifest.routes);

// Get route-specific rules
const rules = await getRouteRules('/api/users');
console.log('Route config:', rules);

Custom Link Components

Define custom link components with enhanced functionality.

/**
 * Define a custom Nuxt link component with extended functionality
 * @param options - Link component configuration
 * @returns Vue component definition
 */
function defineNuxtLink<T extends Record<string, any>>(
  options: NuxtLinkOptions<T>
): Component;

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

Usage Example:

import { defineNuxtLink } from "nuxt/app";

// Define custom link with specific behavior
const CustomLink = defineNuxtLink({
  componentName: 'AppLink',
  activeClass: 'app-link--active',
  prefetchedClass: 'app-link--prefetched',
  trailingSlash: 'remove'
});

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> {
  /** Name for the custom link component */
  componentName?: string;
  /** Rel attribute for external links */
  externalRelAttribute?: string;
  /** CSS class for active links */
  activeClass?: string;
  /** CSS class for exact active links */
  exactActiveClass?: string;
  /** CSS class for prefetched links */
  prefetchedClass?: string;
  /** Trailing slash behavior */
  trailingSlash?: 'append' | 'remove';
}

type RouteLocationRaw = string | {
  name?: string;
  path?: string;
  params?: Record<string, any>;
  query?: Record<string, any>;
  hash?: 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