具有Firebase集成的Nuxt SSR

Question

I tried to restructure the project folder so that it can be deployed to Firebase, take a look to this repository Nuxt Firebase Vuetify . On nuxt.config.js I changed the buildDir to ../functions/.nuxt , at first sight it looks worked. But whenever I use custom component from UI framework like Vuetify, it becomes error. On the browser console, there is 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.

Any idea how can I solve this? Or maybe I missed any other configuration on that project?

Answer 1

So this is quite old, but I happened to stumble across the same issue just a few days ago, so maybe this can help you or someone else in the future.

To my understanding, this issue is caused due to the vue module, which is a dependency of Nuxt, being installed inside the functions folder. When you run Nuxt with the buildDir set to functions/.nuxt and import Vue from 'vue' in your plugins, you get another Vue-class than the one being used by Nuxt. This is a bug in Nuxt, as far as I know.

How to hotfix this:

• Remove the nuxt and vue modules from your node_modules inside the functions directory, all will run regardless.
• You will need to reinstall the modules before deploying to Firebase, if you use any of these modules in your Firebase Functions.

Answer 2

Metaphalo's answer works for me, to this I wanted to add that if you have a srcDir: 'src' in which all the nuxt directories are, I recommend adding.

nuxt.config

srcDir: 'src', buildDir: process.env.NODE_ENV === 'production' ? 'functions/.nuxt' : '.nuxt',

so you can use the plogins in dev