Vue + Nuxt.js Prerender Form not showing in forms page on dashboard

Support
1

Briefly summarise the issues you have been experiencing.
So I’m trying to use the forms feature on my page, I’m using Vue.js + Nuxt, which allows me to prerender using static page generator following the steps described here How to Integrate Netlify Forms in a Vue App
but I cannot see the form neither the submissions on my admin dashboard. Also when I submit it trought axios http call, I get a 404 directly.

Please provide a link to your live site hosted on Netlify.
https://staging.alvarosaburido.com/en/contact

What have you tried as far as troubleshooting goes? Do you have an idea what is causing the problem?

I followed the steps described here How to Integrate Netlify Forms in a Vue App and used the prerender option.

I followed de documentation, and read trough:

I’m not sure if it needs to be on production directly and it will not work on a Branch Deploy like staging. Also, it’s any way to test if a page is pre- rendered ?

I used curl -A twitterbot https://staging.alvarosaburido.com/en/contact/ and I get all the page with the forms.

But if I use curl -A twitterbot https://staging.alvarosaburido.com/en/contact without the / at the end it shows <html><head></head><body></body></html> .

Could be that the reason?

2

Hi @alvaro.saburido,

Thanks for writing in. @divya actually created a simple nuxt.js + netlify forms example that you can find at netlify-nuxt-forms/index.vue at master · shortdiv/netlify-nuxt-forms · GitHub

Feel free to clone that repo and dig in. Let us know if it helps.

1 Like
4

+1 for @divya s solution. I used it in my form and it worked perfectly! Thanks!

2 Likes
5

@themicrogirl, welcome to our online community and thank you for letting us know that Divya’s solution works perfectly for you as well.

Feedback about both what works and what does not helps us to keep our community topics, documentation, and example git repos up to date. We appreciate you taking the time to share your experience as this is a key part of keeping our recommendations and solutions up to date. Thanks again for letting us know!

6

Hi @divya,

Could you explain what in your code fix the problem cited above ?
Is it the simple fact that you added the below code to your form ?

<input type="hidden" name="form-name" value="vue-tea" />

I was about to define the form skeleton in the app.html template (solution of https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/#stand-in-static-forms).
I would find your solution lighter, mostly if there are numerous form across the app.

Thanks

7

Hey @jbuiquan! Thanks for your question!

The bit that tells Netlify that there’s a form on the page is the data-netlify: true attribute in the form markup. From the post your linked, I mentioned the need to prerender. This is so that the Netlify bots can see your form on the page. In the case of a non prerendered SPA, Netlify can’t see the form since the markup is being generated by the JS dynamically. In the case of the Nuxt project, I’m generating to static pages, as a result, the form is easily visible to Netlify and it registers it appropriately. With this setup, there’s no need to add the form in the app.html.

Hope this helps!
Divya

8

Hi @divya,

Thanks for the longer explanation.
I use nuxt generate in order to deploy my application so I expected that the bots would be able to find my forms.
Here’s part of my code :

<form
    name="contact"
    method="POST"
    :action="mySuccessRoute"
    data-netlify="true"
    data-netlify-honeypot="bot-field"
    data-netlify-recaptcha="true"
>
    <input type="hidden" name="form-name" value="contact" />
    <!-- some more fields -->
    <div
        id="recaptcha"
        class="g-recaptcha"
        data-callback="onRecaptchaSuccess"
        :data-sitekey="recaptchaApiKey"
    ></div>
    <button type="submit">...</button>
</form>
9

A post was merged into an existing topic: Vue form questions

10

After analysing Divya’s example, the only factor that triggerred the correct recoginition of the forms, appart from the

<input type="hidden" name="form-name" value="vue-tea" />

is the configuration in nuxt.config.js. She used mode: universal which is for Isomorphic application (server-side rendering + client-side navigation). Please note that as of today (Feb 2, 2022), the mode option has been deprecated, so you might (as I did) used ssr:false which correspond to option mode:spa. In my mind, Netflify does not run a node server in the back-end, only static sites, therefore I opted for ssr:false, and apparently my thought was wrong.

I don’t know if anyone could comment on the most up-to-date set up in nuxt.config.js.
Thanks
Roberto

11

Hey @robertoshimizu,

Are you using Nuxt 3?

@coelmay had shared this basic example that seems to work:

https://github.com/coelmay/nuxt3-netlify-form

12

No, I am using nuxt 2.15.8
The documentation of this version already preclude deprecation of mode option.

Cheers
RS

13

Hi @robertoshimizu

Is it the use of Netlify Forms you are having issues with (as the OP was)? Reading your post it seems nothing to do with forms, rather specifically about SSR.

If you are disabling SSR then pre-rendering isn’t an issue as everything it built static/client-side rendered.

14

Hi, yes I came from an issue in Netlify forms. I was struggling to make it work and after some investigation, I had noticed that my nuxt config were: "ssr:false; target:“static”, as compared to Divya’s code, in which the config was: “mode:universal”.

However, as of today, mode universal is deprecated, so I had to remove ssr:false, in order to make netlify forms to work.

Hope it helps to clarify.
Cheers

15

Thanks @robertoshimizu.

I have a nuxt 2 (2.15.7) where I have

ssr: false,
target: 'static',

and Netlify forms works fine, including file upload.