Data Fetching
Nuxt provides useFetch, useLazyFetch, useAsyncData and useLazyAsyncData to handle data fetching within your application.
useFetch
You can useFetch to universally fetch data from any URL.
Code
/pages/index.vue
<script setup>const { data: posts } = await useFetch('https://api.nuxtjs.dev/posts');</script><template> <div v-for="post in posts" :key="post.id"> <div> {{ post.title }} </div> <div> {{ post.description }} </div> </div></template>Result
Mount Everest
Mount Everest is Earth's highest mountain above sea level, located in the Mahalangur Himal sub-range of the Himalayas. The China–Nepal border runs across its summit point
Mont Blanc
Mont Blanc is the highest mountain in the Alps and the highest in Europe west of the Caucasus peaks of Russia and Georgia. It rises 4,808 m above sea level and is ranked 11th in the world in topographic prominence.
Mount Kilimanjaro
Mount Kilimanjaro is a dormant volcano in Tanzania. It has three volcanic cones: Kibo, Mawenzi and Shira. It is the highest mountain in Africa and the highest single free-standing mountain in the world: 5,895 metres above sea level and about 4,900 metres above its plateau base.
Aconcagua
Aconcagua is a mountain in the Principal Cordillera of the Andes mountain range, in Mendoza Province, Argentina. It is the highest mountain in the Americas and the highest outside of Asia, being the highest in both the Southern and Western Hemispheres with a summit elevation of 6,960.8 metres.
Mount Kosciuszko
Mount Kosciuszko is mainland Australia's highest mountain, at 2,228 metres above sea level. It is located on the Main Range of the Snowy Mountains in Kosciuszko National Park, part of the Australian Alps National Parks and Reserves in New South Wales.
Vinson Massif
Vinson Massif is a large mountain massif in Antarctica that is 21 km long and 13 km wide and lies within the Sentinel Range of the Ellsworth Mountains. It overlooks the Ronne Ice Shelf near the base of the Antarctic Peninsula. The massif is located about 1,200 kilometres from the South Pole.
Denali
Denali is the highest mountain peak in North America, with a summit elevation of 20,310 feet above sea level. With a topographic prominence of 20,156 feet and a topographic isolation of 4,629 miles, Denali is the third most prominent and third most isolated peak on Earth, after Mount Everest and Aconcagua.
useLazyFetch
This behaves identically to useFetch with the lazy: true option set, so the async function does not block navigation.
Code
/pages/index.vue
<template> <div v-if="pending">Loading ...</div> <div v-else v-for="post in posts" :key="post.id"> <div> {{ post.title }} </div> <div> {{ post.description }} </div> </div></template><script setup>const { pending, data: posts } = useLazyFetch('https://api.nuxtjs.dev/posts');watch(posts, (newPosts) => { // Because posts starts out null, you won't have access // to its contents immediately, but you can watch it.});</script>Result
Check out this demo! Notice you see a loading state while the data is being fetched.
useAsyncData
You can use useAsyncData to get access to data that resolves asynchronously. useFetch receives a URL and gets that data, whereas useAsyncData might have more complex logic. useFetch(url) is nearly equivalent to useAsyncData(url, () => $fetch(url))
Code
/server/api/count.ts
let counter = 0;export default defineEventHandler(() => { counter++; return JSON.stringify(counter);});/pages/index.vue
<script setup>const { data } = await useAsyncData('count', () => $fetch('/api/count'));</script><template> <div>Page visits: {{ data }}</div></template>Result
Refresh the page and watch this number increase!
Page visits: 1