POST requests for form submission in Vue

Introduction

POST requests send data from a form to a server safely. They help save or update information.

When a user fills out a signup or login form.

When submitting a comment or feedback on a website.

When uploading data like a profile update or settings change.

When sending order details in an online shop checkout.

When sending sensitive data that should not appear in the URL.

Syntax

Vue

<template>
  <form @submit.prevent="submitForm">
    <!-- form inputs here -->
  </form>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({})

async function submitForm() {
  const response = await fetch('URL', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData.value)
  })
  // handle response
}
</script>

Use @submit.prevent to stop the page from reloading on submit.

Always set Content-Type to application/json when sending JSON data.

Examples

Basic form with a name input and submit button.

Vue

<form @submit.prevent="submitForm">
  <input v-model="formData.name" placeholder="Name" />
  <button type="submit">Send</button>
</form>

Sends form data as JSON and logs the server reply.

Vue

async function submitForm() {
  const response = await fetch('/api/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData.value)
  })
  const result = await response.json()
  console.log(result.message)
}

Sample Program

This Vue component shows a simple contact form. When submitted, it sends the data with a POST request. It shows messages about the sending status. The form uses accessible labels and live region for updates.

Vue

<template>
  <main>
    <h1>Contact Us</h1>
    <form @submit.prevent="submitForm" aria-label="Contact form">
      <label for="name">Name:</label>
      <input id="name" v-model="formData.name" required aria-required="true" />

      <label for="email">Email:</label>
      <input id="email" type="email" v-model="formData.email" required aria-required="true" />

      <button type="submit">Submit</button>
    </form>
    <p role="status" aria-live="polite">{{ message }}</p>
  </main>
</template>

<script setup>
import { ref } from 'vue'

const formData = ref({ name: '', email: '' })
const message = ref('')

async function submitForm() {
  message.value = 'Sending...'
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData.value)
    })
    if (response.ok) {
      message.value = 'Form submitted successfully!'
      formData.value = { name: '', email: '' }
    } else {
      message.value = 'Failed to submit form.'
    }
  } catch {
    message.value = 'Error sending form.'
  }
}
</script>

Important Notes

Always handle errors to inform users if the submission fails.

Use aria-label and aria-live for better accessibility.

Reset form fields after successful submission to clear inputs.

Summary

POST requests send form data safely to servers.

Use Vue's @submit.prevent to control form submission.

Show clear messages to users about submission status.