Home

Issue: 2844

Add Firebase Custom Server Integration Causing Error

[issue link]

I tried to restructure the Nuxt project folder so that it can be deployed to Firebase, take a look this repository Nuxt Firebase Vuetify.

Everything is working fine, but a problem occurred when I use custom component from UI framework like Vuetify. The browser console displays an error like this,

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing . Bailing hydration and performing full client-side render.

I changed buildDir config to ../functions/.nuxt so that it can be run inside functions directory. And I think this is the cause. Any idea or maybe I missed some configuration on that project?

Btw, that project is generated by create-nuxt-app that I have modified, take a look also to this pull request, Add Firebase Custom Server Integration

This question is available on Nuxt.js community (#c2470)