nuxt
nuxt copied to clipboard
showInstallPrompt not being called
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.
Try adding this to your nuxt.config.ts:
export default defineNuxtConfig({
...
pwa: {
devOptions: {
enabled: true
},
client: {
installPrompt: true
},
}
})
Similar issue for me as well, and I have the nuxt.config.ts, with above two options are enabled
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.