5 Ways to Fetch Data from an API in Vue 3 Composition API

There are many ways to extract data in Vue, so today, we'll look at 5 ways you can fetch data in your application. We will also look at the new Vue 3 suspense API which tackles this problem differently and create our own composable function to maximize reusability.

✨ SOCIAL ✨

⚡ RESOURCES ⚡

⭐ TIMESTAMPS ⭐
0:00 - Vue Data Fetching
0:28 - Where to fetch data
1:09 - Fetch API
1:33 - Axios
2:15 - async/await onMounted
2:34 - Async Component
3:19 - Composable Functions
3:56 - Custom fetch hook
4:38 - Fetch hook with Cache

#Vue #Fetching #Data

[_the_one_]

Great video as always Justin. Please create a Vue 3 course and take my money!

[Mane]

Great explanation with great visuals, a calming voice to listen to and exciting but understating music, I loved it! Got a new sub m8 ☺️

[parogparog]

Very concise and to the point. I don't subscribe to channels very often, but the format and depth for the different possibilities you bring up are exactly the type of content an experience dev is looking for. :) Thanks!

[RianYK]

thanks for tutorial. Vue JS 3 looks good in Syntax and API

[ferhatsunaycansev]

useFetch example is very very very great thanks alot man! love from Turkey!

[navidkhm]

At first I thought it's a scam by talking about vue and rolling world wide web but at the end I was surprised :)

[darkmift]

Its always good practice to add a repo or gist link to the code used in the presentation.

Great demo, first time I see use of cache logic and the map use is very cool.

[zekariyasmulugetaaltaye]

this video just saved my ass from a lot of trouble, Literally. Thank you

[emonymph]

Should have made video longer and shown examples of how it works by grabbing X from front end and storing it in DB at backend so we can visualize each method and select what we prefer syntaxically. You should also mention which fetching methods are compatible with web components and which are not, make a table (consider it as feedback)

[MrBiggydicks]

Nice one. I'm actually in my first Vue 3 production project right now. I don't actually need any API calls for this one but still good to know

[AnisD]

It's probably overkill for just a basic fetch but that last function is really cool. I had to pause screen to copy it :p

[zlatkoiliev]

Shouldn’t we invalidate the cache after some time?!? The approach from the example absolutely prevent fetching new data if we already have cached key. Maybe it will be a good idea to only keep the cache for some time like 15 min or something…

[fifty]

the composition api is miles ahead of react hooks, they really nailed it with this types and functions

[epiiiiiii]

Good stuff. I just wish you were using the Options API until I catch up. 😜

[RSurya]

can you explain how to use the method created in last section? because when I call it on component it will return Computedrefimpl

[ColinRichardson]

I didn't think you could use 'reactive' outside of the 'use' function because it had the potential to be initialised before the Vue instance had been configured?

[AhSoh]

Thanks for sharing, do you have real example to use the useFetchCache hook? i tried it doesn't really work correctly. Hope you can share more about it.

[carlosalvarado]

I was trying the sample code that you provide the get method is OK but how can I create a post request :v

[DK-pfdg]

Please make guide how to create a pagination.

[rafaelgramoschi]

when you check "!config.skip && fetch()" you must "!config.skip && AWAIT fetch()"