Why API integration matters in Vue - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do we use APIs in Vue applications?

Imagine you want your Vue app to show weather data from an online service. Why is using an API important here?

A APIs are only used to style the app with colors and fonts.

B APIs let your app get fresh data from other services without storing it all inside the app.

C APIs make your app run faster by skipping all network requests.

D APIs replace Vue components with pre-built templates.

💡 Hint

Think about how your app can show new information without updating the app itself.

APIs allow Vue apps to fetch and show live data from other services, keeping the app lightweight and dynamic.

❓ component_behavior

intermediate

What happens when a Vue component fetches API data?

Look at this Vue component snippet that fetches user info from an API. What will the component show after the data loads?

Vue

<script setup>
import { ref, onMounted } from 'vue'
const user = ref(null)
onMounted(async () => {
  const res = await fetch('https://api.example.com/user/1')
  user.value = await res.json()
})
</script>
<template>
  <div>
    <p v-if="user">Name: {{ user.name }}</p>
    <p v-else>Loading...</p>
  </div>
</template>

A It shows nothing because user is null and no fallback is provided.

B It shows 'Name: null' immediately and never changes.

C It shows an error because fetch is not allowed in Vue components.

D It first shows 'Loading...' then updates to 'Name: [user's name]' after data loads.

💡 Hint

Think about what happens before and after the API call finishes.

The component starts with user as null, so it shows 'Loading...'. After the API call completes, user is set and the name displays.

📝 Syntax

advanced

Which option correctly handles API errors in Vue?

Choose the code snippet that properly catches errors when fetching API data inside a Vue component.

Vue

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
const error = ref(null)
onMounted(async () => {
  try {
    const res = await fetch('https://api.example.com/data')
    if (!res.ok) throw new Error('Network error')
    data.value = await res.json()
  } catch (e) {
    error.value = e.message
  }
})
</script>
<template>
  <div>
    <p v-if="error">Error: {{ error }}</p>
    <p v-else-if="data">Data loaded</p>
    <p v-else>Loading...</p>
  </div>
</template>

A

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

B

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
const error = ref(null)
onMounted(async () => {
  const res = await fetch('https://api.example.com/data')
  data.value = await res.json()
})
</script>

C

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
const error = ref(null)
onMounted(async () => {
  try {
    const res = await fetch('https://api.example.com/data')
    if (!res.ok) throw new Error('Network error')
    data.value = await res.json()
  } catch (e) {
    error.value = e.message
  }
})
</script>

D

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
const error = ref(null)
onMounted(async () => {
  try {
    const res = await fetch('https://api.example.com/data')
    data.value = await res.json()
  } catch {
    error.value = 'Failed to load'
  }
})
</script>

💡 Hint

Look for code that checks the HTTP response status and catches errors properly.

Option C checks if the response is OK before parsing JSON and catches errors with a try-catch block, providing clear error handling.

❓ state_output

advanced

What is the final state of 'items' after this API call in Vue?

Consider this Vue code fetching a list of items and filtering them. What will be the value of items.value after the API call?

Vue

<script setup>
import { ref, onMounted } from 'vue'
const items = ref([])
onMounted(async () => {
  const res = await fetch('https://api.example.com/items')
  const data = await res.json()
  items.value = data.filter(item => item.active)
})
</script>

A [{id: 1, active: true}, {id: 3, active: true}] (only active items from API data)

B [] (empty array because filter is not applied correctly)

C [{id: 1, active: true}, {id: 2, active: false}, {id: 3, active: true}] (all items from API)

D null (items is never assigned)

💡 Hint

Think about what filter does to the array.

The filter keeps only items where active is true, so items.value contains only those.

🔧 Debug

expert

Why does this Vue API fetch cause a runtime error?

Examine this Vue code snippet. It tries to fetch user data but crashes with 'TypeError: Cannot read property 'name' of null'. Why?

Vue

<script setup>
import { ref, onMounted } from 'vue'
const user = ref(null)
onMounted(async () => {
  const res = await fetch('https://api.example.com/user/1')
  user.value = await res.json()
})
</script>
<template>
  <div>
    <p v-if="user">Name: {{ user.name }}</p>
  </div>
</template>

A The template tries to access 'user.name' before 'user' is set, causing an error because 'user' is initially null.

B The fetch URL is incorrect, so the API returns an error causing the crash.

C The 'ref' is not imported properly, so 'user' is undefined.

D The 'onMounted' hook is not supported in Vue 3, causing the code to fail.

💡 Hint

Check what happens before the API call finishes and how the template uses 'user'.

The template tries to read 'user.name' immediately, but 'user' starts as null. Accessing 'name' on null causes the TypeError.