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

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 https://www.netlify.com/blog/2018/09/07/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.

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 https://www.netlify.com/blog/2018/09/07/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?

Hi @alvaro.saburido,

Thanks for writing in. @divya actually created a simple nuxt.js + netlify forms example that you can find at https://github.com/shortdiv/netlify-nuxt-forms/blob/master/pages/index.vue

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

1 Like

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

2 Likes

@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!

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

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

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>

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