Fetching and Displaying Data from APIs in Vue.js with Axios

Fetching and displaying data from external APIs is a common task in modern web development. In Vue.js, you can easily handle API requests and display the results using a library like Axios. Axios is a promise-based HTTP client that works seamlessly with Vue.js for making requests to APIs. This guide will walk you through the process of using Axios in Vue.js to fetch data from an API and display it in your components, step by step.

Step-by-Step Process

1. Setting Up Vue and Axios

Before starting, ensure you have a Vue project set up. If you don't already have one, you can create it using Vue CLI or Vue 3’s Vite.

To install Axios, run the following command in your project directory:

npm install axios

2. Importing Axios in Your Component

Once Axios is installed, import it into your Vue component where you want to fetch the data.

import axios from 'axios';

3. Creating a Method to Fetch Data

In Vue, you can fetch data when the component is created or mounted. In this example, we will use the mounted() lifecycle hook to make the API request when the component is loaded.

Here’s how you can define the method to fetch data and handle the response.

Example:

<template>
  <div>
    <h1>API Data</h1>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-else>Loading data...</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      loading: true,
      error: null
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://api.example.com/items');
        this.items = response.data;
        this.loading = false;
      } catch (error) {
        this.error = 'Failed to fetch data';
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
/* Your component styles */
</style>

4. Handling Loading and Errors

It’s essential to manage the loading state and handle any errors that may occur during the API request. In the above example:

The loading state ensures that a message like “Loading data...” is shown while the data is being fetched.
If the API request fails, the error message will be displayed.

5. Displaying Fetched Data

Once the data is fetched successfully, it’s stored in the items array and displayed in a <ul> element. You can use Vue’s v-for directive to loop through the data and display it in the template.

6. Testing the Application

After setting everything up, run your Vue application using:

npm run serve

Conclusion

In this guide, we've walked through the process of using Axios to fetch and display data from an API in a Vue.js application. Axios makes it easy to send HTTP requests and handle responses, and Vue.js integrates smoothly with it. By using lifecycle hooks like mounted() and managing loading and error states, you can efficiently display API data in your components. This pattern is essential for modern web development, and Axios provides a simple and effective way to handle asynchronous operations in Vue.js.