Fetching Data

Fetch on mount

A typical beginner pattern:

<script setup>
import { onMounted, ref } from "vue";

const users = ref([]);
const error = ref(null);
const loading = ref(true);

onMounted(async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    if (!response.ok) throw new Error("Request failed");
    users.value = await response.json();
  } catch (err) {
    error.value = err.message;
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <p v-if="loading">Loading…</p>
  <p v-else-if="error">{{ error }}</p>
  <ul v-else>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

Check response.ok

fetch does not throw on HTTP 404/500 by default.

Avoid secret keys in the browser

Anything shipped to Vue runs on the user's machine. Keep secrets on a backend.

Libraries later

Axios or data libraries can help later; start with fetch so the basics stay clear.