Reputation: 416
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:
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.
Upvotes: 1
Views: 578
Reputation: 416
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.
Upvotes: 1