Nuxt 3 and Netlify Forms: Does not work or won't get detected during deploy

Question

I am trying to use Netlify forms on my Nuxt 3 app. For some reason it is not being picked up by netlify and thus does not work.

here's my page code:

pages/contact.vue:

<script lang="ts" setup></script>

<template>
    <div>
        <form name="contact" method="POST" netlify>
            <p>
                <label>Your Email: <input type="email" autocomplete="off" class="input input-bordered w-full max-w-xs"
                        name="email" /></label>
            </p>
            <p>
                <label>Message: <textarea name="message" class="textarea textarea-bordered"></textarea></label>
            </p>
            <p>
                <button type="submit" class="btn">Send</button>
            </p>
        </form>
    </div>
</template>

<style scoped></style>

My Nuxt config does not contain any route rules for the contact page. Anyone got any ideas why this is not working?

Answer 1

Netlify build robots can't find the HTML form when building the page, since by default you're using SSR in Nuxt 3. There are a few workarounds like:

• Adding a static HTML page that emulates the form (e.g netlifyfindthisplease.html) so the robots are aware of the form.
• Or running nuxi generate for a fully static build, but that's not always convenient.

Since Nuxt 3 supports hybrid rendering, you can just prerender the contact form:

export default defineNuxtConfig({
    routeRules: {
        '/contact': { prerender: true },
    }
})