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.. ?
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');
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();
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.
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();
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.
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
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.
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!
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!
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.
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', [ // ]);
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.
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
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.
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.
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! :)
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.
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!
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
@@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.
What i am doing wrong ??? I have fallow all the steps, =( × Mix Compiled with some errors in 1.48s ERROR in ./resources/js/app.js 4:0-28 Module not found: Error: Can't resolve './vue/app' in 'C:\xampp\htdocs\app esources\js'
@@muhammadmarsudiarto8429 min 26:23 in webpack.mix.js add .vue something like that : mix.js('resources/js/app.js', 'public/js).vue after clear cache php artisan cache:clear and clear the cache of npm cache clean --force, and give a shot it solved the problem for me
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", [ ]);
I am getting this error when I run "npm run hot" and unable to find it's solution. Is there anyone to help me Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See webpack.js.org/concepts#loaders > | | app components webpack compiled with 1 error
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 🤔
" "export 'default' (imported as 'Vue') was not found in 'vue' " Vue wasn't working for me; it installed Vue 3 not Vue 2 and it's changed a bit: my `resources/js/app.js` file: ~~~~~~~~~~~~~~~~~~ require('./bootstrap'); import { createApp } from 'vue' import App from './vue/app' export const app = createApp(App) createApp(App).mount('#app')
the other things miss from this tuts is authentication or authorization, to secure API, i hope you complete this one even with simple auth, cause that must have on api.
