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