Vue + Axios - HTTP GET Request Examples

Vue + Axios - HTTP GET Request Examples

A quick set of examples to show how to send HTTP GET requests from Vue.js to a backend API using axios. This sends an HTTP GET request from Vue to the npm api to search for all vue packages using the query q=vue, then assigns the total returned in the response to the component data property totalVuePackages so it can be displayed in the component template.

Below is a quick set of examples to show how to send HTTP GET 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 GET request using axios

This sends an HTTP GET request from Vue to the npm api to search for all vue packages using the query q=vue, then assigns the total returned in the response to the component data property totalVuePackages so it can be displayed in the component template.

created() {
  // Simple GET request using axios
  axios.get("https://api.npms.io/v2/search?q=vue")
    .then(response => this.totalVuePackages = response.data.total);
}

Example Vue component at https://codesandbox.io/s/vue-axios-http-get-request-examples-ei7l8?file=/app/GetRequest.vue

GET request using axios with async/await

This sends the same GET 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() {
  // GET request using axios with async/await
  const response = await axios.get("https://api.npms.io/v2/search?q=vue");
  this.totalVuePackages = response.data.total;
}

Example Vue component at https://codesandbox.io/s/vue-axios-http-get-request-examples-ei7l8?file=/app/GetRequestAsyncAwait.vue

vue axios vue.js programming

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!