Тёмный

Data Fetching With Nuxt 3 

John Komarnicki
Подписаться 21 тыс.
Просмотров 26 тыс.
50% 1

📕 Nuxt 3 Course: www.learnnuxt.dev/
🤖 WebDevDaily: www.webdevdaily.io
📕 Vue 3 Crash Course: johnkomarnicki.gumroad.com/l/...
🚀 Join the channel : / @johnkomarnicki
🤖 Website: johnkomarnicki.com/
🐦 Twitter: / john_komarnicki
Learn about the basics of data fetching in nuxt 3. In this video we cover the two composables ( useFetch() & useAsyncData() ) used to fetch data within Nuxt 3.
Data Fetching Docs: nuxt.com/docs/getting-started...
#vue #vue3 #nuxt3 #nuxt

Наука

Опубликовано:

 

26 окт 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 56   
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
* One mistake i made is explaining lazy:false removes the default loading behavior🤦.It should actually be set to lazy:true if you want to handle your own custom loading state as we are doing throughout this video Thanks @Thr0nSK for pointing this out!
@inamurrehman343
@inamurrehman343 5 месяцев назад
Yeah I am just writing this in comment, then found your comment 😊
@iUmerFarooq
@iUmerFarooq 7 месяцев назад
That's why I love Nuxt 3. Want to see more content on Nuxt 3. Like designing a proper application with backend. If possible do proper CRUD in Nuxt 3. Thank you
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
Yeah, i'm working on a crash course that will also be apart of the Nuxt 3 course coming out early next year which will feature a full-stack application
@AngelHdzMultimedia
@AngelHdzMultimedia 7 месяцев назад
From the docs: For finer control, the variable can be: - idle when the fetch hasn't started - pending when a fetch has started but not yet completed - error when the fetch fails - success when the fetch is completed successfully 🔥👏 Nice content mate! I'm sub. Keep up the good work.
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
Yep, you can also do this as well! 🤙 As I mentioned, only covered some of the more common use cases, but this is definitely something some could take advantage of!
@kalpaonline
@kalpaonline 2 месяца назад
Best series ever. I actually had hard time finding this kind of video. Keep it up ❤
@mabdurrafeyahmed9256
@mabdurrafeyahmed9256 7 месяцев назад
Was very confused with all fetching thing but your video made paved the way. 🎉
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
I’m glad to hear!
@corneromme
@corneromme 3 месяца назад
I love Nuxt! More Nuxt content please 😊
@danmcdade2503
@danmcdade2503 24 дня назад
This is a really great overview thanks for putting this together
@True_to_Word
@True_to_Word 7 месяцев назад
Thanks for this explanation! Best I've seen so far from the confusing area of Nuxt :)
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
I’m glad you found it helpful!
@nickhanigan4041
@nickhanigan4041 7 месяцев назад
Awesome style of teaching the intricacies. No doubt the docs say it all but talking through with demonstration to the rationales really helped. Thanks!
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
I appreciate that, glad to hear this was helpful!
@RocoSafreti
@RocoSafreti 5 месяцев назад
What a great video. Many thanks.
@AliAliAli9Ali
@AliAliAli9Ali 7 месяцев назад
Thanks for the video & the effort,
@matanon8454
@matanon8454 7 месяцев назад
Thanks for your content, its helping me so much ❤
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
Happy to help!
@AlFarooqSoftinnMultan
@AlFarooqSoftinnMultan 4 месяца назад
sir thnx a lot, very nicely explained, i m new to nuxt
@user-ft5mf3yc5i
@user-ft5mf3yc5i 5 месяцев назад
Great explaination love your video! please aslo do state management on nuxt component.
@sujithrb
@sujithrb 7 месяцев назад
Great video. Would you be able to add details on how certain fields should refetch data based on those fields?
@hellicatfilm1439
@hellicatfilm1439 6 месяцев назад
I'm not good at English, but I still understand what you're saying. Good lecture!
@prashlovessamosa
@prashlovessamosa 7 месяцев назад
Last night I got disappointed with next js update its time to learn nuxt again.
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
The Vue ecosystem is just far better for developer experience in my opinion
@AIZEN155
@AIZEN155 7 месяцев назад
Why??
@AngelHdzMultimedia
@AngelHdzMultimedia 7 месяцев назад
You aren't going to regret embracing Nuxt/Vue ecosystem. Is so consistent, elegant, fast, solid, very UX, always taking community requested features into consideration and implementing them fast, check out what powers Nuxt, the unjs ecosystem. And the devtools? Chef kiss. 🔥💚
@matanon8454
@matanon8454 7 месяцев назад
Tried Nextjs, Remix, Sveltekit and even tried Astro for full stack development. Vuejs with Nuxt is the best overall in terms of ecosystem and DX
@Me-vc4sf
@Me-vc4sf 20 дней назад
​@@AIZEN155why not
@LarsvandeDonk
@LarsvandeDonk 5 месяцев назад
Great video! I am still wondering what the best setup is using Pinia
@christopher5731
@christopher5731 4 месяца назад
Very nice video
@pavankoshti9795
@pavankoshti9795 7 месяцев назад
Nice 👍🏻
@Thr0nSK
@Thr0nSK 7 месяцев назад
The lazy: false is actually wrong. You should be using lazy: true. You said that the useLazyFetch is equivalent to useFetch with lazy set to false - but it’s the exact oposite. False is actually the default value for useFetch… The reason why you page didn’t wait for the promise to resolve is that you removed the await keyword.
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
Good catch. Yes I definitely mixed up the what the default value was lol. Thanks for pointing this out.
@smartvideos2709
@smartvideos2709 7 месяцев назад
Although John did mix up the lazy property values, it does not seem to make a difference actually. I played around with this and regardless of lazy: false or lazy: true, if you remove await and use pending to show a loading state then once that is done it show the data it works the same. 🤷
@Thr0nSK
@Thr0nSK 7 месяцев назад
@@smartvideos2709 Yeah, it's a bit confusing.
@daniilthegunner843
@daniilthegunner843 7 месяцев назад
Could you show an example of useFetch wrapper where token from localstorage is set already, 401 error handled with refreshToken
@nyambe
@nyambe 7 месяцев назад
What about doing the fetching and handling in a composable? Is that recommended? I like to keep my page code clean. Also should we using he serve api to do the external fetch?
@zuko655
@zuko655 6 месяцев назад
still haven't found the optimal solution for a "Load more" button (without using a third variable, because you need to concat previous results with new results)
@psykhout
@psykhout 5 часов назад
I have a question if we use pick on our call function is that essentially what Graphql tries to implement?
@user-re8lt2gy3g
@user-re8lt2gy3g 7 месяцев назад
When to use optimistic updates vs mutating the data directly in the server ?
@BMikel
@BMikel 4 месяца назад
Hey. How can I get filtered products from fakestore api? For example, I want to get products only from two categories. Should I use useFetch with query parms?
@MegaEduardoRomeroYoutube
@MegaEduardoRomeroYoutube 3 месяца назад
What is the difference between using the buil-in function "usefetch" and using useQuery from tanstack vue-query?
@randomtimessomehow
@randomtimessomehow 4 месяца назад
You showed that it blocks the navigation when fetching data (which is exactly what I want), however, I'm using composables. So for example, lets say I have a list of to dos, which are being fetched within a composable. It fetches the data through the supabase nuxt module. In my page/component I want to do this: const { toDos } = useTodos() which works fine. But how do I achieve that the page load should get blocked since fetching data is being handled within the composable?
@JohnKomarnicki
@JohnKomarnicki 4 месяца назад
If you’re using a composbale you should still be able to wrap it in useAsyncData I’m pretty certain
@randomtimessomehow
@randomtimessomehow 4 месяца назад
So within my pages/index.vue I would do something like const { data } = await useAsyncData('toDos', () => { const { toDos } = useTodos() return toDos }) ? @@JohnKomarnicki
@kert1464
@kert1464 6 месяцев назад
I get an error saying "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')" when I try clicking nuxt link multiple times, I have top level await to the page I want to go to and set lazy to false in useFetch.
@user-bj5ft4pu5i
@user-bj5ft4pu5i 7 месяцев назад
useFetch doesn't work on server in my project! It works only when I make routing but if I reload page smth went wrong. I can't solve this problem in nuxt 3. :(
@fadl285
@fadl285 7 месяцев назад
Thanks for the video. I have some questions, and I hope to create a video to explain them. __ 1. When using lazy fetching If I want to display a skeleton instead? Can I create productsList and handle this with suspense or what is the best practice for this. 2. What if I want to add Authorization header for every request to check if the user login. What is the best way, and is there a way to create instance with interceptors for them ($fetch, useFetch,...) 3. What is the best way to store the access token, and how to handle refresh token? Please create video for authentication in nuxt and explain this.
@alimaher1
@alimaher1 4 месяца назад
I'm trying to use NuxtLoadingIndicator the same way but it seems not working?
@JohnKomarnicki
@JohnKomarnicki 3 месяца назад
I’ve noticed an issue with this in the latest version myself.
@virtuoz-ru
@virtuoz-ru 7 месяцев назад
Thanks for the great video! 👍
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
I appreciate it! (Was a bit frustrated that I mixed up the lazy loading default value property 🤦 Hopefully it was still helpful!)
@adiprimanto8871
@adiprimanto8871 7 месяцев назад
how to post delete put method?
@JohnKomarnicki
@JohnKomarnicki 7 месяцев назад
This section of the docs should explain that! nuxt.com/docs/api/utils/dollarfetch
Далее
Getting Started With Nuxt UI
27:13
Просмотров 12 тыс.
You are using useFetch WRONG! (I hope you don't)
11:14
NAYEON "ABCD" M/V
03:42
Просмотров 20 млн
Qarindoshga uylansang😂😂
01:01
Просмотров 833 тыс.
Vue.js: SSR с помощью Nuxt.js | Meta/conf
47:05
Easily Add Authentication With Nuxt 3 + Supabase
14:23
The Nuxt big thing in web development?
4:55
Просмотров 652 тыс.
I've been using Redis wrong this whole time...
20:53
Просмотров 330 тыс.
JavaScript Framework Tier List
40:57
Просмотров 294 тыс.
why im NOT hyped for nuxt 4
4:00
Просмотров 14 тыс.
Fetching Data in React - Complete Tutorial
29:10
Просмотров 87 тыс.
The Nuxt 3 Crash Course
3:45:00
Просмотров 94 тыс.
#miniphone
0:16
Просмотров 3 млн
Bluetooth Desert Eagle
0:27
Просмотров 7 млн
wireless switch without wires part 6
0:49
Просмотров 3,7 млн