Add an install prompt to Nuxt

To add an install prompt on Nuxt, paste the InstantPWA snippet into nuxt.config.ts head[] or useHead() via nuxt.config.ts → app.head.script[] or useHead() in app.vue. The popup captures the browser's native install signal where supported and falls back to a guided walkthrough on iOS Safari, so every visitor sees a clear path to installing your Nuxt site as an app.

Steps

  1. 1

    Open nuxt.config.ts head[] or useHead()

    Go to nuxt.config.ts → app.head.script[] or useHead() in app.vue.

  2. 2

    Paste the InstantPWA snippet

    Drop the one-line async script tag in the Nuxt head section — no build step or dependency install.

  3. 3

    Configure the trigger

    In your InstantPWA dashboard, set when the popup appears — on page load, after N seconds, or after a scroll/engagement threshold.

  4. 4

    Publish

    Save/publish in Nuxt so the change goes live — most builders require an explicit publish step before custom code runs.

  5. 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

Does the install prompt work on iOS Nuxt visitors?+

iOS Safari never fires the native beforeinstallprompt event, so InstantPWA shows a share-sheet walkthrough instead — visitors still get a clear add-to-home-screen path.

Will this conflict with other scripts on my site?+

No — InstantPWA is a single first-party async script with no third-party dependencies, so it doesn't block or compete with analytics or chat widgets.

Do I need to touch anything else in Nuxt besides nuxt.config.ts?+

No — the head snippet is the only integration point; InstantPWA hosts the manifest and service worker for you.

Ready to set this up on Nuxt?

1,000 free impressions. No credit card.

Get started