How to send form data in POST request in Nuxtjs 3

Question

Am working on a static website but I need to contact form which is suppose to send form data to an email, Am using nuxtjs 3, have tried using useFetch(), am also trying to use axios.

Here is what I have

Contact Vue Template

<template>
  <section id="ng-ctt" class="ng-ctt">
    <div class="ng-ct">
      <div class="ng-fx">
        <div class="ng-fx6-m">
          <figure class="ng-ctt-img">
            <img src="~/assets/media/illustrations/contact.svg" alt="ctt img" class="ng-img">
          </figure>
        </div>
        <div class="ng-fx6-m">
          <div class="ng-fxc">
            <div class="ng-ctt-text">
              <span class="ng-title">Mail</span>
              <NuxtLink to="mailto:[email protected]" class="ng-link">[email protected]</NuxtLink>
            </div>

            <div class="ng-ctt-text">
              <span class="ng-title">Location</span>
              <span class="ng-text">Lagos, Nigeria</span>
            </div>
           
            <div class="ng-ctt-text">
              <span class="ng-ctt-text-or">OR</span>
            </div>

            <form @submit.prevent="submitForm" id="ng-fm" class="ng-fm">
              <div class="ng-fm-row">
                <input type="text" v-model="formData.full_name" class="ng-inp" placeholder="Full Name">
              </div>
              <div class="ng-fm-row">
                <input type="text" v-model="formData.email" class="ng-inp" placeholder="Email">
              </div>
              <div class="ng-fm-row">
                <input type="text" v-model="formData.phone_no" class="ng-inp" placeholder="Phone Number">
              </div>
              <div class="ng-fm-row">
                <input type="text" v-model="formData.service" class="ng-inp" placeholder="Service">
              </div>
              <div class="ng-fm-row">
                <textarea name="" v-model="formData.message" class="ng-inp" placeholder="Message"></textarea>
              </div>
              <div class="ng-fm-row">
                <button class="ng-bt-pri" type="submit">Send Message</button>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>
  </section>
</template>

Contact Script

<script lang="ts" setup>
  interface formData {
    full_name: string,
    email: string,
    phone_no: string,
    service: string,
    message: string,
  }

  let formStatus: {} = {
    loading: false,
    success: false,
    error: false,
  }

  let formData: formData = {
    full_name: "",
    email: "",
    phone_no: "",
    service: "",
    message: "",
  };

  async function submitForm() {

    // console.log(data);
    // console.log(JSON.stringify(formData));
    // this.formStatus.loading = true,
    // await this.$axios.$post("/api/contact", {
    //   full_name: this.full_name,
    //   email: this.email,
    //   phone_name: this.phone_name,
    //   service: this.service,
    //   message: this.message
    // }).then(response => {
    //   this.success = true
    //   this.errored =false
    // }).catch(error => {
    //   this.errored = true
    // }).finally(() => {
    //   this.loading = false
    // });
  }

  // return {
  //   formData: formData
  // }

</script>

Main Question is How to send form data in POST request in Nuxtjs 3.

Answer 1

I tried the same way with FormData... but i ended up to send the params as json body.

I use the $fetch function that Nuxt3 provides.
And my form submit methods looks like this.

methods: {
    formSubmit() {

        this.formRequest().then( (result) => {
            console.log(result)
        }).catch( (error) => {
            console.error('Contact form could not be send', error)
        });
    },

    async formRequest() {

        return await $fetch( <your-form-endpoint>, { 
            headers: {
                "Content-Type": "multipart/form-data",
            },
            method: 'POST',
            body: {
                'message': <your-form-data>,
                'name': <your-form-data>
            }
        } );
    }
}

In my case it was necessary to set the Content-Type to multipart/form-data in terms of CORS headache. Hope that helps you little bit.