Bug: Nuxt 3 PWA app showInstallPrompt always false

[Tr-anh99]

Bug Description:
I use example from playground folder, but in my mini repo https://github.com/Tr-anh99/nuxt-pwa, https://stackblitz.com/~/github.com/Tr-anh99/nuxt-pwa showInstallPrompt always returns false.
I still can install pwa from addressbar on chrome but pwa?.install() dont work well.
How can i fix this?
Environment:

• Browser: Chrome 138.0.7204.169
• OS: Windows 10
• Framework: Nuxt 4.0.1
• @vite-pwa/nuxt: 1.0.4

Expected Behavior:
showInstallPrompt should return true when install criteria are met

Additional Context:

• DevTools Application tab screenshots:

[mlsjla]

mee too

[Shooteger]

We had the same issue, I will just drop my component here how I solved it in the end. (include the component later where you like, maybe app.vue):

<script setup>
const { $pwa } = useNuxtApp()
const showPrompt = ref(!$pwa.isPWAInstalled);
let deferredPrompt = null;
const isSafari = ref(false);
window.addEventListener('beforeinstallprompt', (event) => {
    event.preventDefault();
    deferredPrompt = event;
    showPrompt.value = true;
});

if (import.meta.client) {
    const userAgent = navigator.userAgent;
    isSafari.value = userAgent.includes('Safari') && !userAgent.includes('Chrome');
}

const installApp = () => {
    if (deferredPrompt) {
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
                console.info('User accepted the install prompt');
            } else {
                console.info('User dismissed the install prompt');
            }
            deferredPrompt = null;
            showPrompt.value = false;
        });
    }
};

const dismissPrompt = () => {
    //$pwa.showInstallPrompt -> nope
    showPrompt.value = false;
};
</script>

<template>
    <div v-show="showPrompt && !isSafari"
        class="fixed top-3 left-3 bg-white p-4 shadow-md rounded-md md:top-5 md:left-5 invisible lg:visible">
        <div class="flex flex-col items-center justify-center">
            <p class="text-center text-lg font-semibold mb-2">Installieren Sie unsere App!</p>
            <div class="flex space-x-4">
                <UButton @click="installApp" color="primary" size="xl" class="font-semibold">Installieren</UButton>
                <UButton @click="dismissPrompt" color="neutral" size="xl" variant="soft" class="font-semibold">
                    Ablehnen</UButton>
            </div>
        </div>
    </div>
</template>

<style scoped>
.pwa-prompt {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #cccccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    max-width: 320px;
    z-index: 1000;
}
</style>

[userquin]

you need to check if the sw is activated, once the sw is installed and activated and requested => $pwa?.showInstallPrompt; then the pwa?.install call should work, check the default layout at playground here (the template)