Skip to content

Architecture Diagram ​

Architecture Diagram of Unplugin PWA EcosystemFlowchart illustrating how external consumers like Nuxt and Vanilla Vite interact with the unplugin-pwa adapters, which in turn use the core module and workbox-build to generate PWA assets.PWA Ecosystem (unplugin-pwa)OptionalAdapters / BuildersInjects ContextDynamic ImportResolves Virtual Modules1. Resolves config2. Consumes pluginConsumesImported byFramework(e.g., Nuxt)Vanilla ViteUser App Code📦 @unplugin-pwa/vite📦@unplugin-pwa/webpack📦 @unplugin-pwa/rspack📦 @unplugin-pwa/core(Context, Configuration,Helpers)📦@vite-pwa/workbox-build(SW Generation,lazy-loaded)📦 @unplugin-pwa/core(React, Vue, Sveltetypes...)

Vanilla Vite Lifecycle Diagram (Execution Flow) ​

Vanilla Vite Lifecycle Execution FlowSequence diagram detailing the three phases of the Vanilla Vite lifecycle for PWA generation: Configuration and Facade Initialization, Context Enrichment, and Build Execution via workbox-build.123456789101112131415Imports and configures VitePWA(options)Calls VitePWA(options)preparePWAContext(options) (Internal call)Returns empty/base `ctx`Returns Array of modular PluginsRegisters plugins in ViteHook: configResolvedExtracts Vite's base, build outDir, etc.Injects resolved Vite config into `ctx`Hook: closeBundle / buildEndctx.runBuild()dynamic import (generateSW / buildSW)Generates Service Worker and AssetsBuild completeHook finishedPhase 1: Configuration & Facade InitializationPhase 2: Context EnrichmentPhase 3: Build / Dev ExecutionUservite.config.ts📦 @unplugin-pwa/vite📦 @unplugin-pwa/coreVite📦 @vite-pwa/workbox-buildUservite.config.ts📦 @unplugin-pwa/vite📦 @unplugin-pwa/coreVite📦 @vite-pwa/workbox-build

Nuxt + Vite Lifecycle Diagram (Execution Flow) ​

NOTE

On Lifecycle Execution: While the sequence diagram represents a chronological flow, it is important to understand that the architecture is highly event-driven. During Phase 1, the Nuxt Module (@vite-pwa/nuxt) only resolves the initial context and synchronously registers the lifecycle hooks. The execution is not blocking or strictly sequential thereafter. Phases 2, 3, and 4 are executed asynchronously in complete isolation whenever the underlying Nuxt and Nitro reach those specific milestones in their internal build processes.

Nuxt and Vite Lifecycle Execution FlowSequence diagram showing the event-driven phases in Nuxt: Context Creation and Hook Registration, Nitro Initialization, Vite Plugin Registration, and asynchronous PWA Generation.123456789101112131415createViteNuxtPwaContext(options)createCustomVitePWAContext('vite')Returns base agnostic `ctx`Returns base `ctx`Registers Nuxt hooks (e.g., build:before)Registers Nitro hooks (e.g., nitro:init)Asynchronous Hook: 'nitro:init'Asynchronous Hook: 'build:before'ctx.nuxt.prepareNuxtOptions()Nuxt Kit: addVitePlugin(plugins)Asynchronous Hook: 'nitro:build:public-assets'buildPwaAssets(ctx)dynamic import (generateSW / buildSW)Generates Service WorkerPWA Build completePhase 1: Context Creation & Hook RegistrationprepareModule(ctx) execution:Setup finishes execution. Awaiting events...Phase 2: Nitro Init (Enrichment)Enriches `ctx`: Loads PWA config using resolved Nuxt aliases & Nitro output paths when requiredPhase 3: Plugin RegistrationInstantiates plugins (Main, Dev, Assets...)Phase 4: PWA GenerationGenerates Web Manifest & IconsExecutes ctx.runBuild()📦 @vite-pwa/nuxt📦 @unplugin-pwa/core📦 @unplugin-pwa/viteNuxtNitroVite(@nuxt/vite-builder)📦 @vite-pwa/workbox-build📦 @vite-pwa/nuxt📦 @unplugin-pwa/core📦 @unplugin-pwa/viteNuxtNitroVite(@nuxt/vite-builder)📦 @vite-pwa/workbox-build

Released under the MIT License.