This episode is for members only
Sign up to access "Getting Started with Nuxt 3" right now.
Get started
Already a member? Sign in to continue
Episodes
01. Introduction
46s
0%
02. Installing Nuxt
5m 40s
0%
03. Creating pages
4m 50s
0%
04. Linking to pages
4m 25s
0%
05. Pages with params
5m 59s
0%
06. Using layouts
4m 22s
0%
07. Components
4m 47s
0%
08. Simple CSS and Sass
3m 53s
0%
09. Fetching data
5m 58s
0%
10. Deferred fetching
5m 14s
0%
11. Picking data
4m 14s
0%
12. Fetching within components
1m 52s
0%
13. Client-side fetching
3m 15s
0%
14. Managing head data
3m 19s
0%
15. Dynamic head data
3m 11s
0%
16. Composables
5m 28s
0%
17. Public files
2m 16s
0%
18. Server API
6m 4s
0%
Transcript
00:00
As well as using useFetch in our pages, we can also use these in our components. Let's take a look at an example. Now in the navigation, we might wanna make a request
00:10
to list how many to-dos we have overall. This isn't the greatest way to set this up, but it's gonna give you an example of how you use this component level.
00:21
So normally we would use state management for this, but let's go ahead and use our script to just make a request to the same endpoint and then use JavaScript's length property
00:32
to grab back how many to-dos we have. So inside of here, we can do exactly the same thing. Let's go ahead and define this out and we'll await useUseFetch,
00:42
which we can use in our components. And let's go ahead and grab the URL for this. We'll make a request to this and then we'll go ahead and extract that data out
00:52
and just call that to-dos in here. So now that is technically making another request, but within this nav component. The same thing applies.
01:02
We can defer this if we want to. So you could use defer true if you needed to. Probably a good idea at component level if you were doing this.
01:10
So now what we can do is on to-dos, simply output the count. So we can say to-dos length, and let's check it out.
01:19
Give that a refresh and there we go. We have 200 to-dos on here and that's always visible at that component level. Like I said, if you wanted to,
01:27
you could go ahead and add a defer on that. Let's do that now. And let's come over and check out the difference. You can see that it doesn't look too much different.
01:34
We just have a period of time where this isn't quite available. That's absolutely fine. So that is pretty much how we would use this
01:42
at a component level. We can use useFetch for this really nicely within any of our components and make a request in exactly the same way.
18 episodes•1 hr 15 mins•2 years ago
Overview
Nuxt is a framework built on Vue that makes development of applications a breeze. In this series, we'll get set up with a fresh project and work through everything you need to know to start building with Nuxt.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.