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.
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();
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 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.
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 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.
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();
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!
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.
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
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.
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.
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.
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. 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! :)
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.
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!
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!
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', [ // ]);
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.
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
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.
I am having an error ERROR in ./resources/js/app.js 4:0-28 Module not found: Error: Can't resolve './vue/app' in 'C:\xampp\htdocs\todo esources\js' I have followed everything the same. With same Laravel version as well. Please help
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.
Hi, can you help me with this error that is obtained after running npm run dev ERROR in ./resources/js/app.js 4:0-28 Module not found: Error: Can't resolve './vue/app' in 'C:\Users etan\Gitlab\todolist esources\js'
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", [ ]);
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?
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
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.
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.
Short and concise, right into the content! Save me lots of time! Thanks so much!
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.
Each an every line of code is explained. Such a great tutorial.
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 am following this video for half an hour now and I love your step by step explanations!
Very well explained simply and pretty straight forward.
Keep making videos / projects on Laravel & Vue.
There are very few tutorials about Laravel and Vue, thanks for making this.
Simplest and most concrete laravel vue tutorial I've seen.. thanks man.. keep em up 😎😎
Best complement I’ve ever received ❤️ thank you!
@@scrypster 😊
What a video! For one hour, I'm learned so much stuff. Great tutorial, keep going.
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 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.
I love the way you deliver this crash course.
- Cruize: Philippines
if you guys are checking for reviews, this is the best video for VueJS API calls.
You've done so well scrpster. Keep it up on laravel!
Thank you!
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();
Most clear an concise lessons i ever found about laravel and vuejs thank you for this tutorial
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!
Most comprehensive tutorial for a beginner!
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
I've been looking for such a good explanation for a long time, thank you very much
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"
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.
This is a brilliant tutorial! My favorite online teacher in the PHP-spectrum so far :)
Thank you!
Hands down best explanation I’ve seen! Subscribed.
an actual useful video covering all necessary features, props
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
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.
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.
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.
Your tutorial and your beard both are fantastic.
Great tutorial and great teaching skills
Man, why you've only 2.3k subs ?! Big up for you! ;)
DUDE YOU ENLIGHTENED MY HORIZON THANK YOU SO MUCH
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. 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! :)
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!
Thank God, some good English finally, been roaming for one which I can clearly understand. thanks bro
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.
Excellent video and to the point with best practice, thank you
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).
thanks man, this can help a lot for us still JR Developer.
Thanks for video. It is clear and not very fast.
very good video the way of teaching is very attractive mush appreciated please carry on such video thanks again
This was exactly what i was looking for!
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!
Great vid, clear, succinct and really helpful. Thank you!!
Thanks, you helped me learn web programming a lot!
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?
Thank you for this awesome tutorial! :)
Wonderful video keep going i use it with vite it's cool thanks
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.
Awsome tutorial, thank you!
this is an amazing tutorial!. Helped me out a lot. Keep it up G.
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
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 clear and concise! Thank you
I'm from Brazil. Thank you very much!
Great man, this helped a lot
really unusual seeing such complicated method of coding in laravel
Yes your tuto is really well explained, thank you.
Simple and perfect, great video and big thumb!
Thanks for the content, a great tutorial so far.
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?
I learnt things from this, 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.
Very very good!!! i like the way you explained, so good job!
This is an excellent tutorial. Thank you.
Ahhh. This is gold!!
Any reason for not capitalizing first letter of components? Isn’t that standard?
Nice video but it is out of date now. Larevel is not using mix anymore and Vue is now on 3.0
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!
Thanks for the crash course!
Tks man, learned a lot!
I am having an error ERROR in ./resources/js/app.js 4:0-28
Module not found: Error: Can't resolve './vue/app' in 'C:\xampp\htdocs\todo
esources\js'
I have followed everything the same. With same Laravel version as well. Please help
Same!!
I could make this app finally!!!
Thanks for this awesome video.
Thank you for this video. we appreciate it
Thank you for making this tutorial!
You helped me a lot dude, thanks !!
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
Thank u so muck, for shared your knowledge 😍
OMG!! Dude you are a life saver!!
Nicely explained
Nice video! Congrats
Hi, can you help me with this error that is obtained after running npm run dev
ERROR in ./resources/js/app.js 4:0-28
Module not found: Error: Can't resolve './vue/app' in 'C:\Users
etan\Gitlab\todolist
esources\js'
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", [
]);
@@meimei-cd1je Thank you @mei mei! It has worked
@@meimei-cd1je Thank you very much you are life saver. this resolved my problem
@@meimei-cd1je Thank you.
hi can i get the source code for the project
simple and nice explanation!
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!! It's very help me.
Thank you buddy, it was great
Question, is there any particular reason you declared your routes individually instead of using laravel's "apiresource" Route type?
Amazing!!!!!! LIked, Subscribed and hit the bell icon.
thanks, good explanation.
@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.