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
Advanced performance optimization APIs for component preloading, payload management, and app manifest handling.
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');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();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);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'
});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