Nuxt3 or Vue3 example with Netlify Forms

Support
, ,
1

Nuxt3 or Vue3 example with Netlify Forms
Tried a lot, unfortunately there is no manual for nuxt3
and netlify forms. The instructions with vue3 didn’t help me. Does anyone know a guide for nuxt3 or vue3 that is not too old. My instructions have all been 12 months and older.
Maybe that’s why the scripts don’t work.

  • Local “netlify dev” environment runs everything is OK
  • use nuxt3 with ssr
  • If I look at my page in the source code, both the form and the hidden tag with form-name are available. So the browser should be able to render it. Everything works locally, as I said, and even when called via Netlify production, the page source text shows the form and also the hidden tag with the form name
  • already tried netlify instructions for installing forms.
  • Instructions from the Internet, unfortunately there is not much up-to-date is not possible either. Most instructions assume Single Page App.
  • I can only have a form created by netlify if I create an .html file in my public folder and use exactly the same form (as hidden) that I have in the .vue document. This creates a form for me in Netlify but no parameters of the form.

Do I have to make any redirects or create .html files in the public folder which can then be deleted again when netlify has created the forms. How can I narrow down my problem more?
Thanks for the help

Thanks for help

2

Hi @didefix

I did a little testing and have come up with a workable solution I believe.

I created a stock Nuxt3 site as per the v3 documentation. As per Deployment → Netlify there is some magic that goes on behind the scenes. Everything is run through a serverless function it seems which stops the standard AJAX posting method from working.

My solution as seen in coelmay/nuxt3-netlify-form is to use the placeholder form (which is deployed because it is in the public directory) as the POST endpoint. While I didn’t initially think it would work, it did.

Hope this helps.