vue 3 fetch data code example
Example 1: data fetching vue
<template>
<div>
<h1>{{ title }}</h1>
<ul>
<li v-for="user in users" :key="user.id">{{ user.id }}. {{ user.name }} - {{ user.email }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Users',
props: {
title: String
},
data: () => ({
users: []
}),
mounted() {
axios.get('https://jsonplaceholder.typicode.com/users').then((res) => {
this.users = res.data
})
}
}
</script>
<style scoped>
h1 {
color: black;
font-size: 24px;
font-weight: 200;
padding: 0px 10px 0px;
}
ul li {
list-style: none;
color: black;
font-weight: 400;
opacity: 0.8;
font-size: 18px;
}
</style>
Example 2: fetch in vue 3
# http requests using Fetcht api in Vue 3 explained (see videos below)
https://www.youtube.com/watch?v=-Aoyja_BjZY
https://www.youtube.com/watch?v=LvOYCjpMQ10