Make Nuxt work offline
InstantPWA hosts a fallback service worker and manifest for Nuxt, so pages you've already visited keep working offline without you writing cache logic yourself. Add the snippet to nuxt.config.ts head[] or useHead() via nuxt.config.ts → app.head.script[] or useHead() in app.vue and the worker registers automatically on first visit.
Steps
- 1
Open nuxt.config.ts head[] or useHead()
Go to nuxt.config.ts → app.head.script[] or useHead() in app.vue.
- 2
Paste the InstantPWA snippet
Drop the one-line async script tag in the Nuxt head section — no build step or dependency install.
- 3
Let the service worker register
No manifest.json or sw.js to write — InstantPWA serves both and scopes the worker to your site's root.
- 4
Test offline mode
Visit a page once, then use DevTools → Network → Offline (or airplane mode on a phone) and reload to confirm cached pages still render.
- 5
Verify on a phone
Open your live Nuxt URL on a mobile device (not the editor preview) to confirm the popup renders.
Constraints to know
- Works across SSR, SSG (nuxt generate) and hybrid rendering, but if you use routeRules to prerender only some routes, add the snippet at the root app.vue level so every route inherits it.
- @nuxtjs/pwa (if installed) already registers its own service worker — InstantPWA detects an existing worker and won't double-register one, but confirm scope conflicts if you customize @nuxtjs/pwa's default scope.
FAQ
Do I need to write my own service worker?+
No — InstantPWA hosts a fallback manifest and service worker automatically if your site doesn't already ship one.
What happens to pages I haven't visited yet?+
They won't be available offline until visited at least once — InstantPWA caches on-visit rather than pre-caching your entire site.
Does offline mode change how Nuxt serves pages normally?+
No — the service worker only intercepts requests when the browser is offline; online visits behave exactly as before.