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



  

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



  

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



  

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
})



  
  

Hint

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

Practice

1. What is the main purpose of using axios.create() in a Vue project?

easy

A. To convert Axios requests into Vue components

B. To automatically fetch data when the component mounts

C. To create a reusable Axios client with custom settings

D. To replace Vue's reactive system with Axios

Solution

1. Step 1: Understand axios.create()

   This method creates a new Axios instance that can have its own configuration like baseURL, headers, and timeout.

2. Step 2: Purpose in Vue projects

   Using axios.create() helps keep your API calls consistent and reusable across components by sharing the same settings.

3. Final Answer:

   To create a reusable Axios client with custom settings -> Option C

4. Quick Check:

   axios.create() = reusable client [OK]

Hint: Remember axios.create() makes a custom client [OK]

Common Mistakes:

• Thinking axios.create() fetches data automatically
• Confusing axios.create() with Vue lifecycle hooks
• Assuming axios.create() changes Vue's reactivity

2. Which of the following is the correct way to set a base URL when creating an Axios instance?

easy

A. const api = axios.create('https://api.example.com')

B. const api = axios.create(baseURL = 'https://api.example.com')

C. const api = axios.create({ url: 'https://api.example.com' })

D. const api = axios.create({ baseURL: 'https://api.example.com' })

Solution

1. Step 1: Check axios.create() syntax

   axios.create() accepts an object with configuration keys like baseURL, timeout, and headers.

2. Step 2: Identify correct baseURL usage

   The correct key for setting the base URL is baseURL inside the config object.

3. Final Answer:

   const api = axios.create({ baseURL: 'https://api.example.com' }) -> Option D

4. Quick Check:

   baseURL inside object = const api = axios.create({ baseURL: 'https://api.example.com' }) [OK]

Hint: Use an object with baseURL key inside axios.create() [OK]

Common Mistakes:

• Passing baseURL as a separate argument
• Using url instead of baseURL
• Passing a string directly without an object

3. Given this Axios instance setup in a Vue component:

const api = axios.create({ baseURL: 'https://api.example.com', timeout: 1000 });

api.get('/users')
  .then(response => console.log(response.data))
  .catch(error => console.log('Error:', error.message));

What will happen if the server takes 2 seconds to respond?

medium

A. The request will timeout and log an error message

B. The request will succeed and log the user data

C. The request will retry automatically until success

D. The request will hang indefinitely without error

Solution

1. Step 1: Understand timeout setting

   The timeout is set to 1000 milliseconds (1 second), so if the server takes longer, Axios will abort the request.

2. Step 2: Effect on slow response

   Since the server takes 2 seconds, which is longer than 1 second, Axios triggers a timeout error and the catch block runs.

3. Final Answer:

   The request will timeout and log an error message -> Option A

4. Quick Check:

   Timeout 1s > 2s response = error [OK]

Hint: Timeout shorter than response time causes error [OK]

Common Mistakes:

• Assuming Axios retries automatically
• Thinking the request will succeed despite timeout
• Ignoring the catch block handling

4. Identify the error in this Axios setup code inside a Vue component:

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: '5000',
  headers: { 'Content-Type': 'application/json' }
});

medium

A. timeout should be a number, not a string

B. baseURL must be inside headers object

C. Content-Type header is invalid here

D. axios.create() cannot have headers property

Solution

1. Step 1: Check timeout data type

   Timeout expects a number representing milliseconds, but here it is a string '5000'.

2. Step 2: Validate other properties

   baseURL is correctly placed, and headers with Content-Type is valid for axios.create().

3. Final Answer:

   timeout should be a number, not a string -> Option A

4. Quick Check:

   timeout must be number, not string [OK]

Hint: Timeout must be numeric, not quoted string [OK]

Common Mistakes:

• Putting baseURL inside headers
• Removing headers property
• Using string for timeout value

5. You want to create an Axios instance in Vue that automatically adds an Authorization header with a token stored in localStorage for every request. Which setup is correct?

hard

A. const api = axios.create({ baseURL: 'https://api.example.com' }); api.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('token')}`;

B. const api = axios.create({ baseURL: 'https://api.example.com' }); api.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; return config; });

C. const api = axios.create({ baseURL: 'https://api.example.com', headers: { Authorization: `Bearer ${localStorage.getItem('token')}` } });

D. const api = axios.create({ baseURL: 'https://api.example.com', headers: { Authorization: localStorage.token } });

Solution

1. Step 1: Understand token dynamic retrieval

   The token in localStorage can change, so it should be read fresh before each request, not just once at setup.

2. Step 2: Use Axios interceptor for dynamic headers

   Using an interceptor lets you add or update headers before every request, ensuring the latest token is used.

3. Step 3: Evaluate options

   const api = axios.create({ baseURL: 'https://api.example.com' }); api.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; return config; }); uses an interceptor to set Authorization header dynamically. Options A and C set it once at creation, which may become stale. const api = axios.create({ baseURL: 'https://api.example.com', headers: { Authorization: localStorage.token } }); uses incorrect localStorage access.

4. Final Answer:

   Use an interceptor to add Authorization header dynamically before each request -> Option B

5. Quick Check:

   Interceptor for dynamic token = const api = axios.create({ baseURL: 'https://api.example.com' }); api.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; return config; }); [OK]

Hint: Use request interceptor to add fresh token each time [OK]

Common Mistakes:

• Setting headers once at creation, ignoring token updates
• Accessing localStorage.token instead of getItem()
• Not returning config in interceptor