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

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?

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 },
    }
})