Axios setup and configuration in Vue - Mini Project: Build & Apply

Axios setup and configuration

📖 Scenario: You are building a Vue 3 app that needs to fetch user data from an API. To do this, you will set up Axios, a popular tool for making HTTP requests, and configure it properly.

🎯 Goal: Set up Axios in a Vue 3 project by creating a basic data structure, adding a base URL configuration, making a GET request to fetch user data, and completing the component setup.

📋 What You'll Learn

Create a reactive data variable to hold user data

Add an Axios instance with a base URL configuration

Use Axios to fetch user data from the API endpoint '/users'

Complete the Vue component setup with template and script

💡 Why This Matters

🌍 Real World

Setting up Axios in Vue is common for apps that need to get data from APIs, like user profiles, posts, or products.

💼 Career

Many frontend developer jobs require fetching and displaying data from APIs using Axios and Vue, so this skill is very practical.

1

DATA SETUP: Create reactive user data

In the <script setup> section, import ref from 'vue' and create a reactive variable called users initialized to an empty array [].

Vue

import { ref } from 'vue'

// Create a reactive variable called users initialized to an empty array
// Your code here



  

Need a hint?

Use import { ref } from 'vue' and then const users = ref([]) to create reactive data.

2

CONFIGURATION: Create Axios instance with base URL

Import axios from 'axios' and create a constant called api using axios.create() with the base URL set to 'https://jsonplaceholder.typicode.com'.

Vue

import { ref } from 'vue'
import axios from 'axios'

const users = ref([])

// Create an Axios instance called api with baseURL 'https://jsonplaceholder.typicode.com'
// Your code here



  

Need a hint?

Use axios.create() with an object that has baseURL set to the API URL.

3

CORE LOGIC: Fetch user data with Axios

Use the onMounted lifecycle hook from 'vue' to call api.get('/users') and assign the response data to users.value. Import onMounted from 'vue' as well.

Vue

import { ref, onMounted } from 'vue'
import axios from 'axios'

const users = ref([])
const api = axios.create({ baseURL: 'https://jsonplaceholder.typicode.com' })

// Use onMounted to fetch users from '/users' and assign to users.value
// Your code here



  

Need a hint?

Use onMounted with an async function that awaits api.get('/users') and sets users.value.

4

COMPLETION: Display user names in template

In the <template>, add an unordered list <ul> that uses v-for to loop over users and display each user's name inside a <li>. Use :key="user.id" for each <li>.

Vue

import { ref, onMounted } from 'vue'
import axios from 'axios'

const users = ref([])
const api = axios.create({ baseURL: 'https://jsonplaceholder.typicode.com' })

onMounted(async () => {
  const response = await api.get('/users')
  users.value = response.data
})



  
  

Need a hint?

Use <ul> with v-for="user in users" and :key="user.id" to list user names.