Netlify Form - Nuxt.js error during form parsing - Vue hydration fails

Hi guys,

I have a “both sides of the same coin” type of issue trying to use Netlify forms.
I use Nuxt.js here

I’m ending up with two scenarios which I describe below:

Scenario 1 - “Captain Obvious 404”:

There’s a form modal on my website which is actually not in the DOM during the render (Vue’s “v-if” attribute) and it’s added to the DOM when button is clicked. Thanks to that solution Netlify can’t parse the form on the server, because it’s added dynamically by Javascript’s event and it’s not in the DOM while the website is being rendered. The results is obvious - I’m getting 404 error.

I’ve even tried that solution but it didn’t work.

Scenario 2 - “Mysterious Hydration Fails”:

Since I understand that the form has to be visible in the DOM on the Netlify’s server, I’ve changed its visibility. From now on I’m using Vue’s “v-show” attribute which keeps <form> tag in the DOM, but hides it by CSS “display: none;”. The result of that is an error in the console and lack of header and footer on the website:

I’ve tried to wrap it in <ClientOnly> tag, as Nuxt.js guys recommended me to do on theirs github, but it’s the same solution as it is in “Captain Obvious 404” - it form is not visible on the server, Netlify can’t connect to it.

Could you please help me figure it out somehow?

Hi, @nastya.danilchenko. I see there is a support ticket about this and I replied there as well.

For the forms issue, this troubleshooting guide is the first step:

For the hydration issue, there is no server-side rendering by default at Netlify. There are workarounds for this, for example this blog post below covers using Functions to do this:

Note, that blog post is about Next.js and not about Nuxt.js. However, the general concept still applies even if the specific solution does not.

If there are other questions about this, please let us know (either here or the support ticket, whichever you prever).