Nuxt•2mo ago

Nuxt3 PWA setup correct configuration

How can i setup my app to add PWA with "@vite-pwa/nuxt"

8 Replies

Hi @LordNeto. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set up PWA in your Nuxt 3 app using the @vite-pwa/nuxt module, follow these steps based on the provided knowledge sources: 1. Install the module
Add @vite-pwa/nuxt to your project dependencies:

   npm install @vite-pwa/nuxt

   npm install @vite-pwa/nuxt

2. Configure the module in nuxt.config.ts
Add @vite-pwa/nuxt to your modules array and configure the pwa options. Here’s a minimal example:

   export default defineNuxtConfig({
     modules: [
       '@vite-pwa/nuxt',
       // ...other modules
     ],
     pwa: {
       manifest: {
         name: 'My Nuxt App',
         short_name: 'MyNuxtApp',
         description: 'My incredible Nuxt app',
         theme_color: '#ffffff',
         lang: 'en',
         icons: [
           {
             src: 'android-launchericon-192-192.png',
             sizes: '192x192',
             type: 'image/png',
           },
           {
             src: 'android-launchericon-512-512.png',
             sizes: '512x512',
             type: 'image/png',
           },
         ],
       },
       // Optional: enable PWA in development for testing
       devOptions: {
         enabled: true,
         type: 'module'
       }
     }
   })

   export default defineNuxtConfig({
     modules: [
       '@vite-pwa/nuxt',
       // ...other modules
     ],
     pwa: {
       manifest: {
         name: 'My Nuxt App',
         short_name: 'MyNuxtApp',
         description: 'My incredible Nuxt app',
         theme_color: '#ffffff',
         lang: 'en',
         icons: [
           {
             src: 'android-launchericon-192-192.png',
             sizes: '192x192',
             type: 'image/png',
           },
           {
             src: 'android-launchericon-512-512.png',
             sizes: '512x512',
             type: 'image/png',
           },
         ],
       },
       // Optional: enable PWA in development for testing
       devOptions: {
         enabled: true,
         type: 'module'
       }
     }
   })

Make sure your icon files are placed in the public/ directory, not in assets/ or elsewhere. The sizes property should use x (e.g., 192x192), not * (see example). 3. (Optional) Add <NuxtPwaManifest /> to your layout
If you want to inject the manifest link and meta tags, you can add the <NuxtPwaManifest /> component in your app.vue or layout file:

   <template>
     <div>
       <NuxtPwaManifest />
       <NuxtPage />
     </div>
   </template>

   <template>
     <div>
       <NuxtPwaManifest />
       <NuxtPage />
     </div>
   </template>

This step is optional, as the module can handle manifest injection automatically, but it can help with debugging (see example). 4. Run your app and test
Start your development server and check the browser’s Application tab (in DevTools) to verify the manifest and service worker are registered. Common Issues: - Hydration errors may occur if you enable PWA in development mode. If you encounter such issues, try disabling PWA in development (devOptions.enabled: false) and test in production build (see discussion). - Ensure all referenced icons exist in the public/ directory and use the correct sizes format (192x192, not 192*192) (see fix). This setup should get your Nuxt 3 app working as a PWA with @vite-pwa/nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@181409335828676609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

LordNetoOP•2mo ago

@kapa.ai I can see the manifest request in the network tab, and in the html, but still the PWA install buttons does not appear, why may that be?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you can see the manifest being requested in the network tab and present in the HTML, but the PWA install button does not appear, the knowledge sources suggest a few possible reasons: 1. Development Mode Issues:
When using @vite-pwa/nuxt, enabling PWA in development mode (devOptions.enabled: true) can cause unexpected behavior, including issues with the install prompt or hydration errors. The install prompt (PWA install button) may not appear reliably in development. It is recommended to test your PWA in a production build, as some features only work correctly in production (see discussion). 2. Manifest and Service Worker Requirements:
For the install prompt to appear, browsers require: - A valid manifest file (which you have). - A registered service worker. - The site to be served over HTTPS (except on localhost). If any of these are missing or misconfigured, the install prompt will not show. The knowledge sources emphasize correct manifest and service worker setup, and that icons should be in the public/ directory with correct sizes formatting (see example). 3. User Engagement Criteria:
While not explicitly detailed in the sources, the install prompt is also subject to browser heuristics (e.g., user must visit the site more than once, not already installed, etc.), but the sources do not provide further details on this. Summary:
Based on the knowledge sources, the most likely cause is testing in development mode or a misconfiguration in the manifest or service worker. Try building your app for production and serving it locally or on HTTPS, and ensure your manifest and service worker are correctly configured and registered. If the issue persists, check for any errors in the browser console related to the service worker or manifest (see discussion, see example). If you need more specific troubleshooting, the knowledge sources do not provide further details. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@181409335828676609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

LordNetoOP•2mo ago

@kapa.ai for the nuxt3 pwa can i set some pages to be offline, and have custom code when the service is offline

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry, but the provided knowledge sources do not contain explicit information about configuring specific pages to be available offline or implementing custom offline handling code for a Nuxt 3 PWA using @vite-pwa/nuxt. The sources cover general PWA setup, manifest configuration, and service worker registration, but do not detail advanced offline strategies or custom offline page handling. If you need to implement custom offline behavior or selectively cache certain pages, you may need to refer to the official documentation for @vite-pwa/nuxt or the underlying Workbox configuration, as this is not covered in the current knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@181409335828676609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt3 PWA setup correct configuration

Did you find this page helpful?