How to Send HTTP POST Request in Vue 3 with Axios

In this step-by-step guide, we will teach you how to use the HTTP POST requests in Vue 3 application using using Axios library and add a resource to a webserver.

HTTP POST request in Vue is a primary method used in web development to consume REST API as well as insert document in a server. It’s a HTTP protocol mainly used to send data from a client side to a web server.

By making the POST request, we ideally submit data to be processed by the server. HTTP POST requests are made to store the data on the server.

In this Vue Axios HTTP POST Request Example, we will decipher how to send data to webserver using HTTP post request mechanism.

HTTP POST request in Vue is helpful in making the post request or sending data across the server; the data is added with the body of the request. You can store various types of the data with the post request.

Such as: plain text, JSON, XML, or even binary data. The most ideal use of HTTP POST requests is to submit forms on websites, consume API data, uploading image and video files, and most importantly handling various data manipulation tasks on the server.

We have also created comprehensive guides on Axios and Vue, make sure to check them:

How to handle HTTP GET request in Vue

How to send PUT request in Vue

How to send DELETE request in Vue

Vue 3 Send HTTP Get Request using Axios Tutorial

Here’s are the steps that you need to follow to invoke Axios post request in Vue js:

• Step 1: Build Vue Project
• Step 2: Add Axios Package
• Step 3: Add Bootstrap CSS
• Step 4: Make New Component
• Step 5: Make Axios HTTP POST Request
• Step 6: Update App File
• Step 7: Start Development Server

Build Vue Project

You must have Node, NPM and Vue CLI installed on your development machine.

You can execute the given command to install the Vue CLI:

npm install -g @vue/cli

Once the Vue CLI is ready, next install a brand new Vue application.

vue create vue-demo-app

Choose the Vue 3 option from the options list.

Enter into the project folder:

cd vue-demo-app

Add Axios Package

The most important task of this guide is to install the Axios package using given command:

 npm install axios

Add Bootstrap CSS

In order to take advantage of Bootstrap, define the bootstrap latest version URL inside the head section in the public/index.html file:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

Make New Component

Look for components/ directory, inside this directory you have to create a new file Home.vue.

The following code forms a basic component in Vue.

<template>
    <div>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    }
}
</script>

Make Axios HTTP POST Request

We need a some data, here is why we created an object with name and email data. We are using the axios post to store this data on the server.

Add the below code in the components/Home.vue file:

<template>
    <div>
        <h2>Vue 3 Axios HTTP POST Request Example</h2>
        <button @click.self="makeHttpReq" class="btn btn-primary">Send Data</button>
    </div>
</template>
  
<script>
import axios from 'axios';
export default {
    data() {
        return {
        };
    },
    methods: {
        makeHttpReq() {
            const userObject = {
                name: 'John Doe',
                email: 'john@gmail.com'
            };
            // Add Your API URL
            axios.post('https://example.com/api/endpoint', userObject)
                .then(response => {
                    console.log('Response:', response.data);
                    // Handle the response from the server
                })
                .catch(error => {
                    console.error('Error:', error);
                    // Handle errors
                });
        }
    }
};
</script>

Update App File

Navigate to the App.vue file, import the Home component in the script, define the component inside the template directive.

<template>
  <div class="container mt-5">
    <Home />
  </div>
</template>
<script>
import Home from './components/Home.vue';
export default {
  components: {
    Home
  }
}
</script>

Start Development Server

To view the app, we need to run the development server:

npm run serve

You can paste the given URL on the browser’s address bar, hit enter to see the app in action.

http://localhost:8080

Conclusion

In this tutorial, we learned how to send HTTP POST request in Vue.

We created a simple JSON object with a name and email, we want to store this data on the server.

We used the Axios package and a simple Vue component and created a basic system.

After receiving the JSON data, server will start processing it and send a related response.

Reference: https://www.npmjs.com/package/axios