nuxt icon indicating copy to clipboard operation
nuxt copied to clipboard

showInstallPrompt not being called

Open taylorchance opened this issue 10 months ago • 3 comments

I was hooking up my install button something like this:

v-if="$pwa && $pwa.showInstallPrompt && !$pwa.needRefresh"

I know the beforeinstallprompt listener can be finicky so I just waited it out. Finally I put the listeners in manually like so:


window.addEventListener('beforeinstallprompt', e => {
  e.preventDefault()
  // Stash the event so it can be triggered later.
  deferredPrompt.value = e
})

window.addEventListener('appinstalled', () => {
  deferredPrompt.value = null
})

const installApp = () => {
  deferredPrompt.value?.prompt()
}```

And the button is showing now.

taylorchance avatar Apr 18 '24 19:04 taylorchance

Try adding this to your nuxt.config.ts:

export default defineNuxtConfig({
     ...
     pwa: {
        devOptions: {
            enabled: true
        },
        client: {
            installPrompt: true
        },
    }
})

jeky1950 avatar May 14 '24 08:05 jeky1950

Similar issue for me as well, and I have the nuxt.config.ts, with above two options are enabled

jithureddy avatar Aug 01 '24 17:08 jithureddy

showInstallPrompt should be true when the service worker is installed and activated (no errors in the registration) and the browser supports the beforeinstallprompt event (right now only some Chromium based browser, iirc Arc and Brave don't support it).

You can try using @vite-pwa/create-pwa, select Vue then Nuxt or Nuxt 4 and follow the prompts.

userquin avatar Aug 01 '24 19:08 userquin