Use Axios with Vue.js to Fetch Placeholder Users API

Introduction

Vue.js is a versatile framework for building interactive user interfaces, and Axios is a powerful HTTP client for fetching data from APIs. In this blog, we’ll explore how to integrate Axios with Vue.js to fetch user data from a placeholder API and display it dynamically.

Step 1: Create a New Vue.js Project

First, set up a new Vue.js project. You can use Vue CLI or Vite for quick scaffolding.

# Create a Vue project with Vue CLI
vue create vue-axios-example

# Or with Vite
npm create vite@latest vue-axios-example --template vue
cd vue-axios-example
npm install

Step 2: Install Axios

Install Axios, a popular HTTP client for making API requests.

npm install axios

Step 3: Create a New Users.vue Component (Using Options API)

Inside the src/components directory, create a new file named Users.vue.

Code for Users.vue

<template>
  <div class="container mt-5">
    <h1 class="text-center mb-4">Users</h1>
    <div v-if="users.length" class="row">
      <div
        v-for="user in users"
        :key="user.id"
        class="col-md-4 mb-4"
      >
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{{ user.name }}</h5>
            <p class="card-text"><strong>Email:</strong> {{ user.email }}</p>
            <p class="card-text"><strong>Phone:</strong> {{ user.phone }}</p>
            <p class="card-text"><strong>Website:</strong> {{ user.website }}</p>
          </div>
        </div>
      </div>
    </div>
    <p v-else class="text-center text-muted">Loading users...</p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Users",
  data() {
    return {
      users: [],
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get(
          "https://jsonplaceholder.typicode.com/users"
        );
        this.users = response.data;
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    },
  },
  mounted() {
    this.fetchUsers();
  },
};
</script>

Step 4: Add Some Styling to the Project (Using Bootstrap 5)

To style the application, install Bootstrap 5:

npm install bootstrap

Import Bootstrap in main.js:

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";

The Users.vue component uses Bootstrap classes like container, row, col-md-4, card, and text-center for a clean and responsive UI.

Step 5: Fetch Users Using the Placeholder API

The API endpoint used in the Users.vue component is:

https://jsonplaceholder.typicode.com/users

The data fetched from this endpoint includes user details like name, email, phone, and website, which are dynamically rendered in the component.

Step 6: Run the Application

Finally, import the Users.vue component into App.vue to display the user list.

Code for App.vue

<template>
  <div id="app">
    <Users />
  </div>
</template>

<script>
import Users from "./components/Users.vue";

export default {
  name: "App",
  components: {
    Users,
  },
};
</script>

Run the application:

npm run dev

Open your browser and navigate to http://localhost:5173/ (or your specified port) to see the user list displayed.

Conclusion

By following these steps, you’ve learned how to create a Vue.js project, install Axios, fetch data from an API, and style your components using Bootstrap 5. Extend this example by adding features like search, filtering, or pagination to make it more dynamic.

Happy coding! 🚀