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

App Lifecycle & Utilities

Name: tessl/npm-nuxt
Author: tessl

Advanced application lifecycle management, loading states, and utility functions for controlling app behavior and performance optimization.

Capabilities

Loading Indicator

Programmatically control the loading indicator with fine-grained progress updates and error states.

/**
 * Control the app-wide loading indicator programmatically
 * @param opts - Loading indicator configuration options
 * @returns LoadingIndicator instance with methods and reactive state
 */
function useLoadingIndicator(opts?: UseLoadingIndicatorOptions): LoadingIndicator;

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;
}

Usage Example:

<script setup>
import { useLoadingIndicator } from "nuxt/app";

const { progress, isLoading, start, finish, set } = useLoadingIndicator({
  duration: 2000,
  throttle: 200
});

// Start loading
start();

// Update progress manually
set(50);

// Complete loading
finish();
</script>

App Reloading

Reload the Nuxt application programmatically with various options for cache control and state persistence.

/**
 * Reload the Nuxt application with optional configuration
 * @param options - Reload configuration options
 */
function reloadNuxtApp(options?: ReloadNuxtAppOptions): void;

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

Usage Example:

import { reloadNuxtApp } from "nuxt/app";

// Reload app with state persistence
reloadNuxtApp({
  persistState: true,
  force: true
});

// Reload with specific path
reloadNuxtApp({
  path: '/dashboard',
  ttl: 10000
});

Runtime Hooks

/**
 * Register a runtime hook for application lifecycle events
 * @param name - Hook name to register
 * @param fn - Function to execute when hook is called
 */
function useRuntimeHook<T extends keyof RuntimeNuxtHooks>(
  name: T,
  fn: RuntimeNuxtHooks[T]
): void;

interface RuntimeNuxtHooks {
  'app:created': (app: NuxtApp) => void;
  'app:beforeMount': (app: NuxtApp) => void;
  'app:mounted': (app: NuxtApp) => void;
  'app:error': (error: any) => void;
  'app:error:cleared': (error: any) => void;
  'page:start': () => void;
  'page:finish': () => void;
  'page:transition:finish': () => void;
  'app:data:refresh': (keys?: string[]) => void;
  'app:manifest:update': (manifest: any) => void;
}

Usage Example:

import { useRuntimeHook } from "nuxt/app";

// Listen for app mount
useRuntimeHook('app:mounted', (app) => {
  console.log('App is now mounted', app);
});

// Listen for page navigation
useRuntimeHook('page:start', () => {
  console.log('Page navigation started');
});

Once Utilities

Execute functions only once during the application lifecycle, useful for initialization code.

/**
 * Execute a function only once per key, useful for initialization
 * @param key - Unique key for the once execution (optional)
 * @param fn - Function to execute once
 * @returns Result of function execution or cached result
 */
function callOnce<T>(key?: string, fn?: () => T): T | undefined;
function callOnce<T>(fn: () => T): T;

Usage Example:

import { callOnce, onNuxtReady } from "nuxt/app";

// Initialize analytics only once
callOnce('analytics', () => {
  // Analytics initialization code
  initializeAnalytics();
});

// Execute when app is ready
onNuxtReady(() => {
  console.log('Nuxt app is ready!');
});

App Readiness

Execute code when the Nuxt application is fully ready and hydrated.

/**
 * Execute callback when Nuxt app is fully ready
 * @param callback - Function to execute when ready
 */
function onNuxtReady(callback: () => void): void;

Unique ID Generation

Generate unique, SSR-safe identifiers for components and elements.

/**
 * Generate a unique ID that is SSR-safe and consistent
 * @returns Unique string identifier
 */
function useId(): string;

Usage Example:

<script setup>
import { useId } from "nuxt/app";

const labelId = useId();
const inputId = useId();
</script>

<template>
  <div>
    <label :for="inputId" :id="labelId">Name</label>
    <input :id="inputId" :aria-labelledby="labelId" />
  </div>
</template>

Types

interface ReloadNuxtAppOptions {
  /** Time to live for the reload in milliseconds */
  ttl?: number;
  /** Force reload even if already reloading */
  force?: boolean;
  /** Persist state across reload */
  persistState?: boolean;
  /** Path to navigate to after reload */
  path?: string;
}

interface UseLoadingIndicatorOptions {
  /** Duration for the loading animation in milliseconds */
  duration?: number;
  /** Throttle interval for progress updates */
  throttle?: number;
}

interface LoadingIndicator {
  /** Current progress value (0-100) */
  progress: Ref<number>;
  /** Whether loading is active */
  isLoading: Ref<boolean>;
  /** Loading error if any */
  error: Ref<any>;
  /** Start the loading indicator */
  start(): void;
  /** Finish and hide the loading indicator */
  finish(): void;
  /** Set specific progress value */
  set(value: number): void;
  /** Clear the loading state */
  clear(): void;
}

Install with Tessl CLI