I have a Nuxt 3 website that I want to make PWA enabled. To achieve this, I am utilizing '@vite-pwa/nuxt'.
However, after adding the package and enabling PWA in my nuxt.config.ts file, I encountered two issues:
- Hydration errors occur when refreshing any page due to class mismatch.
- Refreshing from any route redirects back to the homepage instead of staying on the same page.
Below is a snippet of my nuxt.config.ts file for reference:
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'
}
}
})
The hydration error specifically occurs in the following HTML code where active class is conditionally added:
<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) }">
The error message reads:
[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’ve searched for solutions but haven’t found one yet. Any insights into what might be causing these issues would be greatly appreciated.