vue fetch data code example

Example 1: vue fetch api

async created() {
  // GET request using fetch with async/await
  const response = await fetch("https://api.npms.io/v2/search?q=vue");
  const data = await response.json();
  this.totalVuePackages = data.total;
}

Example 2: 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 3: vue get data from backend

vue get data from backend