Nuxt 3: how to integrate Netlify forms (or add custom html) to client rendered app?

Question

I am trying to integrate Netlify form in the footer of Nuxt 3 SPA website and Netlify deploy is not picking it up on build. Wondering if it's possible to add a hidden form (like on Nuxt 2) as static html?

my form:

<form 
  id="subscribe"
  name="subscribe" 
  method="post" 
  netlify 
  netlify-honeypot="bot-field" 
  data-netlify="true" 
  @submit.prevent="onFormSubmit"
>
  <input type="hidden" name="form-name" value="subscribe">
  <input type="email" name="email" required>
  <button>Submit</button>
</form>

JS handler:

const onFormSubmit = (e) => {
  let myForm = document.getElementById("subscribe");
  let formData = new FormData(myForm);
  fetch("/", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: new URLSearchParams(formData).toString(),
  })
  .then(result => showThanks.value = true)
  .catch((error) => console.log(error));
}

I use JS to send the form and I get 200 OK response, but if I go to Forms page in Netlify - it's empty.

Answer 1

wasn't able to set it up with nuxt build, so ended up using SSG nuxt generate