Vue + Axios - HTTP POST Request Examples

Vue + Axios - HTTP POST Request Examples

A quick set of examples to show how to send HTTP POST requests from Vue.js to a backend API using axios. This sends an HTTP POST request to the Reqres api which is a fake online REST api that includes a generic /api/<resource> route that responds to POST requests for any <resource> with the contents of the post body and a dynamic id property. This example sends an article object to the /api/articles route and then assigns the id from the response to the vue component data property articleId so it can be displayed in the component template.

Below is a quick set of examples to show how to send HTTP POST requests from Vue to a backend API using the axios HTTP client which is available on npm.

Other HTTP examples available:

Installing axios from npm

With the npm CLI: npm install axios

With the yarn CLI: yarn add axios

Simple POST request with a JSON body using axios

This sends an HTTP POST request to the Reqres api which is a fake online REST api that includes a generic /api/<resource> route that responds to POST requests for any <resource> with the contents of the post body and a dynamic id property. This example sends an article object to the /api/articles route and then assigns the id from the response to the vue component data property articleId so it can be displayed in the component template.

created() {
  // Simple POST request with a JSON body using axios
  const article = { title: "Vue POST Request Example" };
  axios.post("https://reqres.in/api/articles", article)
    .then(response => this.articleId = response.data.id);
}

Example Vue component at https://codesandbox.io/s/vue-axios-http-post-request-examples-ecqqn?file=/app/PostRequest.vue

POST request using axios with async/await

This sends the same POST request from Vue using axios, but this version uses an async function and the await javascript expression to wait for the promises to return (instead of using the promise then() method as above).

async created() {
  // POST request using axios with async/await
  const article = { title: "Vue POST Request Example" };
  const response = await axios.post("https://reqres.in/api/articles", article);
  this.articleId = response.data.id;
}

Example Vue component at https://codesandbox.io/s/vue-axios-http-post-request-examples-ecqqn?file=/app/PostRequestAsyncAwait.vue

vue axios programming vue.js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue js Axios Tutorial

Vue js Axios Tutorial. We will see Vue axios post request, Vue js headers and Vue js get request. We will use Node.js as backend platform.

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Why Vue CLI? - Vue.js

In this article, I'll show you the reasons behind Vue CLI's creation and take you on a journey through its evolution. This will help you not only appreciate it more but also have a deeper understanding of its possibilities. If you're new to the Vue ecosystem and frontend development you may not have an appreciation yet for how much power a tool like Vue CLI provides.

Simple shopping cart with Vue.js and Deno.js

Simple shopping cart with Vue.js and Deno.js.

Easily switch to Composition API in Vue.js 3

A step by step guide on how to migrate a Vue.js component from the traditional Object API to the modern Composition API, easy and in a cheatsheet format. The idea is to give you some tips related to new features you can find on Vue.js 3 as they get available. For now, we'll focus on Composition API, one of the most game-changing features!