tessl/npm-nuxtjs--pwa

Zero config PWA solution for Nuxt.js applications with service worker management, manifest generation, and meta tag optimization

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

PWA Module

Name: tessl/npm-nuxtjs--pwa
Author: tessl

The main PWA module coordinates all sub-modules and handles the overall PWA setup process for Nuxt.js applications.

Capabilities

Main Module Function

The primary entry point that orchestrates all PWA functionality during the Nuxt.js build process.

/**
 * Main PWA module function for Nuxt.js
 * @param moduleOptions - Configuration options for all PWA sub-modules
 */
function pwa(moduleOptions: PWAOptions): Promise<void>;

interface PWAOptions {
  /** Meta tag configuration options or false to disable */
  meta?: Partial<MetaOptions> | false;
  /** Icon generation options or false to disable */
  icon?: Partial<IconOptions> | false;
  /** Service worker and caching options or false to disable */
  workbox?: Partial<WorkboxOptions> | false;
  /** Web app manifest options or false to disable */
  manifest?: Partial<ManifestOptions> | false;
}

Usage Example:

// nuxt.config.ts
export default {
  modules: ['@nuxtjs/pwa'],
  pwa: {
    meta: {
      name: 'My PWA',
      description: 'Progressive Web Application'
    },
    icon: {
      sizes: [192, 384, 512]
    },
    workbox: {
      offline: true
    },
    manifest: {
      background_color: '#ffffff'
    }
  }
}

Module Orchestration

The module handles coordination between sub-modules and manages the build process.

/**
 * PWA context shared between all sub-modules
 */
interface PWAContext {
  meta?: MetaOptions;
  icon?: IconOptions;
  workbox?: WorkboxOptions;
  manifest?: ManifestOptions;
  _manifestMeta: any;
}

The module automatically:

Processes configuration options for each sub-module
Executes sub-modules in the correct sequence (icon → manifest → meta → workbox)
Handles build-time vs runtime behavior
Sets up development middleware for asset serving

Configuration Inheritance

The module supports configuration inheritance from top-level Nuxt options:

// nuxt.config.ts
export default {
  modules: ['@nuxtjs/pwa'],
  // Top-level configuration (backward compatibility)
  meta: {
    name: 'My App'
  },
  // PWA-specific configuration (preferred)
  pwa: {
    meta: {
      description: 'My PWA App' // Merged with top-level
    }
  }
}

Development Mode

The module includes special handling for development mode:

/**
 * Runtime meta loading for SPA mode
 */
function metaRuntime(nuxt: any): void;

/**
 * Build mode detection and handling
 */
interface BuildModes {
  /** Standard build process */
  isBuild: boolean;      // nuxt.options._build
  /** Static site generation */
  isGenerate: boolean;   // nuxt.options.target === 'static' && !nuxt.options.dev
  /** Runtime/development mode */
  isRuntime: boolean;    // !isBuild && !isGenerate
}

In development, the module:

Serves static assets through middleware from buildDir/dist/client
Enables hot reloading for PWA assets
Provides debugging information
Skips resource-intensive operations when appropriate
Only loads meta.json for SPA renderer in runtime mode

Module Registration

The module integrates with Nuxt.js module system using standard patterns:

/**
 * Package metadata from package.json
 */
const PKG = {
  name: '@nuxtjs/pwa',
  version: '3.3.5'
};

// Module metadata for Nuxt.js
pwa.meta = PKG;

Module Declaration:

declare module '@nuxt/types/config/index' {
  interface NuxtOptions {
    pwa?: Partial<PWAOptions>;
    meta?: Partial<MetaOptions> | false;
    icon?: Partial<IconOptions> | false;
    workbox?: Partial<WorkboxOptions> | false;
    manifest?: Partial<ManifestOptions> | false;
  }
}