How to Make HTTP Put Request in Vue 3 with Axios

Last Updated on March 4, 2024 by Digamber in Vue JS

In this tutorial we will teach you how to make HTTP put request using Axios library in Vue js application and update the data on a web server.

Axios is a well-known JavaScript library especially used for handling HTTP requests in modern web applications. We have created step by step guide on:

How to handle HTTP GET request in Vue

How manage POST request in Vue

How to send DELETE request in Vue

In order to handle axios delete request with params in Vue you have to use the axios library in vue.

It offers almost every method that can allow you create, update, delete and update data on the server.

Axios is commonly used in frontend applications to send and receive data through the backend servers.

Vue 3 Send HTTP PUT Request using Axios Tutorial

• Step 1: Create Vue Application
• Step 2: Install Axios Library
• Step 3: Define Bootstrap
• Step 4: Create Component File
• Step 5: Update Data with POST Request
• Step 6: Register New Component
• Step 7: View App on Browser

Create Vue Application

Vue CLI (Vue Command Line Interface) is a command-line tool that eases the process of creating, developing, and managing Vue.js applications.

You can install the Vue CLI using the below command:

npm install -g @vue/cli

Now we are ready to install a new Vue application, invoke the following command:

vue create vue-demo-app

Select the Vue 3 option from the options list.

cd vue-demo-app

Install Axios Library

In this step, we will type the given command on the console and hit enter to install the Axios library:

 npm install axios

Define Bootstrap

In this example, we need to define the Bootstrap CSS CDN link inside the head section.

Make sure to add the given code in the public/index.html file:

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

Create Component File

Head over to components/ folder, here you have to create Home.vue file with given code.

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

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

Update Data with Axios POST Method

The updateReq() method encapsulates all the logic that communicates with the server in relation to update the data in Vue through Axios HTTP Put method.

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

<template>
    <div>
        <h2 class="mb-4">Vue 3 Axios HTTP Put Request Example</h2>
        <input v-model="updateName" class="form-control mb-3" placeholder="Name">
        <button @click="updateReq" class="btn btn-primary">Update</button>
    </div>
</template>
  
<script>
import axios from 'axios';

export default {
    data() {
        return {
            userId: 1,
            updateName: ''
        };
    },
    methods: {
        updateReq() {
            const updatedUserData = {
                name: this.updateName
            };

            axios.put(`https://api.example.com/resources/${this.userId}`, updatedUserData)
                .then(res => {
                    console.log('Update successful:', res.data);
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    }
};
</script>

Register New Component

You have to open the App.vue file, and make sure to import the component that you want to register and see in action on the browser.

<template>
  <div class="container mt-5">
    <Home />
  </div>
</template>

<script>
import Home from './components/Home.vue';

export default {
  components: {
    Home
  }
}
</script>

View App on Browser

Now, time has come to start the app development server.

You can run the Vue js application using the below command:

npm run serve

Test the app using the given URL.

http://localhost:8080

Conclusion

In this comprehensive post, we have step-by-step learned how to send a PUT HTTP request using JavaScript’s Axios library and Vue js component.

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