Static GitHub Issues

[2844] Add Firebase Custom Server Integration Causing Error

prev: $toast is available in mounted but not in created function after browser refresh
next: Axios Plugin: window is not defined

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

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2470">#c2470</a>)</em></sub></div>