At 27:15 when trying to bring up the vue page for the first time I had to do two things: In webpack.mix.js add ".vue()" so that it reads: mix.js('resources/js/app.js', 'public/js').vue() Also run "npm i vue-loader" in command prompt Thanks for the awesome video!
thanks for the info, but when i npm run hot again and still got error message Error: Cannot find module 'D:\Project\laravel-mix\bin\cli.js' can someone help me.. ?
You are definitely my favourite Laravel instructor. Other instructors spend ages explaining their code and it usually puts me to sleep. You get straight in there - no waffle! Many thanks.
I think that depends, if you're an experience dev, then this pace is really good, but if you're just starting, you need to understand what he's doing instead of just mimicking.
If you get an error starting the Vue app this setup currently works: 1. In webpack.mix.js add ".vue()" so that it reads: mix.js('resources/js/app.js', 'public/js').vue() 2. Ensure vue loader is installed or updated, run "npm i vue-loader" in command prompt 3. New app.js file: require('./bootstrap'); import { createApp } from 'vue'; import App from './vue/app'; const app = createApp(App); app.mount('#app');
I watched this video when it was new and remembered it now as I have some more time to code now. For some reason I hadn't subscribed to your channel so it wasn't easy to find it. I'm not particularly planning to make a todo app but I wanted to say how great this content is! It really helps clearing a bunch of things up. It's the worst when tuts skip steps, not realizing that those steps are important to get things right. But this is crystal clear. Many thanks, man! Hoping to see more Laravel and/or Vue stuff on your channel.
Oooh I have enjoyed this tutorial and learnt so much at the same time. I hope and pray one day I become as good as you are in Laravel & VueJS Scrypster. Thanks.
I was about to learn VueJs and couldn't get where to start I already know Laravel but I want to make my projects more attractive by integrating other technologies this guy showed me a way to achieve that thanks a lot.
Just a note I just started watching this video and your voice sounds good for training. I am hoping to watch your other videos I have subscribed. Hope to learn a lot from you. Thanks for your time.
Excellent!! I had to do a change in file webpack.mix.js : add .vue() and run perfect. mix.js("resources/js/app.js", "public/js") .vue() .postCss('resources/css/app.css', 'public/css', [ // ]).vue();
Hi Dude its very helpful to learn basic this of vue js. I was very confused about the 'emit' but after watching this video, confusion removed. Thanks for this video.
liked it a lot! In case you want to add new items by hitting just enter you might want to add v-on:keyup.enter="addItem()" in the addItemForm.vue file like so: In case you run into some compile errors with vue setup you might want to add in the webpack.mix.js file a single .vue();
This boy is programming over MacBook, and he has no issue, when I tried to my windows pc, I'm facing with too many issues. So it will be great if you made some videos that you explain also the problems that we will faced on Windows OS. Thank you!
I really like your video thumbnail. Its seems definition of how much we should be serious about professions. nice content. explain very well. Thank you Guru.
You are amazing dude! You are currently building up my confidence for my new job! I just got a full-stack job and currently using this tutorial to familiarise myself with the frameworks! Thanks heaps mate!
One word for the video "AWEEEEEEEEEEEEEEEEEEEEEEEEEEEEESOME". Thanks a lot for such a great content. Would definitely want to see more content from you. Keep it up. Peace
At the 21:30 you're making things a little bit weird in my opinion. There is obviously something wrong (item not found), but the response is 200 (all green). So for cases like this one, much better approach would be if you returned response(["message" => "Some appropriate message"], 404);. This way, you could easily implement then -> catch or try -> catch on the frontend side whenever an item was not found. This would be way more elegant and preferable approach in my opinion. Side note: 404 is http status code for "resource not found". There is also a handy class Symfony\Component\HttpFoundation\Response which you can import and then use it, for example, as Response::HTTP_NOT_FOUND
Wow..thank you very much..I was able to follow all and resolve issues along the way. I have learned a lot and thats all gold. Keep doing videos to help more like me.
Great tutorial. Had some problems ahead, because used newest php, laravel and everything on docker. But managed to get the same output after video finished. Thank you very much for this tutorial! :)
Great tutorial. I think we should use another field as the :key since index changes. If you delete the first item then the second item takes its index position. item.id would be a good candidate to use as the key since its from the db and won't change.
Hey thanks for the great tutorial. I have had trouble with tutorials creating a Laravel/Vue project. I was always getting these funky errors when I tried to install Vue, not with yours. Great job my friend!
At 27:08, when I run 'npm run hot', I get the following the error: "C:\Users\AdMiN\Desktop\todolist ode_modules\import-local\index.js:7 const globalDir = pkgDir.sync(path.dirname(filename)); ^ TypeError: pkgDir.sync is not a function." I searched in StackOverflow and other similar forums but found nothing. EDIT: I tried adding .vue() to the webpack.mix.js file as one comment here suggested but it didn't work.
For all the people who use windows the command npm run dev give error if you have spaces in your project path. I waste a day to figure out. My project was in a folder 'Laravel projects'. Finally I renamed 'Laravelprojects' and worked.
Just a thought. There was no reason to add "/store" when posting a new Item. It simply goes against rules for creating a RESTful API. Your HttP verb should say the action to be done, not the route name. But great video and I love the simplicity of It all
@@scrypster I add Livewire to my current project, and well yes is nice but the true I want now try Laravel + Nuxt, yes I know is a contradictory comment after I say "pure blade components" but maybe if I go deep I will ending love Nuxt + Laravel.
how about in the index items, if our data too many of them, i mean if we want to show them as pagination and make route with url segment also in the url segment for filtering and and sorting or tagging and so on and on.
ERROR in ./resources/js/app.js 4:0-28 Module not found: Error: Can't resolve './vue/app' in 'E:\LEARN\LearnVue esources\js'. WHAT DOES THIS MEAN?? help anyone
What worked for me: Thanks to @mei mei Had the same issue, go to your webpack.mix.js file and add .vue() mix.js("resources/js/app.js", "public/js") .vue() .postCss("resources/css/app.css", "public/css", [ ]); And thanks to someone else on the internet Clear the cache php artisan cache:clear
If anyone is getting error: ERROR in ./resources/js/app.js 4:0-28 Module not found: Error: Can't resolve './vue/app' Just open up webpack.mix.js and add .vue() at the end. Just like this: mix.js('resources/js/app.js', 'public/js').vue() .postCss('resources/css/app.css', 'public/css', [ // ]);
25:10 When running npm run hot I am getting the error: Can't resolve ./vue/app in C:\xampp\htdocs\first-app\first-app esources\js Edit: I fixed this thanks to another comment here, you need to add .vue() at the end if your webpack mix file!
Great stuff... Question: are you using laravel 8 in this video? In minute 7:40 (line 17) my middleware says 'auth:sanctum' instead of 'auth:api'. What does it change?
Thank you for the video. I scanned through your channel. Will you do a tutorial on a Real-Life system? Like Library System, Rental System etc.? From Login all the way to Reporting?
I’ll see what I can do. I try really hard to keep these videos under an hour. I personally dislike the multi-hour how-to tutorials. There’s just so much to follow and remember I don’t think it’s as beneficial for learning. Maybe I could break it into a series 🤔
At 27:15 when trying to bring up the vue page for the first time I had to do two things:
In webpack.mix.js add ".vue()" so that it reads: mix.js('resources/js/app.js', 'public/js').vue()
Also run "npm i vue-loader" in command prompt
Thanks for the awesome video!
Thanks!
Thanks very much. I had to stop and scroll down the comments looking for any reference to the issue.
thanks for the info, but when i npm run hot again and still got error message
Error: Cannot find module 'D:\Project\laravel-mix\bin\cli.js'
can someone help me.. ?
Thank you, you're a legend
thanks!!
You are definitely my favourite Laravel instructor. Other instructors spend ages explaining their code and it usually puts me to sleep. You get straight in there - no waffle! Many thanks.
I think that depends, if you're an experience dev, then this pace is really good, but if you're just starting, you need to understand what he's doing instead of just mimicking.
dude im really glad i found this channel
I am following this video for half an hour now and I love your step by step explanations!
If you get an error starting the Vue app this setup currently works:
1. In webpack.mix.js add ".vue()" so that it reads: mix.js('resources/js/app.js', 'public/js').vue()
2. Ensure vue loader is installed or updated, run "npm i vue-loader" in command prompt
3. New app.js file:
require('./bootstrap');
import { createApp } from 'vue';
import App from './vue/app';
const app = createApp(App);
app.mount('#app');
thx mate it helped me
Thanks a lot.
This saved me from being stuck.
I watched this video when it was new and remembered it now as I have some more time to code now. For some reason I hadn't subscribed to your channel so it wasn't easy to find it. I'm not particularly planning to make a todo app but I wanted to say how great this content is! It really helps clearing a bunch of things up. It's the worst when tuts skip steps, not realizing that those steps are important to get things right. But this is crystal clear. Many thanks, man! Hoping to see more Laravel and/or Vue stuff on your channel.
Oooh I have enjoyed this tutorial and learnt so much at the same time. I hope and pray one day I become as good as you are in Laravel & VueJS Scrypster. Thanks.
I was about to learn VueJs and couldn't get where to start I already know Laravel but I want to make my projects more attractive by integrating other technologies this guy showed me a way to achieve that thanks a lot.
Very well explained simply and pretty straight forward.
Keep making videos / projects on Laravel & Vue.
Short and concise, right into the content! Save me lots of time! Thanks so much!
Finaly! I was looking for a video like this for a whole week. Subscribed.
I had just began learning Laravel and vue. Coming from mern stack technologies. This tutorial enabled, e to learn crud operations within an hour
I love the way you deliver this crash course.
- Cruize: Philippines
Just a note I just started watching this video and your voice sounds good for training. I am hoping to watch your other videos I have subscribed. Hope to learn a lot from you. Thanks for your time.
Simplest and most concrete laravel vue tutorial I've seen.. thanks man.. keep em up 😎😎
Best complement I’ve ever received ❤️ thank you!
@@scrypster 😊
There are very few tutorials about Laravel and Vue, thanks for making this.
What a video! For one hour, I'm learned so much stuff. Great tutorial, keep going.
Excellent!! I had to do a change in file webpack.mix.js : add .vue() and run perfect. mix.js("resources/js/app.js", "public/js")
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]).vue();
You just saved me. Thanks!
You just saved another one.
Hands down best explanation I’ve seen! Subscribed.
Most clear an concise lessons i ever found about laravel and vuejs thank you for this tutorial
Each an every line of code is explained. Such a great tutorial.
Hi Dude its very helpful to learn basic this of vue js.
I was very confused about the 'emit' but after watching this video, confusion removed.
Thanks for this video.
You are really rock though i am a Laravel developer but i can not understand how work with vue but now i understood thnx bro
liked it a lot!
In case you want to add new items by hitting just enter you might want to add
v-on:keyup.enter="addItem()" in the addItemForm.vue file like so:
In case you run into some compile errors with vue setup you might want to add in the webpack.mix.js file a single
.vue();
This boy is programming over MacBook, and he has no issue, when I tried to my windows pc, I'm facing with too many issues. So it will be great if you made some videos that you explain also the problems that we will faced on Windows OS. Thank you!
It's not because of the OS, it's probably because of the Vue version that you're using (among some other things that might be causing you trouble).
I really like your video thumbnail. Its seems definition of how much we should be serious about professions. nice content. explain very well. Thank you Guru.
You are amazing dude! You are currently building up my confidence for my new job! I just got a full-stack job and currently using this tutorial to familiarise myself with the frameworks! Thanks heaps mate!
if you guys are checking for reviews, this is the best video for VueJS API calls.
One word for the video "AWEEEEEEEEEEEEEEEEEEEEEEEEEEEEESOME".
Thanks a lot for such a great content. Would definitely want to see more content from you.
Keep it up.
Peace
Great tutorial and great teaching skills
This is a brilliant tutorial! My favorite online teacher in the PHP-spectrum so far :)
Thank you!
You've done so well scrpster. Keep it up on laravel!
Thank you!
I've been looking for such a good explanation for a long time, thank you very much
At the 21:30 you're making things a little bit weird in my opinion. There is obviously something wrong (item not found), but the response is 200 (all green). So for cases like this one, much better approach would be if you returned response(["message" => "Some appropriate message"], 404);. This way, you could easily implement then -> catch or try -> catch on the frontend side whenever an item was not found. This would be way more elegant and preferable approach in my opinion.
Side note: 404 is http status code for "resource not found". There is also a handy class Symfony\Component\HttpFoundation\Response which you can import and then use it, for example, as Response::HTTP_NOT_FOUND
Most comprehensive tutorial for a beginner!
very good video the way of teaching is very attractive mush appreciated please carry on such video thanks again
an actual useful video covering all necessary features, props
Wow..thank you very much..I was able to follow all and resolve issues along the way. I have learned a lot and thats all gold. Keep doing videos to help more like me.
Great tutorial. Had some problems ahead, because used newest php, laravel and everything on docker. But managed to get the same output after video finished. Thank you very much for this tutorial! :)
Great tutorial. I think we should use another field as the :key since index changes. If you delete the first item then the second item takes its index position. item.id would be a good candidate to use as the key since its from the db and won't change.
Your tutorial and your beard both are fantastic.
Thank God, some good English finally, been roaming for one which I can clearly understand. thanks bro
Hey thanks for the great tutorial. I have had trouble with tutorials creating a Laravel/Vue project. I was always getting these funky errors when I tried to install Vue, not with yours. Great job my friend!
DUDE YOU ENLIGHTENED MY HORIZON THANK YOU SO MUCH
Super high quality. I've been looking to learn a backend with Vue - thought Laravel was a nice choice - so glad I found this! Subbed!
Thank you!
Man, why you've only 2.3k subs ?! Big up for you! ;)
You can create model, migrations and controller with a single command "php artisan make:model Item -cmr"
Definitely an awesome option!
@@scrypster And also "php artisan make:model Item -a"
Wonderful video keep going i use it with vite it's cool thanks
Thanks for video. It is clear and not very fast.
Excellent video and to the point with best practice, thank you
At 27:08, when I run 'npm run hot', I get the following the error:
"C:\Users\AdMiN\Desktop\todolist
ode_modules\import-local\index.js:7
const globalDir = pkgDir.sync(path.dirname(filename));
^
TypeError: pkgDir.sync is not a function."
I searched in StackOverflow and other similar forums but found nothing.
EDIT: I tried adding .vue() to the webpack.mix.js file as one comment here suggested but it didn't work.
did you find the solution please
@@mouadjanah1618 Sorry, I don't remember. It's been two years.
thanks man, this can help a lot for us still JR Developer.
For all the people who use windows the command npm run dev give error if you have spaces in your project path.
I waste a day to figure out. My project was in a folder 'Laravel projects'. Finally I renamed 'Laravelprojects' and worked.
Thank you. I believe you can all put the project path in “quotations” if there are spaces
Nice video! Congrats
This was exactly what i was looking for!
this is an amazing tutorial!. Helped me out a lot. Keep it up G.
Excellent! It does a lot!! It would be very good if you separated the front-end app from the back-end app.
Anyway, thanks a lot for this!
Just a thought. There was no reason to add "/store" when posting a new Item. It simply goes against rules for creating a RESTful API. Your HttP verb should say the action to be done, not the route name. But great video and I love the simplicity of It all
thanks for this information, what you you put instead ? or just leave it without a prefix?
Very very good!!! i like the way you explained, so good job!
Simple and perfect, great video and big thumb!
This frontend language is so elegant and clean. I am only using jquery and ajax in my laravel app. How long will it take to learn this language?
Great vid, clear, succinct and really helpful. Thank you!!
After watch the whole video, mmm I see the good about VUE but at some point I think is more simple goes with pure Laravel Components, thanks!
Thank you. You may prefer Jetstream Livewire. Check it out. You can build all your components with Laravel Blades instead of Vue. It’s pretty cool.
@@scrypster I add Livewire to my current project, and well yes is nice but the true I want now try Laravel + Nuxt, yes I know is a contradictory comment after I say "pure blade components" but maybe if I go deep I will ending love Nuxt + Laravel.
how about in the index items, if our data too many of them, i mean if we want to show them as pagination and make route with url segment also in the url segment for filtering and and sorting or tagging and so on and on.
Thank you for this awesome tutorial! :)
Thanks, you helped me learn web programming a lot!
I'm from Brazil. Thank you very much!
Nicely explained
Great man, this helped a lot
Very clear and concise! Thank you
Thank u so muck, for shared your knowledge 😍
OMG!! Dude you are a life saver!!
Any reason for not capitalizing first letter of components? Isn’t that standard?
Ahhh. This is gold!!
Yes your tuto is really well explained, thank you.
really unusual seeing such complicated method of coding in laravel
ERROR in ./resources/js/app.js 4:0-28
Module not found: Error: Can't resolve './vue/app' in 'E:\LEARN\LearnVue
esources\js'.
WHAT DOES THIS MEAN?? help anyone
What worked for me:
Thanks to @mei mei
Had the same issue, go to your webpack.mix.js file and add .vue()
mix.js("resources/js/app.js", "public/js")
.vue()
.postCss("resources/css/app.css", "public/css", [
]);
And thanks to someone else on the internet
Clear the cache
php artisan cache:clear
But still weird, because Scrypster does not use this in his webpack.mix.js
Thanks for the content, a great tutorial so far.
love u bro. please make a complete e-commerce site...
I learnt things from this, Thank you.
This is an excellent tutorial. Thank you.
Thanks for this awesome video.
Amazing!!!!!! LIked, Subscribed and hit the bell icon.
If anyone is getting error: ERROR in ./resources/js/app.js 4:0-28
Module not found: Error: Can't resolve './vue/app'
Just open up webpack.mix.js and add .vue() at the end. Just like this: mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
Great!
I've tried adding that .vue() to the mix.js call, but still no joy in compiling. Any further ideas?
You helped me a lot dude, thanks !!
I could make this app finally!!!
Thanks for the crash course!
25:10 When running npm run hot I am getting the error: Can't resolve ./vue/app in C:\xampp\htdocs\first-app\first-app
esources\js
Edit: I fixed this thanks to another comment here, you need to add .vue() at the end if your webpack mix file!
Great stuff... Question: are you using laravel 8 in this video? In minute 7:40 (line 17) my middleware says 'auth:sanctum' instead of 'auth:api'. What does it change?
grate.. do more..
Thank you for this video. we appreciate it
simple and nice explanation!
that's awesome, man :)
Tks man, learned a lot!
Thank you for making this tutorial!
Thank you for the video. I scanned through your channel. Will you do a tutorial on a Real-Life system? Like Library System, Rental System etc.? From Login all the way to Reporting?
I’ll see what I can do. I try really hard to keep these videos under an hour. I personally dislike the multi-hour how-to tutorials. There’s just so much to follow and remember I don’t think it’s as beneficial for learning. Maybe I could break it into a series 🤔
Video start at 3:02 and Vue stuff start at 23:08
Dude Great work
i have problem in compile Module not found: Error: Can't resolve '/vue/app'
I am also facing this same issue did u solve it?
@Scrypster your way of teaching is amazing, can you make a video/project on AntDesign in Vue.
Thank you! I’m actually not familiar with AntDesign, but I will definitely check it out!
@@scrypster I saw enterprise companies using AntDesign with React and Vue. If would be great if you make something on it.