Connect Vue to a real API with Axios

Introduction

Your frontend might be the most beautiful interface in the world, but without data, it’s just an empty shell. Connecting to an API is the step that transforms your app from a static demo into a dynamic and functional tool.

For this task, Axios is the gold standard. It’s a promise-based HTTP client, easy to use with clean syntax. Today I’ll guide you step by step so your app can stop showing test data and start consuming real information.

Initial Setup: Installation and Import

npm install axios

Now you can import it in any component where you need to make a request.

GET Requests: Bringing Data to the Table

The most common request is GET, which is used to fetch data from a server. The ideal place to make this call is inside the onMounted hook, since it guarantees the component is ready to display the data.

<template>
  <div v-if="isLoading">Loading posts...</div>
  <div v-if="error">Error: {{ error }}</div>

  <ul v-else-if="posts.length">
    <li v-for="post in posts" :key="post.id">
      <h3 class="font-bold">{{ post.title }}</h3>
      <p>{{ post.body }}</p>
    </li>
  </ul>
  <div v-else>No posts found.</div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';

const posts = ref([]);
const isLoading = ref(true);
const error = ref(null);

onMounted(async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    posts.value = response.data;
  } catch (err) {
    error.value = err.message;
  } finally {
    isLoading.value = false;
  }
});
</script>

Code Explanation:

We use async/await to handle the request cleanly.
With reactive state (ref), we control the UI flow:
- isLoading: Shows a “Loading...” message while the request is in progress.
- error: Displays an error message if the request fails.
- posts: Stores the data and renders it in the UI.
The try...catch...finally block ensures the loading state is always updated.

POST, PUT, and DELETE Requests: Interacting with the API

Axios makes all HTTP requests simple. Examples:

axios.post('/api/posts', newPostData): Create a new resource.
axios.put('/api/posts/1', updatedPostData): Update an existing resource.
axios.delete('/api/posts/1'): Delete a resource.

const createPost = async (newPost) => {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
    console.log('Post created:', response.data);
  } catch (error) {
    console.error('Error creating post:', error);
  }
};

Conclusion

Connecting your frontend to an API is the foundation of any modern application. With Axios, the process becomes so simple that you can focus on what really matters: building the best interface for your users. Leave “lorem ipsum” behind and start working with real data.