Hello, and welcome to our course on data fetching in Nuxt 3. I'm very excited to guide you through the powerful data fetching capabilities that Nuxt has to offer. Whether you're building a small personal project or large scale enterprise applications, understanding how to efficiently fetch and manage data in Nuxt will be crucial when developing your app. But before we dive into the specifics of Nuxt 3, Let's briefly discuss why data fetching is so important for modern web development.
Well, number one is dynamic content. Most websites these days need to display up-to-date information from a server or an external API, or they simply need a way for non-technical users to manage the data that gets on the site. For example, this online coffee service called La Cologne I assume that's how you pronounce it, has a bunch of different coffee products in their store. I guarantee you each individual one of these products is not a hard-coded HTML file.
Instead, it's a single HTML template in which dynamic data is being inserted at the proper locations. For instance, the name of the product, the description of the product, the cost, and so on. So most websites... do their content like this with dynamic data.
Also, a lot of websites need to fetch data based on some user interaction. Back in the coffee shop, if I go to search through the different coffees, you'll notice that there is no page reload. It just in the background fetches that data from an API endpoint and then displays it in the page. Such background data fetching makes for an improved user experience.
But we also need to ensure those requests remain fast so that we can have more responsive applications and that user experience is further preserved. Fetching dynamic data with Nuxt is able to check all of these boxes. So without further ado, let me introduce you to the three main tools you'll use for data fetching in Nuxt. Number one is useFetch.
This is a composable that fetches data from an API endpoint while also deduplicating fetch requests from server to client. You'll see more about what that means in just a moment. Number two is use async data. This is a more flexible composable for requests that are abstracted away behind a client library.
Plus it has some other interesting use cases. And lastly, there's dollar sign fetch. This is another globally available function for making HTTP requests, but typically in response to user interactions. Each of these tools has its strengths and its use cases, and we'll explore them all thoroughly in depth throughout the rest of this course.
Alright, before we conclude the video, let's take a look at a practical example of UseFetch. I've created a brand new Nuxt application off the camera with npx-nuxt-init. And then I've added some simple code here. In the script setup section, we call the useFetchComposable and pass it the URL that we want to make the request to.
Over my browser, you can see what this URL returns. It's JSON data that describes a bunch of Pokemon. So it has their names, their types, an image for them, so on and so forth. Back in the code, we await...
for useFetch to finish. That means useFetch returns a promise. This ensures that the data is loaded before the component is rendered. And then we destructure the data from the return of useFetch.
There's also a number of other handy things that we can get out of useFetch as well, such as an error or the ability to rerun the request. But for now, we're just taking a look at the data that is returned that we renamed to Pokemons. Then down inside of the template section, we loop over all the Pokemon inside of Pokemon's array, and we simply print it to the page. Back over in the browser, this is the result.
This simple example demonstrates how easy it is to fetch data and display it with Nuxt 3's useFetch function. In the next lesson, let's break down the difference between these three tools, useFetch, useAsyncData, and $fetch.