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

[nastya.danilchenko]

Hi guys,

I have a “both sides of the same coin” type of issue trying to use Netlify forms.
I use Nuxt.js here https://objective-edison-d01121.netlify.app/.

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?

[luke]

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:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

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:

2 Ways to Create Server-Rendered Routes Using Next.js and Netlify

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).