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" } ] }
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
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.
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" } ] }
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.
Hey, I may do a full stack Vue project at some point but was thinking of using GraphQL. May also do a SASS refresh at some point too. I really like Vuetify for Vue 2, looking forward to it's new relase for v3 :)
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.
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
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 :)
Thanks for this incredible tutorials, Shaun. btw, one way to not getting an error is making the "job" variable an object: data() { return { job: {}, } },
Thank you, very useful tutorial series. I'm wondering, why don't you have to filter the results from the fetch with the id props? is JSON Server already configured for that? Cheers!
doesn't work, that appear in my screen ; file:///C:/Users/aa/AppData/Roaming/npm/node_modules/json-server/lib/bin.js:4 import { parseArgs } from 'node:util'; ^^^^^^^^^ SyntaxError: The requested module 'node:util' does not provide an export named 'parseArgs' at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21) at async ModuleJob.run (node:internal/modules/esm/module_job:194:5) at async Promise.all (index 0) at async ESMLoader.import (node:internal/modules/esm/loader:385:24) at async loadESM (node:internal/process/esm_loader:88:5) at async handleMainPromise (node:internal/modules/run_main:61:12)
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 ;)
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.
After installing json-server it wouldn't let me use json-server in command line, to fix this I installed it globally adding the -g tag after "install" then installing it locally to the project. I'm not sure if anyone else has experienced this issue but if you are this is how you resolve that.
If we got error UI will present still loading bc we didnt change jobs.length or job if we got error but btw it was great tutorial. Its not hard to handle that case . Thank you
Note: at the 12 minute mark, if your getting a net::ERR_BLOCKED_BY_CLIENT error message....it is likely that it is your browser ad blocker! disable it, or use a different browser, this was the problem for me when using the brave browser, I just clicked the lion head and disabled it and it works fine
$ json-server -watch data/db.json (I got command not found: json-server) I'm using MacOS with npm (6.14.4) In order to solve this I had to uninstall json-server using: $ npm uninstall json-server and then install json-server globally using: $ npm install -g json-server
Hello, I have a question. What if I want to use "job title" to search in the JSON array by the fetch function, rather than using "id"? Is there a way to do so?
How do I cancel my previous fetch request ? Let's say I was fetching a data on my project then while my page is still fetching I changed to another page route?
i got problem in section 5:26 and the problem is this : json-server : The term 'json-server' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 is there anyone can help me?
The same way 'jobs' is not null because it's just an empty array (value), couldn't we set 'job' property to {} instead of null? So it would be an empty object and not null. Or is {} still a null value?
how to get data from list without using loop? I am import array of data from api but i want to you use only one row,so please tell me how to get data using index number... I have tried list[0].title but it shows error
Very helpful. I have fetched users with '/wp/v2/users' endpoint, but I can only get my own user data, I get a 401 error response when trying to get something like '/wp/v2/users/2'. How can I authenticate in order to get All Users data? I need to lists employees... I tried adding a header argument to the fetch function but it didn't work, I'm guessing It's because headers had already been sent, but I'm new to WP API REST, and to Vuejs, so I don't really know... I'm simply adding Vuejs for a couple of pages, as a script file from a CDN. I only find information about classic ajax so I don't know how to authenticate through API REST and Vuejs P.D. : I had already generated my application password, just don't know where/how to place credentials. Running WP 5.9.3
Hello sir, I want to learn app development. But I don't know which one to prefer "react-native" or "flutter". I know react js very well and also flutter a bit. Can you prefer which one is better.
Hi there, I am just learning Vue and I am creating a map app. I have already placed a geolocation script to output the latitude and longitude values on the DOM but I don't know how to refer the data back to the server, do you have an clue what I should do/look for? Thank you!
The mounted fetch request within JobDetails isn't working for me for some reason... if I have the (res => res.json()) portion in it, there's an unexpected character error that comes up. If I switch res.json() to res.text() that error goes away, but I get another error saying the requested localhost:3000/jobs/1 isn't found. Can anyone help me please?
I bought this tutorial and follow this part and it worked fine for me, until I had to use a json file with Pinia… I can GET mock data from my file and populate an array, but when it comes to POST new data I keep on receiving this error: "POST localhost:3000/borrowedBooks 500 (Internal Server Error)" Any help would be highly appreciated!
for anyone having difficulties running the json-server command: Here is the solution:
Run:
npx json-server --watch data/db.json
Happy coding :)
Thanks that worked, the line in the video gave me an error
Thank you!
The man's a life saver!
thank you
legend
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"
}
]
}
Thank you I was digging the Internet searching for a fix
Thanks bro, why does it happen? We don't know... hahaha
Had the same issue, thanks for solution!
thanks!
Thanks! Same here.
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
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.
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
Aha, glad I could help :) thanks for watching!
I stopped continuing Vue and switched to React a few months ago. But, now I'm back, thanks to you. Love your tutorials :)
React vs Vue which one best ?
@@mohdmahtab8991 Both of them are great frameworks. But I would suggest going with Vue as it is a lot more beginner friendly.
I've been working with React for over a year. I am thinking to start learning Vue as well. How different is it?
@@RohitThakur-sj7en thankyou brother 🙂
@@TheCodingOdyssey I would insist you to give it a try. Everything is far more convenient in Vue.
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" }
]
}
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.
Hey, I may do a full stack Vue project at some point but was thinking of using GraphQL. May also do a SASS refresh at some point too. I really like Vuetify for Vue 2, looking forward to it's new relase for v3 :)
@@NetNinja As long as it is Vue fullstack (graphQL or MEVN). Count me in.
@@learnsimple4592 @The Net Ninja me too.
@@NetNinja subscribed for more future content :)
You're a great teacher. Keep up the good work Shaun!
Thanks Maurice, I appreciate that! :)
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.
i wasn't able to run json-server so i installed it globally with 'npm install -g json-server' and it worked fine
If you wish to show the "results loading ..." pages add "--delay (time in ms)" to the json-server command. I use 500 ms..
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
why would you do that?
@@kajganamakedonska1846 To better see what happens at 11:30. Also testing in general.
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 :)
Thanks, bro!
You are a brilliant teacher! Thank you very much!
Thanks for this incredible tutorials, Shaun.
btw, one way to not getting an error is making the "job" variable an object:
data() {
return {
job: {},
}
},
thanks so much, that was driving me crazy lol, i was wondering why it wasnt working
Thank you, very useful tutorial series.
I'm wondering, why don't you have to filter the results from the fetch with the id props? is JSON Server already configured for that? Cheers!
Many thanks for these great tutorials!
is there a tutorial of yours which you use database instead of a json?
謝謝！
npx json-server --watch data/db.json = This command help me to watch file using json-server in windows.
doesn't work, that appear in my screen ; file:///C:/Users/aa/AppData/Roaming/npm/node_modules/json-server/lib/bin.js:4
import { parseArgs } from 'node:util';
^^^^^^^^^
SyntaxError: The requested module 'node:util' does not provide an export named 'parseArgs'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
at async loadESM (node:internal/process/esm_loader:88:5)
at async handleMainPromise (node:internal/modules/run_main:61:12)
Thank you very much for your course! it's extremely helpful and easy to understand!
Glad it was helpful! :) thanks for watching
Finally you don't explain the lazy-loading route... what is the difference
thank you, you are teaching in best way ❤️
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 ;)
I love your voice you're good for explaining the code
Shout-out from France ❤️
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.
Or you can just press F12, go to network and change from 'online' to 'slow 3g'. With that you can test this too...
Thank you for the thorough tutorial.❤
Hope it was helpful! thanks for watching :)
at 4:00 , aren't yarn🧶installs better for Macs? with npm, a lot of the time you have to do a sudo install, which isn't advisable
Interesting and proper way to work with data.
Thanks :)
Thank u so much Ninja ❤ u are the best!
Hi, from my experience you would fetch data in a created() life cycle hook, it's much better for handling get requests
After installing json-server it wouldn't let me use json-server in command line, to fix this I installed it globally adding the -g tag after "install" then installing it locally to the project. I'm not sure if anyone else has experienced this issue but if you are this is how you resolve that.
Such an excellent video! Thank you!
You're very welcome!
{
"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" }
]
}
np ;)
Noobs favourite: Angular
Pro favourite: React
Hackers favourite: Vue
so would you rarely fetch JSON data on a local file server?
Is it a preference to using mounted vs created vs beforeMounted ?
If we got error UI will present still loading bc we didnt change jobs.length or job if we got error but btw it was great tutorial. Its not hard to handle that case . Thank you
why use mounted hook and not beforemount or something like that so you dont have to write all the conditionals?
at 15:58 the problem can be fixed quickly if we set job : {}.
thank you for your awesome content shaun
Note: at the 12 minute mark, if your getting a net::ERR_BLOCKED_BY_CLIENT error message....it is likely that it is your browser ad blocker! disable it, or use a different browser, this was the problem for me when using the brave browser, I just clicked the lion head and disabled it and it works fine
$ json-server -watch data/db.json (I got command not found: json-server)
I'm using MacOS with npm (6.14.4)
In order to solve this I had to uninstall json-server using:
$ npm uninstall json-server
and then install json-server globally using:
$ npm install -g json-server
thank you
I doun't knaow the origin of your accent. Bot it's very charming I reeely like it!
Thank you! 😃 I'm from Manchester, UK!
@@NetNinja Hoooray! Again, many thanks to your great tutorial !
vue is the best!
agree
agree
Hello, I have a question.
What if I want to use "job title" to search in the JSON array by the fetch function, rather than using "id"? Is there a way to do so?
Did you find a way to do this?
Hi, can you create multiple fetch statements there?
How do I cancel my previous fetch request ? Let's say I was fetching a data on my project then while my page is still fetching I changed to another page route?
Why not pass the job as a prop to JobDetails? For production, would it be better performance because you don't fetch it twice? Thanks.
i got problem in section 5:26 and the problem is this : json-server : The term 'json-server' is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1 is there anyone can help me?
I just think its better to cover on axios than fetch
Not really, it's much better to use the native Fetch for these type of cases.
Great,but how i do this in composition api,how i get the id?
Use props or vue router and pass the Id with the params parameter
thankss :)
Thank you ! by japanese(日本人）
The same way 'jobs' is not null because it's just an empty array (value), couldn't we set 'job' property to {} instead of null? So it would be an empty object and not null. Or is {} still a null value?
keep making vue vids please
Pero de esta forma haces 2 peticiones, en la primera ya tienes todo, por qué no almacenarlo en vuex y desplegar la data necesaria por medio de su id?
I undestand how make a list of items in json-server, but how to delete any item from my list using fetch request? how to address to exact id?
Thank you
vue is the best
"fetch data", does that mean fetch data from a database to memory? or to/from/ memory from/to the screen?
is it fetch automatic can call after install on package.json, not import the node-fetch
how can we fetch data from a created database server for vue.js?
how setup vue auto-complete in vscode?
how to get data from list without using loop?
I am import array of data from api but i want to you use only one row,so please tell me how to get data using index number...
I have tried list[0].title but it shows error
i using axios and call api from MongoDB, however when i get the id from the job page it says detailJobs error 404 has format detailJobs/undefined
Very helpful. I have fetched users with '/wp/v2/users' endpoint, but I can only get my own user data, I get a 401 error response when trying to get something like '/wp/v2/users/2'. How can I authenticate in order to get All Users data? I need to lists employees...
I tried adding a header argument to the fetch function but it didn't work, I'm guessing It's because headers had already been sent, but I'm new to WP API REST, and to Vuejs, so I don't really know... I'm simply adding Vuejs for a couple of pages, as a script file from a CDN. I only find information about classic ajax so I don't know how to authenticate through API REST and Vuejs
P.D. : I had already generated my application password, just don't know where/how to place credentials. Running WP 5.9.3
Hello sir,
I want to learn app development.
But I don't know which one to prefer "react-native" or "flutter". I know react js very well and also flutter a bit. Can you prefer which one is better.
if you know whats there to learn>?
ty.
Hi there, I am just learning Vue and I am creating a map app. I have already placed a geolocation script to output the latitude and longitude values on the DOM but I don't know how to refer the data back to the server, do you have an clue what I should do/look for? Thank you!
Thanks :)
Why does this not cause the CORS policy problem? Can anyone please explain that to me?
Shaun what about angular course? Any plan to create one.?
i can't get the data when I pass the id as a parameter to the API how you did that ?? I think you miss a part there ?? any idea
Watch 14:00
The mounted fetch request within JobDetails isn't working for me for some reason... if I have the (res => res.json()) portion in it, there's an unexpected character error that comes up. If I switch res.json() to res.text() that error goes away, but I get another error saying the requested localhost:3000/jobs/1 isn't found. Can anyone help me please?
add quotation marks to the ID in json file, like this:
{
"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"
}
]
}
11:00
What is your dog's name?
I don't have one, but if I did I would call it Yoshi :)
Wait then who's the cutie on your github pfp?
9:00
Hmmm
Is this tutor British?
Hey yes, I am from Manchester, England :)
I bought this tutorial and follow this part and it worked fine for me, until I had to use a json file with Pinia… I can GET mock data from my file and populate an array, but when it comes to POST new data I keep on receiving this error: "POST localhost:3000/borrowedBooks 500 (Internal Server Error)"
Any help would be highly appreciated!