Nuxt•3w ago

Vite-PWA

I'm using vite-pwa but everytime i enable it in the dev options my nuxt devtools break. nuxt.config.ts (snippet)

pwa: {
    devOptions: {
      enabled: true,
    },
    manifest: {
      short_name: "XYZ",
      name: "XYZ",
      icons: [
        // {
        //   src: "apple-touch-icon.png",
        //   sizes: "180x180",
        //   type: "image/png",
        // },
        {
          src: "android-chrome-192x192.png",
          sizes: "192x192",
          type: "image/png",
        },
        {
          src: "android-chrome-512x512.png",
          sizes: "512x512",
          type: "image/png",
        },
      ],
      start_url: "/",
      display: "standalone",
      theme_color: "#7C86FF",
      background_color: "#171717",
    },
  },

pwa: {
    devOptions: {
      enabled: true,
    },
    manifest: {
      short_name: "XYZ",
      name: "XYZ",
      icons: [
        // {
        //   src: "apple-touch-icon.png",
        //   sizes: "180x180",
        //   type: "image/png",
        // },
        {
          src: "android-chrome-192x192.png",
          sizes: "192x192",
          type: "image/png",
        },
        {
          src: "android-chrome-512x512.png",
          sizes: "512x512",
          type: "image/png",
        },
      ],
      start_url: "/",
      display: "standalone",
      theme_color: "#7C86FF",
      background_color: "#171717",
    },
  },

layouts/default.vue

<template>
  <!-- MANIFEST -->
  <VitePwaManifest />
  <!-- END OF MANIFEST -->

  <!-- vaul-drawer-wrapper -->
  <UContainer class="px-8 py-16 min-h-screen">
    <slot />
  </UContainer>
</template>

<template>
  <!-- MANIFEST -->
  <VitePwaManifest />
  <!-- END OF MANIFEST -->

  <!-- vaul-drawer-wrapper -->
  <UContainer class="px-8 py-16 min-h-screen">
    <slot />
  </UContainer>
</template>

14 Replies

kapa.ai•3w ago

Hi @Lennox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information in the knowledge sources, there's a known issue with Nuxt devtools when using vite-pwa with the development options enabled. According to a Stack Overflow post, this issue occurs specifically when the dev mode is enabled in PWA options. The recommended solution is to disable PWA in development:

"This issue only occurs when dev mode is on in pwa options. The best thing to do is disable pwa in development. It works flawlessly in production." Stack Overflow

Additionally, there's a related GitHub issue mentioned in the same post that you can check for more details: Github Issue #77. The issue appears to be related to how Nuxt devtools initializes watchers on certain mountpoints, which can cause conflicts with the PWA development mode. As mentioned by a contributor:

"During dev mode nitro mounts several directories using the unstorage fs driver... The devtools then initializes watchers on these mountpoints. But these watchers don't respect the ignore option from the nuxt config so they watch many more files." GitHub Issue

To resolve your issue, you should modify your configuration to disable PWA in development mode and only enable it for production builds. This way, you can continue using Nuxt devtools during development without conflicts. If you absolutely need to test PWA features during development, you might need to temporarily disable Nuxt devtools when testing those specific features. Alternative Solution One user reported that disabling Spotlight indexing on macOS resolved a similar issue:

"I've disabled in my mac spotlight indexing of my files and the problem is gone. I can still use the devtools no problem." GitHub Issue

This might be worth trying if you're on macOS and want to keep both features enabled. Frank: I've processed the user's question about issues with vite-pwa and Nuxt devtools. I provided information about the known conflict between these two features in development mode, citing relevant Stack Overflow posts and GitHub issues. I suggested disabling PWA in development as the recommended solution, with an alternative for macOS users. My answer is focused on the specific technical issue and provides practical solutions based on the knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

LennoxOP•3w ago

@kapa.ai any alternatives?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, there are a few alternatives you could consider for your situation with vite-pwa and Nuxt devtools: 1. Disable Spotlight indexing (macOS only): As mentioned in one of the GitHub issues, a user reported: "I've disabled in my mac spotlight indexing of my files and the problem is gone. I can still use the devtools no problem." GitHub Issue 2. Use conditional configuration: You could set up your Nuxt config to only enable PWA features in production mode by using the dev property to conditionally configure features:

   export default defineNuxtConfig({
     // ...
     pwa: {
       devOptions: {
         enabled: process.env.NODE_ENV === 'production',
         // other options...
       },
       // rest of your PWA config
     }
   })

   export default defineNuxtConfig({
     // ...
     pwa: {
       devOptions: {
         enabled: process.env.NODE_ENV === 'production',
         // other options...
       },
       // rest of your PWA config
     }
   })

3. Try local changes to Nuxt DevTools: If you're technically inclined, you could clone the Nuxt DevTools repo and try local modifications to make it work with your PWA setup. The documentation mentions: "You can clone Nuxt DevTools repo and try your changes locally." Nuxt DevTools 4. Use a different PWA implementation: While not directly mentioned in the knowledge sources, you might consider exploring other PWA implementation approaches for Nuxt that might have better compatibility with the devtools. The most straightforward solution remains disabling PWA in development and only enabling it for production builds, but these alternatives might be worth exploring if that approach doesn't work for your specific needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

