In this episode, we're taking what we've already learned about dynamic routes and fetching data in Nuxt 3, and applying it to our to-do app. We start by hooking up the /todo/:id
page so that when you click on a to-do item, you actually see the details for that specific to-do. We'll use Nuxt's useFetch
(or useAsyncData
) to make an API request for the to-do details, using the ID from the route params.
The main focus of this episode, though, is on the concept of data picking. When we fetch data from an API, often the response gives us way more information than we actually need for our page. Nuxt allows us to extract (or "pick") only the specific pieces of data we want—like id
and title
—instead of keeping the whole payload. This not only cleans up our components but also helps performance, since the page payload size is reduced.
We'll walk through how to set this up in your data-fetching logic, and you'll see the difference it makes right away. We'll also touch on the current limitations: data picking only works for plain objects (not arrays of objects). Still, it's a super helpful best practice to keep your app efficient and tidy!
By the end of the episode, your detail pages will be showing just what you need, and your app will be a bit speedier too.