Vue JS 3 Tutorial for Beginners #9 - Fetching Data

Hey gang, i this Vue 3 tutorial I'll show you how to fetch data in our components.

----- Timestamps -----
0:00 - Using JSON Server
7:09 - Fetching data from components
15:47 - Conditionally showing data

🐱‍💻 🐱‍💻 BUY THE FULL 20-hr COURSE ON UDEMY:

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

[theebookkeeper]

for anyone having difficulties running the json-server command: Here is the solution:
Run:
npx json-server --watch data/db.json

Happy coding :)

[CV-wohj]

Awesome series thank you. With the latest json server "1.0.0-alpha.20", I had to modify db.json otherwise I kept getting a 404 not found. I had to add quotation marks around the ID numbers as follows {
"jobs": [
{
"id": "1",
"title": "Ninja UX Designer",
"details": "lorem"
},
{
"id": "2",
"title": "Ninja Web Developer",
"details": "lorem"
},
{
"id": "3",
"title": "Ninja Vue Developer",
"details": "lorem"
}
]
}

[tswtdt]

Seriously, as everyone has already said, Thank you very much!! Please keep doing this!! You've helped a lot. I'm actually getting pretty good at front end development and feel confident getting into back end.

[RohitThakur-sjen]

I stopped continuing Vue and switched to React a few months ago. But, now I'm back, thanks to you. Love your tutorials :)

[qhphan]

For all those who are too lazy to navigate to the course files:
{
"jobs": [
{ "title": "Ninja UX Designer", "id": 1, "details": "lorem" },
{ "title": "Ninja Web Developer", "id": 2, "details": "lorem" },
{ "title": "Ninja Vue Developer", "id": 3, "details": "lorem" }
]
}

[silenthill]

I gotta tell you
You're a life saver
Everytime i get stuck at something i always come here and miraculously almost every problem get solved

[blakebedford-palmer]

Love it! Maybe one thing overlooked, is even if you use a invalid job ID ( /jobs/6), JSON server returns 404 but sends an empty object, so when you do v-if="job" it's still true, even though this.job is just an empty object

[georgi_verstapen]

If you face this issue "json-server : The term 'json-server' is not recognized as the name of a cmdlet, function, script file, or operable program"
Simpli write: npx json-server --watch src/data/db.json --port 3000. This will solve the above error and will host the json-server on your desired port (in this example on port 3000)
Hope this helped you, dear developer :)

[_isaac_muniz_]

i wasn't able to run json-server so i installed it globally with 'npm install -g json-server' and it worked fine

[zenmasterfu]

If you wish to show the "results loading ..." pages add "--delay (time in ms)" to the json-server command. I use 500 ms..

[mauricemakesmovies]

You're a great teacher. Keep up the good work Shaun!

[softwareEngineerKunwar]

Thank for tutorials, please bring more tutorials in vue 3 like crud api, crud more. There are very few tutorials in vue 3 and you tutorials are best among them. I hope you also use bootstap 4 or 5 for ui.

[sauravjain]

Noobs favourite: Angular
Pro favourite: React
Hackers favourite: Vue

[angelosarnaoutis]

If you want to test "loading jobs...", you can add a delay to the response of the json server. This can be done by adding to the json-server command the --delay or -d and the the number of milliseconds you want the response to be delayed.

[Skaxarrat]

Thanks for this incredible tutorials, Shaun.

btw, one way to not getting an error is making the "job" variable an object:

data() {
return {
job: {},
}
},

[mateuszfrydrych]

A little hint: for chromium-based browsers (Chrome, Edge, I don't know about others) you can limit the network speed for the browser. This is done in the "Network" tab (where you have viewed the queries sent to the server) from the "Unlimited" option to one of the ready settings, eg "Fast 3G network" or "Slow 3G network" or any custom setting.
Regards

[Viralplace]

Finally you don't explain the lazy-loading route... what is the difference

[Bemidbar]

You are a brilliant teacher! Thank you very much!

[learnsimple]

Thanks Shaun. Best tutorial ever. Just wanted to know whether you are planning on a MEVN stack or a sass tutorial and which UI com potent library do you recommend for vue.

[marcmil]

Awesome video!
One suggestion though: We should hope that the company always has at least one open job, otherwise the length of the array will stay 0 and "Loading" will be shown forever ;)