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

**URL:** <https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143>\
**Category:** Support\
**Tags:** netlify-forms\
**Created:** [July 17, 2019, 9:57am UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143 "2019-07-17T09:57:47Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![alvaro.saburido](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/alvaro.saburido/32/1847_2.png) [@alvaro.saburido](https://answers.netlify.com/u/alvaro.saburido)\
**Post date:** [July 17, 2019, 9:57am UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/1 "2019-07-17T09:57:47Z")

</div>

**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](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.**  
[https://staging.alvarosaburido.com/en/contact](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](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:

- [[Support Guide] Form problems, form debugging, 404 when submitting](https://answers.netlify.com/t/common-issue-how-to-debug-your-form/92)
- [[Support Guide] Form not showing in Netlify site dashboard](https://answers.netlify.com/t/common-issue-form-not-showing-up-in-forms-page-on-site-dashboard/85)

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?

---

<div class="post-metadata">

**Author:** ![futuregerald](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/futuregerald/32/33_2.png) [@futuregerald](https://answers.netlify.com/u/futuregerald)\
**Post date:** [July 19, 2019, 2:38pm UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/2 "2019-07-19T14:38:47Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![themicrogirl](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/themicrogirl/32/2637_2.png) [@themicrogirl](https://answers.netlify.com/u/themicrogirl)\
**Post date:** [September 1, 2019, 3:51pm UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/4 "2019-09-01T15:51:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![luke](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/luke/32/39_2.png) [@luke](https://answers.netlify.com/u/luke)\
**Post date:** [September 3, 2019, 12:40am UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/5 "2019-09-03T00:40:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbuiquan](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jbuiquan/32/23695_2.png) [@jbuiquan](https://answers.netlify.com/u/jbuiquan)\
**Post date:** [March 4, 2020, 3:54pm UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/6 "2020-03-04T15:54:59Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![divya](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/divya/32/65_2.png) [@divya](https://answers.netlify.com/u/divya)\
**Post date:** [March 6, 2020, 5:47pm UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/7 "2020-03-06T17:47:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jbuiquan](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/jbuiquan/32/23695_2.png) [@jbuiquan](https://answers.netlify.com/u/jbuiquan)\
**Post date:** [May 28, 2020, 3:13pm UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/8 "2020-05-28T15:13:31Z")

</div>

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 :

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![luke](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/luke/32/39_2.png) [@luke](https://answers.netlify.com/u/luke)\
**Post date:** [November 3, 2020, 7:08am UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/9 "2020-11-03T07:08:20Z")

</div>

A post was merged into an existing topic: [Vue form questions](https://answers.netlify.com/t/vue-form-questions/25665/4)

---

<div class="post-metadata">

**Author:** ![robertoshimizu](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/robertoshimizu/32/34017_2.png) [@robertoshimizu](https://answers.netlify.com/u/robertoshimizu)\
**Post date:** [February 3, 2022, 11:54am UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/10 "2022-02-03T11:54:32Z")

</div>

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

```auto
<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

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [February 3, 2022, 1:35pm UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/11 "2022-02-03T13:35:17Z")

</div>

Hey @robertoshimizu,

Are you using Nuxt 3?

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

[https://github.com/coelmay/nuxt3-netlify-form](https://github.com/coelmay/nuxt3-netlify-form)

---

<div class="post-metadata">

**Author:** ![robertoshimizu](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/robertoshimizu/32/34017_2.png) [@robertoshimizu](https://answers.netlify.com/u/robertoshimizu)\
**Post date:** [February 3, 2022, 1:48pm UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/12 "2022-02-03T13:48:10Z")

</div>

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

> **[The mode Property](https://nuxtjs.org/docs/configuration-glossary/configuration-mode/)**
>
> Change default nuxt mode

Cheers  
RS

---

<div class="post-metadata">

**Author:** ![coelmay](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/coelmay/32/24427_2.png) [@coelmay](https://answers.netlify.com/u/coelmay)\
**Post date:** [February 3, 2022, 8:37pm UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/13 "2022-02-03T20:37:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![robertoshimizu](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/robertoshimizu/32/34017_2.png) [@robertoshimizu](https://answers.netlify.com/u/robertoshimizu)\
**Post date:** [February 4, 2022, 11:16am UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/14 "2022-02-04T11:16:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![coelmay](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/coelmay/32/24427_2.png) [@coelmay](https://answers.netlify.com/u/coelmay)\
**Post date:** [February 4, 2022, 11:21am UTC](https://answers.netlify.com/t/vue-nuxt-js-prerender-form-not-showing-in-forms-page-on-dashboard/2143/15 "2022-02-04T11:21:58Z")

</div>

Thanks @robertoshimizu.

I have a nuxt 2 (2.15.7) where I have

```javascript
ssr: false,
target: 'static',

```

and Netlify forms works fine, including file upload.