LennoxOP•3w ago

@kapa.ai my pwa doesn't even work

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your frustration with the PWA functionality not working. Based on the knowledge sources, there are several common issues and solutions for PWA implementation in Nuxt: 1. Configuration Issues: Looking at your previous configuration, there might be some missing elements. According to a Stack Overflow post, one user fixed their PWA by: - Adding registerType: 'autoUpdate' to the PWA configuration - Using x instead of * for icon size resolution (e.g., '48x48' not '48*48') - Moving icon files to the public folder for proper access Stack Overflow 2. Icon Path Issues: Make sure your icon paths are correct. In your configuration, you're using relative paths like "android-chrome-192x192.png" - ensure these files are in your public directory, not in assets. 3. Component Usage: You're using <VitePwaManifest /> in your layout, but some examples use <NuxtPwaManifest />. Make sure you're using the correct component for your setup. 4. Development Mode Limitations: As we discussed earlier, PWA features often don't work properly in development mode. Try building and previewing your application:

   npm run build
   npm run preview

   npm run build
   npm run preview

Then check if the PWA functionality works in the preview mode. 5. Manifest Errors: Check your browser's developer console for any errors related to the manifest or service worker registration. If you're still experiencing issues after trying these solutions, you might want to check if there are any specific error messages in your console that could provide more insight into what's not working with your PWA implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

LennoxOP•3w ago

<VitePwaManifest /> imports as:    @kapa.ai

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue you're experiencing with the <VitePwaManifest /> component not rendering properly. Based on the knowledge sources, this appears to be related to how the PWA manifest is being handled in your Nuxt application. Looking at your output, the component is rendering as an empty HTML comment (), which indicates that either: 1. The component isn't properly registered 2. There's an issue with the manifest configuration 3. There might be a problem with how Vite is handling the PWA plugin From the Stack Overflow posts in the knowledge sources, several users have experienced similar issues with PWA implementation in Nuxt. One user mentioned fixing their PWA configuration by: 1. Adding registerType: 'autoUpdate' to the PWA configuration 2. Ensuring icon files are in the correct location (public folder) 3. Using the correct format for icon sizes ('48x48' instead of '48*48') Additionally, there might be issues with how the app manifest is being loaded. Several recent Nuxt PRs have addressed manifest-related issues: - A fix for handling errors when loading app manifest (GitHub PR #27441) - A fix for respecting baseURL when ignoring prerendered manifest (GitHub PR #30446) - A fix for providing fallback alias for #app-manifest (GitHub PR #30587) Try checking if you're using the correct component name - some examples use <NuxtPwaManifest /> instead of <VitePwaManifest />. Also, ensure you've properly installed and configured the @vite-pwa/nuxt module according to the documentation. Remember that PWA features often don't work properly in development mode, so you might want to build and preview your application to see if the manifest works correctly in a production-like environment. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

LennoxOP•3w ago

@kapa.ai there seems to be a service worker, but chrome aswell as the html dom doesn't display any information of a manifest

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your description, it sounds like you're experiencing an issue where the service worker is being registered but the manifest isn't being properly detected by Chrome or shown in the DOM. This is a common issue with PWA implementation in Nuxt. From the knowledge sources, there are several potential causes and solutions: 1. Manifest Path Issues: Recent Nuxt PRs have addressed issues with manifest handling, including: - A fix for respecting baseURL when handling the manifest (GitHub PR #30446) - Fixes for app manifest aliases (GitHub PR #30587 and GitHub PR #30618) 2. Component Rendering: As you've noticed, the <VitePwaManifest /> component isn't rendering properly in your DOM. This could indicate that the manifest isn't being generated or linked correctly. 3. Configuration Issues: Based on a Stack Overflow solution, make sure your PWA configuration includes:

   pwa: {
     registerType: 'autoUpdate',
     manifest: {
       // your manifest config
     }
   }

   pwa: {
     registerType: 'autoUpdate',
     manifest: {
       // your manifest config
     }
   }

4. Icon Path Issues: Ensure your icon files are in the public directory, not in assets, and that the paths in your manifest configuration point to them correctly. 5. Development vs Production: PWA features often don't work properly in development mode. Try building and previewing your application to see if the manifest works in a production-like environment:

   npm run build
   npm run preview

   npm run build
   npm run preview

To debug this further: - Check the Network tab in Chrome DevTools to see if the manifest file is being requested/loaded - Look for any errors in the Console related to the manifest - Verify that your manifest configuration is correct and that all required fields are present - Make sure you're using the latest version of @vite-pwa/nuxt If you're still experiencing issues, it might be worth checking if there are any specific error messages that could provide more insight into what's happening with your manifest. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Gaming

Programming

Vite-PWA

Did you find this page helpful?