How to Make HTTP DELETE Request in Vue 3 using Axios

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

Throughout this tutorial we will learn how to send HTTP DELETE request to a web server using Axios library in Vue 3 application.

An HTTP Delete request is make to delete a resource on a server. HTTP stands for Hyper Text Transfer Protocol, under HTTP mechanism various requests come that allows managing the resources on the server.

In this Vue Axios DELETE Request example, we will see how to use Axios library in React and learn how to delete resource on a server using axios delete by id.

It seamlessly offers dynamic and intuitive way to send HTTP DELETE requests from your Vue frontend application to a server.

We will throw light on a complete process from starting to end in relation to delete document using axios package with ECMAScript async and await operators.

We have also created detailed posts on managing HTTP requests using axios in Vue, make sure to check them out:

How to handle HTTP GET request in Vue

How manage POST request in Vue

How to send PUT request in Vue

How to Delete Data using Axios Http Delete Request in Vue 3

• Step 1: Build Vue Application
• Step 2: Install Axios Library
• Step 3: Register Bootstrap
• Step 4: Create Component File
• Step 5: Send Axios Delete Call
• Step 6: Register New Component
• Step 7: Start Development Server

Build Vue Application

Our first task is to install and set up Vue CLI, use the given command to install the Vue CLI.

npm install -g @vue/cli

Once the Vue CLI is ready, invoke the suggested command to install a Vue framework:

vue create vue-demo-app

Select the Vue 3 option from the options list.

cd vue-demo-app

Install Axios Library

Our next task, we have to install the Axios package. You can add the Axios library in your project using given command:

 npm install axios

Register Bootstrap

If you want to use the custom UI component to build the UI then add the given URL 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

We need a file where we can write down the code which will process the HTTP requests, hence create the Home.vue file in the components/ folder.

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

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

Send Axios Delete Call

Update the given code in the components/Home.vue file:

<template>
    <div>
        <h2 class="mb-4">Vue 3 Axios HTTP Delete Request Example</h2>
        <button @click="deleteRecord" class="btn btn-danger">Delte Record</button>
    </div>
</template>
  
<script>
import axios from 'axios';

export default {
    data() {
        return {
        };
    },
    methods: {
        deleteRecord() {
            const resourceUrl = 'https://demo.com/api/user/7';

            axios.delete(resourceUrl)
                .then(res => {
                    console.log('Resource deleted successfully', res);
                })
                .catch(err => {
                    console.error('Error occured: ', err);
                });
        }
    }
};
</script>

Register New Component

We now need to register the newly component, hence import the Home template inside the App.vue file.

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

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

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

Start Development Server

In the final stage we will type and run the command to start the Vue local server.

npm run serve

View your app using the below URL.

http://localhost:8080

Conclusion

In this tutorial we showed you how to bestow Vue’s reactive data handling and component structure along with Axios’s powerful HTTP capabilities to create an intuitive user experience.

By following the above steps, we have easily learned how to easily implement DELETE functionality in Vue js environment.

By properly managing responses and errors, we can also extend the possibilities of dev experience in Vue.

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