or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

html-integration.mdindex.mdplugin-configuration.mdproject-generation.mdservice-worker.md
tile.json

tessl/npm-vue--cli-plugin-pwa

Vue CLI plugin that adds Progressive Web App capabilities including service workers, manifests, and PWA meta tags

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/cli-plugin-pwa@5.0.x

To install, run

npx @tessl/cli install tessl/npm-vue--cli-plugin-pwa@5.0.0

index.mddocs/

@vue/cli-plugin-pwa

@vue/cli-plugin-pwa is a Vue CLI plugin that transforms Vue.js applications into Progressive Web Apps (PWAs) by integrating Workbox service workers, generating PWA manifest files, and injecting essential PWA meta tags. It provides comprehensive PWA configuration through webpack plugin integration and development middleware.

Package Information

  • Package Name: @vue/cli-plugin-pwa
  • Package Type: npm
  • Language: JavaScript
  • Installation: vue add pwa

Core Imports

// Main plugin function (Vue CLI plugin registration)
module.exports = require('@vue/cli-plugin-pwa');

For accessing individual components:

const HtmlPwaPlugin = require('@vue/cli-plugin-pwa/lib/HtmlPwaPlugin');
const createNoopServiceWorkerMiddleware = require('@vue/cli-plugin-pwa/lib/noopServiceWorkerMiddleware');
const pwaUIConfig = require('@vue/cli-plugin-pwa/ui');

Basic Usage

// vue.config.js
module.exports = {
  pwa: {
    name: 'My PWA App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true
    },
    manifestOptions: {
      background_color: '#ffffff'
    }
  }
}

Architecture

The plugin is built around several key components:

  • Plugin Function: Main Vue CLI plugin that configures webpack and development server
  • HtmlPwaPlugin: Webpack plugin that injects PWA meta tags and manifest links into HTML
  • Service Worker Management: Production service worker generation via Workbox and development no-op middleware
  • Generator: File template system for adding PWA files to projects during installation
  • UI Configuration: Vue CLI UI integration for visual PWA configuration management

Capabilities

Main Plugin Configuration

Core Vue CLI plugin function that configures webpack with PWA capabilities and sets up development middleware.

/**
 * Main Vue CLI plugin function
 * @param {Object} api - Vue CLI plugin API
 * @param {Object} options - Plugin configuration options
 */
function vuePwaPlugin(api, options);

interface PWAOptions {
  workboxPluginMode?: 'GenerateSW' | 'InjectManifest';
  workboxOptions?: WorkboxOptions;
  name?: string;
  themeColor?: string;
  msTileColor?: string;
  appleMobileWebAppCapable?: string;
  appleMobileWebAppStatusBarStyle?: string;
  assetsVersion?: string;
  manifestPath?: string;
  manifestOptions?: ManifestOptions;
  manifestCrossorigin?: string;
  iconPaths?: IconPaths;
}

Plugin Configuration

HTML PWA Integration

Webpack plugin that injects PWA-specific HTML meta tags, icons, and manifest links during build process.

class HtmlPwaPlugin {
  constructor(options?: HtmlPwaOptions);
  apply(compiler: Compiler): void;
}

interface HtmlPwaOptions {
  name?: string;
  themeColor?: string;
  msTileColor?: string;
  appleMobileWebAppCapable?: string;
  appleMobileWebAppStatusBarStyle?: string;
  assetsVersion?: string;
  manifestPath?: string;
  manifestOptions?: ManifestOptions;
  manifestCrossorigin?: string;
  iconPaths?: IconPaths;
}

HTML Integration

Service Worker Management

Service worker generation for production builds using Workbox, and development middleware serving no-op service workers.

/**
 * Creates development middleware for no-op service worker
 * @returns {Function} Express middleware function
 */
function createNoopServiceWorkerMiddleware(): (req: Request, res: Response, next: NextFunction) => void;

Service Worker Management

Project Generation

Vue CLI generator function that sets up PWA files and dependencies during plugin installation.

/**
 * Vue CLI generator function for PWA plugin installation
 * @param {Object} api - Vue CLI generator API
 */
function pwaGenerator(api: GeneratorAPI): void;

Project Generation

UI Configuration

Vue CLI UI integration providing visual PWA configuration management interface.

/**
 * Vue CLI UI configuration function for PWA plugin visual interface
 * @param {Object} api - Vue CLI UI API
 */
function pwaUIConfig(api: UIConfigAPI): void;

The UI configuration provides visual management for PWA settings through the Vue CLI GUI, including form prompts for all PWA options and file watchers for configuration changes.

Types

interface IconPaths {
  faviconSVG?: string;
  favicon32?: string;
  favicon16?: string;
  appleTouchIcon?: string;
  maskIcon?: string;
  msTileImage?: string;
}

interface ManifestOptions {
  name?: string;
  short_name?: string;
  start_url?: string;
  display?: string;
  background_color?: string;
  theme_color?: string;
  icons?: ManifestIcon[];
}

interface ManifestIcon {
  src: string;
  sizes: string;
  type: string;
  purpose?: string;
}

interface WorkboxOptions {
  exclude?: RegExp[];
  cacheId?: string;
  swSrc?: string;
  skipWaiting?: boolean;
  clientsClaim?: boolean;
}

// Vue CLI and Webpack API types
interface GeneratorAPI {
  extendPackage(packageChanges: object): void;
  injectImports(file: string, imports: string): void;
  render(templatePath: string): void;
  entryFile: string;
  invoking: boolean;
  hasPlugin(pluginName: string): boolean;
}

interface UIConfigAPI {
  describeConfig(config: object): void;
  addSuggestion(suggestion: object): void;
  removeSuggestion(id: string): void;
  onViewOpen(handler: Function): void;
  onConfigRead(handler: Function): void;
}

interface Compiler {
  hooks: {
    compilation: {
      tap(id: string, callback: Function): void;
    };
  };
  options: {
    output: {
      publicPath: string;
    };
  };
}

// Express types for middleware
interface Request {
  url: string;
}

interface Response {
  setHeader(name: string, value: string): void;
  send(data: string): void;
}

interface NextFunction {
  (): void;
}