TL;DR: You need to include the hidden form-name input in your Vue template. All better! (Probably.)
More details for bored people:
This post specifically addresses forms submitted normally, not forms submitted using JavaScript. If you are using JavaScript to submit your form, this probably doesn’t apply to you.
I am using Nuxt 2.14.7 in full static mode. There are no dynamic routes to generate here, just the components in the pages directory.
Here is a build preview of my form before the fix, so you can follow along: https://5f977443a48b8f0007150dce–tri-county-pdr-dev.netlify.app/quote/
You will notice that the Netlify bots have added an enctype attribute to the form, as well as the hidden form-name input. Oddly, the form-name input has a closing tag. Incidentally, this input has completely replaced the first fieldset element in my markup, including the closing tag. Weird.
You will also notice an error in the console. This is important. Try clicking the + button in the attachments section. It doesn’t work as expected, and you will see three more errors in the console. Odd. This button uses a v-on:click handler to increment an integer value in data(). There are a total of 5 file inputs here, but 4 are hidden initially. I use v-show to show progressively more file inputs as the integer is incremented, up to 5. (v-show is preferable to v-if here, because v-show leaves the inputs in the DOM where the Netlify bots can see them.) It would appear that Vue is simply not hydrating properly here. (Not the first time this has been reported. See https://answers.netlify.com/t/netlify-form-nuxt-js-error-during-form-parsing-vue-hydration-fails/21896.)
It gets more interesting though. If you navigate to the home page, and then navigate back to the form, Vue is able to hydrate properly. Unfortunately, all the Netlify bot modifications are now gone. That’s a no-go.
So I had either A) A form that didn’t work because Vue didn’t hydrate properly, or B) a form that didn’t work because it didn’t contain the necessary enctype attribute or required form-name input.
My solution: include the hidden form-name input in my Vue template.
This ensures that the input is present even when Vue has hydrated, and also happens to prevent the Netlify bots from screwing up my fieldset. If you land on another page first, and then navigate to the form, the encytpe attribute will still be absent from the form, and the netlify attribute will be present, but it still seems to work without issue, even with file uploads.
Here is the current (fixed) form: https://tricountypdr.com/quote.
I plan to implement a honeypot next, and will update this thread if I run into anything weird.
Suggestion/Request for the Netlify team: Please incorporate better Nuxt/Vue support into your form detection bots. I have spent upwards of 5 hours between two projects, over several days, with much frustration trying to get it to work. I gave up and deployed a lambda function via the Serverless Framework for the other project, and I almost did the same for this project.
Hope it’s alright to post this here, even though it isn’t exactly a support request.
