GET requests in components in Vue - Mini Project: Build & Apply

GET requests in components

📖 Scenario: You are building a simple Vue 3 app that shows a list of users fetched from a public API. This app will help you learn how to make GET requests inside Vue components using the Composition API.

🎯 Goal: Create a Vue component that fetches user data from https://jsonplaceholder.typicode.com/users when the component loads, and displays the users' names in a list.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive variable to store the users

Make a GET request to https://jsonplaceholder.typicode.com/users inside onMounted

Display the users' names in an unordered list

Handle the fetch asynchronously with async/await

💡 Why This Matters

🌍 Real World

Fetching data from APIs is a common task in web apps to show dynamic content like user lists, posts, or products.

💼 Career

Understanding how to make GET requests and display data in Vue components is essential for frontend developer roles working with modern web frameworks.

1

Setup the users data variable

Create a Vue 3 component with <script setup> and import ref from vue. Then 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 ref([]) to create a reactive array for users.

2

Add the API URL configuration

Add a constant called apiUrl and set it to the string 'https://jsonplaceholder.typicode.com/users' inside the <script setup>.

Vue

import { ref } from 'vue'

const users = ref([])

// Add a constant apiUrl with the API endpoint string
// Your code here



  

Need a hint?

Use const apiUrl = 'https://jsonplaceholder.typicode.com/users'.

3

Fetch users data on component mount

Import onMounted from vue. Inside <script setup>, use onMounted to run an async function that fetches data from apiUrl, converts the response to JSON, and assigns it to users.value.

Vue

import { ref, onMounted } from 'vue'

const users = ref([])
const apiUrl = 'https://jsonplaceholder.typicode.com/users'

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



  

Need a hint?

Use onMounted(async () => { ... }) and await fetch(apiUrl).

4

Display the users in the template

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

Vue

import { ref, onMounted } from 'vue'

const users = ref([])
const apiUrl = 'https://jsonplaceholder.typicode.com/users'

onMounted(async () => {
  const response = await fetch(apiUrl)
  const data = await response.json()
  users.value = data
})



  
  

Need a hint?

Use <li v-for="user in users" :key="user.id">{{ user.name }}</li> inside a <ul>.