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



  

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



  

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



  

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



  
  

Hint

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

Practice

1. What is the main purpose of making a GET request inside a Vue component?

easy

A. To delete data on the server

B. To send data from the component to the server

C. To fetch data from a server to display in the component

D. To update the component's local state without server interaction

Solution

1. Step 1: Understand GET request purpose

   A GET request is used to retrieve or fetch data from a server.

2. Step 2: Relate to Vue component usage

   In Vue components, GET requests are used to get data to show in the UI.

3. Final Answer:

   To fetch data from a server to display in the component -> Option C

4. Quick Check:

   GET request = fetch data [OK]

Hint: GET requests retrieve data to show in components [OK]

Common Mistakes:

• Confusing GET with POST (sending data)
• Thinking GET updates local state only
• Mixing GET with delete operations

2. Which of the following is the correct way to import and use the lifecycle hook to run code after a Vue component mounts for a GET request?

easy

A. import { mounted } from 'vue'; mounted(() => { /* fetch code */ });

B. import { onLoad } from 'vue'; onLoad(() => { /* fetch code */ });

C. import { useMounted } from 'vue'; useMounted(() => { /* fetch code */ });

D. import { onMounted } from 'vue'; onMounted(() => { /* fetch code */ });

Solution

1. Step 1: Identify correct lifecycle hook name

   The correct Vue 3 lifecycle hook to run code after component mounts is onMounted.

2. Step 2: Confirm import and usage syntax

   You import it from 'vue' and call it with a function: onMounted(() => { ... }).

3. Final Answer:

   import { onMounted } from 'vue'; onMounted(() => { /* fetch code */ }); -> Option D

4. Quick Check:

   Use onMounted for post-mount code [OK]

Hint: Use onMounted from 'vue' to run code after mount [OK]

Common Mistakes:

• Using wrong hook names like mounted or onLoad
• Forgetting to import onMounted
• Calling lifecycle hooks incorrectly

3. Given this Vue <script setup> snippet, what will be logged to the console after the component mounts?

import { onMounted } from 'vue';

onMounted(async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data.message);
});

Assuming the server responds with { "message": "Hello Vue" }.

medium

A. undefined

B. "Hello Vue"

C. SyntaxError

D. An empty object {}

Solution

1. Step 1: Understand fetch and JSON parsing

   The fetch call gets the response, and response.json() parses it into an object.

2. Step 2: Access the message property

   The parsed object has a message key with value "Hello Vue", so console.log(data.message) prints "Hello Vue".

3. Final Answer:

   "Hello Vue" -> Option B

4. Quick Check:

   Fetch JSON message logs "Hello Vue" [OK]

Hint: Fetch + json() returns object; access keys to log values [OK]

Common Mistakes:

• Forgetting to await response.json()
• Logging response instead of parsed data
• Expecting syntax errors from correct async code

4. What is wrong with this Vue <script setup> code that tries to fetch data on mount?

import { onMounted } from 'vue';

onMounted(() => {
  const response = fetch('https://api.example.com/data');
  const data = response.json();
  console.log(data);
});

medium

A. Missing async/await causing response and data to be Promises

B. Using onMounted instead of created hook

C. fetch URL is invalid syntax

D. console.log should be inside a separate function

Solution

1. Step 1: Identify async usage problem

   fetch returns a Promise, so response is a Promise, not the actual response.

2. Step 2: Explain consequence of missing await

   Calling response.json() on a Promise causes data to be a Promise too, so logging it shows a Promise object, not data.

3. Final Answer:

   Missing async/await causing response and data to be Promises -> Option A

4. Quick Check:

   Always await fetch and json() [OK]

Hint: Always use async/await with fetch to get real data [OK]

Common Mistakes:

• Not marking onMounted callback async
• Not awaiting fetch and json() calls
• Expecting immediate data without Promises

5. You want to fetch user data from an API and show a loading message while waiting. Which Vue <script setup> code correctly handles loading, success, and error states for a GET request?

hard

A. import { ref, onMounted } from 'vue';
const user = ref(null);
const loading = ref(true);
const error = ref(null);
onMounted(async () => {
try {
const res = await fetch('https://api.example.com/user');
if (!res.ok) throw new Error('Fetch failed');
user.value = await res.json();
} catch (e) {
error.value = e.message;
} finally {
loading.value = false;
}
});

B. import { ref, onMounted } from 'vue';
const user = ref(null);
const loading = false;
const error = null;
onMounted(() => {
fetch('https://api.example.com/user')
.then(res => res.json())
.then(data => user.value = data)
.catch(e => error = e.message);
loading = false;
});

C. import { reactive, onMounted } from 'vue';
const state = reactive({ user: null, loading: false, error: null });
onMounted(async () => {
const res = await fetch('https://api.example.com/user');
state.user = await res.json();
state.loading = false;
});

D. import { ref, onMounted } from 'vue';
const user = ref(null);
const loading = ref(false);
const error = ref(null);
onMounted(async () => {
loading.value = true;
const res = await fetch('https://api.example.com/user');
user.value = await res.json();
loading.value = false;
});

Solution

1. Step 1: Check reactive state setup

   import { ref, onMounted } from 'vue'; const user = ref(null); const loading = ref(true); const error = ref(null); onMounted(async () => { try { const res = await fetch('https://api.example.com/user'); if (!res.ok) throw new Error('Fetch failed'); user.value = await res.json(); } catch (e) { error.value = e.message; } finally { loading.value = false; } }); uses ref for user, loading, and error, properly reactive for Vue.

2. Step 2: Verify async fetch with error handling

   import { ref, onMounted } from 'vue'; const user = ref(null); const loading = ref(true); const error = ref(null); onMounted(async () => { try { const res = await fetch('https://api.example.com/user'); if (!res.ok) throw new Error('Fetch failed'); user.value = await res.json(); } catch (e) { error.value = e.message; } finally { loading.value = false; } }); uses async/await with try/catch/finally to handle success, errors, and loading state correctly.

3. Final Answer:

   Option A correctly manages loading, success, and error states with reactive refs and proper async handling. -> Option A

4. Quick Check:

   Use refs + async try/catch/finally for GET with states [OK]

Hint: Use refs and try/catch/finally for loading and error states [OK]

Common Mistakes:

• Not using reactive refs for loading and error
• Setting loading false too early or outside async flow
• Ignoring error handling in fetch