Adding '@vite-pwa/nuxt' to nuxt 3 project causes hydration errors

Question

I want to make my nuxt 3 website PWA enabled. I am using '@vite-pwa/nuxt' for this.

When adding this package and enabling pwa in nuxt.config.ts it causes 2 issues:

1. Hydration errors start to occur when I refresh any page (class mismatch).
2. Whenever I refresh from any route it goes back to the homepage instead of staying on the same page.

I am attaching my nuxt.config,ts below :

export default defineNuxtConfig({
  css: ['bootstrap/dist/css/bootstrap.min.css','~/assets/css/main.css',],
  devtools: { enabled: true },
  modules: [
    '@vite-pwa/nuxt',
      '@pinia/nuxt',
      'nuxt-swiper',
    '@vee-validate/nuxt',
    'nuxt-mdi',
  ],
  plugins:[
      "~/plugins/bootstrap.client.ts",
  ],
  app: {
    head: {
    }
  },
  pwa: {
    devOptions: {
      enabled: true,
      type: 'module'
    },
    manifest: {
      name: 'My Nuxt App',
      short_name: 'My Nuxt App',
      description: 'My incredible Nuxt app',
      theme_color: '#ffffff',
      lang: 'en'
    }
  }
})

Hydration error is occuring on this line of html code where the active class is added conditionally.

<li v-for="(navItem, index) in store.getNavItems" :key="index" class="nav-item me-4 me-xl-5 position-relative" :class="{ 'dropdown': !!navItem.links , 'active': $route.path.includes(navItem.route) }">

I get this error:

[Vue warn]: Hydration class mismatch on <li class=​"nav-item me-4 me-xl-5 position-relative dropdown" data-v-inspector=​"components/​common/​Navbar.vue:​76:​13">​…​</li>​ 

  - rendered on server: class="dropdown nav-item me-4 me-xl-5 position-relative"
  - expected on client: class="nav-item me-4 me-xl-5 position-relative dropdown active"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <Navbar> 
  at <Default ref=Ref< undefined > > 
  at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > 
  at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

I am not able to find a solution anywhere else. Please shed some light on what could I be doing wrong.

Answer 1

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. Here is the linked github issue if anyone wants to check on the issue on their github.

Github Issue