Todo List App with Laravel and Vue.js

[@mariannehartigan]

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!

[@arshadahmad4433]

Thanks!

[@tigere01]

Thanks very much. I had to stop and scroll down the comments looking for any reference to the issue.

[@ardhafatika8320]

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.. ?

[@therain9389]

Thank you, you're a legend

[@henrique-arthur]

thanks!!

[@AdrianSmithSEO]

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.

[@joelatan5714]

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.

[@MonyetLepasCh]

dude im really glad i found this channel

[@mayerlysuarezordonez5370]

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();

[@milijan-mosic]

You just saved me. Thanks!

[@yusinkim7921]

You just saved another one.

[@BrandonWingerAir]

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');

[@bbpyno]

thx mate it helped me

[@victordada968]

Thanks a lot. This saved me from being stuck.

[@kiliansalomon7306]

I am following this video for half an hour now and I love your step by step explanations!

[@gabrieljumahjumah3135]

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.

[@bashircodes]

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.

[@AH-co4mj]

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();

[@ThePublicTutorials]

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.

[@dr.kenedy-oltitia]

I had just began learning Laravel and vue. Coming from mern stack technologies. This tutorial enabled, e to learn crud operations within an hour

[@ZeeshanAli-cd4db]

if you guys are checking for reviews, this is the best video for VueJS API calls.

[@JavedBaloch786]

Very well explained simply and pretty straight forward. Keep making videos / projects on Laravel & Vue.

[@stronglonggg]

Short and concise, right into the content! Save me lots of time! Thanks so much!

[@TagalogHacksandTutorials]

I love the way you deliver this crash course. - Cruize: Philippines

[@lesssass4478]

Each an every line of code is explained. Such a great tutorial.

[@cristian702]

Finaly! I was looking for a video like this for a whole week. Subscribed.

[@BillClinton228]

There are very few tutorials about Laravel and Vue, thanks for making this.

[@jahdielcastaneda8728]

Simplest and most concrete laravel vue tutorial I've seen.. thanks man.. keep em up 😎😎

[@scrypster]

Best complement I’ve ever received ❤️ thank you!

[@akintadeajibade5744]

@@scrypster 😊

[@kddjk1]

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.

[@abdulrahmanali599]

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!

[@branimirdragicevic6014]

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

[@armanhossain7580]

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

[@aftermathpenaut6758]

You can create model, migrations and controller with a single command "php artisan make:model Item -cmr"

[@scrypster]

Definitely an awesome option!

[@md.abulkalamazad4965]

@@scrypster And also "php artisan make:model Item -a"

[@angelorigo]

Most clear an concise lessons i ever found about laravel and vuejs thank you for this tutorial

[@stefanilic4178]

What a video! For one hour, I'm learned so much stuff. Great tutorial, keep going.

[@nathanstanfordsr]

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.

[@LolForeverChannel]

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!

[@whitecountryoldroad]

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).

[@rashmifartode702]

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.

[@clydecalador]

Hands down best explanation I’ve seen! Subscribed.

[@eleetgeek5150]

Most comprehensive tutorial for a beginner!

[@muzika5001]

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! :)

[@mpuco11]

an actual useful video covering all necessary features, props

[@yunusalade6835]

You've done so well scrpster. Keep it up on laravel!

[@scrypster]

Thank you!

[@jarednthomas]

" "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')

[@dietervrancken1389]

Thanks bro

[@mikmiklanada6679]

Thank you. this worked :D

[@米亞樂樂]

thanks :)))))

[@23pointblank]

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.

[@darksoldader]

I've been looking for such a good explanation for a long time, thank you very much

[@tomosterlund6497]

This is a brilliant tutorial! My favorite online teacher in the PHP-spectrum so far :)

[@scrypster]

Thank you!

[@ganztv3106]

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.

[@virgiliustancu9293]

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.

[@scrypster]

Thank you. I believe you can all put the project path in “quotations” if there are spaces

[@millikin2099]

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!

[@cliffordmwale5782]

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

[@AlexG-wk3nh]

thanks for this information, what you you put instead ? or just leave it without a prefix?

[@kplsharma13]

Your tutorial and your beard both are fantastic.

[@humanbeing7624]

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?

[@asim-gandu-phenchod]

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

[@alpocalipse]

DUDE YOU ENLIGHTENED MY HORIZON THANK YOU SO MUCH

[@malikmudassarawan]

Thank God, some good English finally, been roaming for one which I can clearly understand. thanks bro

[@niazahmad1]

very good video the way of teaching is very attractive mush appreciated please carry on such video thanks again

[@borknagarchile]

Great tutorial and great teaching skills

[@Buildawesomewebsites]

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!

[@scrypster]

Thank you!

[@JohnSmith-zl8rz]

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!

[@scrypster]

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.

[@JohnSmith-zl8rz]

@@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.

[@RicardoRodriguez-jw1yk]

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?

[@mahdimiad]

Thanks for the video, my question is can we add authentication to API ?

[@scrypster]

You can absolutely add authentication if you’d like. I didn’t want this to turn into a 2-3 hour video so I tried to focus on core concepts for a todo list.

[@mahdimiad]

@@scrypster Thank you

[@IoTRepublic]

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!

[@mehdicharife2335]

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.

[@mouadjanah1618]

did you find the solution please

[@mehdicharife2335]

@@mouadjanah1618 Sorry, I don't remember. It's been two years.

[@cesarebich]

Man, why you've only 2.3k subs ?! Big up for you! ;)

[@lekhoi8]

Excellent video and to the point with best practice, thank you

[@jkpz10]

thanks man, this can help a lot for us still JR Developer.

[@tnorthern]

Any reason for not capitalizing first letter of components? Isn’t that standard?

[@anastasiaalexandrovna8061]

Thanks for video. It is clear and not very fast.

[@ashimmaharjan8079]

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

[@kordrijver9045]

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

[@kordrijver9045]

But still weird, because Scrypster does not use this in his webpack.mix.js

[@SandmanGeek]

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', [ // ]);

[@AngeloMesquita]

Great!

[@MikeAshelby]

I've tried adding that .vue() to the mix.js call, but still no joy in compiling. Any further ideas?

[@drksydedj]

This was exactly what i was looking for!

[@LevelUpJourney-d2d]

i have problem in compile Module not found: Error: Can't resolve '/vue/app'

[@sallarqureshi2703]

I am also facing this same issue did u solve it?

[@k.jflacko5720]

this is an amazing tutorial!. Helped me out a lot. Keep it up G.

[@FullMe7alJacke7]

Question, is there any particular reason you declared your routes individually instead of using laravel's "apiresource" Route type?

[@fidaeamok4864]

Wonderful video keep going i use it with vite it's cool thanks

[@maximmaximov4772]

really unusual seeing such complicated method of coding in laravel

[@rabbitpig9016]

Simple and perfect, great video and big thumb!

[@BenjaNetan]

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'

[@meimei-cd1je]

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", [ ]);

[@BenjaNetan]

@@meimei-cd1je Thank you @mei mei! It has worked

[@reckonroy7987]

@@meimei-cd1je Thank you very much you are life saver. this resolved my problem

[@marekjurica9098]

@@meimei-cd1je Thank you.

[@faizaljaleramadhan6842]

Thanks, you helped me learn web programming a lot!

[@voliteon]

Great vid, clear, succinct and really helpful. Thank you!!

[@JohnSmith-zl8rz]

Video start at 3:02 and Vue stuff start at 23:08

[@NoOne-qd2yp]

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?

[@scrypster]

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 🤔

[@audinmichelcastor3975]

Very very good!!! i like the way you explained, so good job!

[@thiagopetherson1268]

I'm from Brazil. Thank you very much!

[@chidiebere]

Thanks for the tutorial...How do you use states instead of emit ? If you can explain, thanks

[@iscjiha]

Thanks, do you have this in a git repository?

[@scrypster]

I don’t typically post the source code into git repositories. Sorry. Maybe I’ll start 🤔

[@sergeyk7285]

@@scrypster In vain, without the source code, it's all useless, especially since there are a lot of similar manuals with source codes

[@snovart]

Thank you for this awesome tutorial! :)

[@JavedBaloch786]

@Scrypster your way of teaching is amazing, can you make a video/project on AntDesign in Vue.

[@scrypster]

Thank you! I’m actually not familiar with AntDesign, but I will definitely check it out!

[@JavedBaloch786]

@@scrypster I saw enterprise companies using AntDesign with React and Vue. If would be great if you make something on it.

[@yvessomda4547]

Yes your tuto is really well explained, thank you.

[@reactify4719]

hey, can i use React with Laravel? or it is suggested to use Vue ? . thanks for feedback.

[@charlesloehle7998]

Very clear and concise! Thank you

[@tafappfabricadeaplicativos4470]

Hi Scrypster, First of all congratulations for all your videos , and thanks a lot. i would like to know why in my script i has to do this : axios.put('api/item/' +this.item.id,{ item:this.item notice if i not put (this.item) i get the error: ''ReferenceError: item is not defined " but you do not needed do that, you just ... axios.put('api/item/' +item.id,{ item:item ... why?

[@scrypster]

Good question! I would do it your way! I may have just gotten lucky. When I record these videos I typically do it all in one session and then edit out mistakes or trim things down. It’s possible I edited the video incorrectly which is why it appears not using “this” is working. But the way you are describing sounds like the correct way. Without rewatching the whole video to find out specifically it’s hard to say. If you can provide the time stamp in the video I can take a look at the code specifically.

[@tafappfabricadeaplicativos4470]

that is ok, thanks for answer me, the best luck for you.You are the best !

[@tigere01]

This is an excellent tutorial. Thank you.

[@M_BN287]

I learnt things from this, Thank you.

[@nishanmazumder6403]

love u bro. please make a complete e-commerce site...

[@quantumcd1045]

Thanks for the content, a great tutorial so far.

[@reckonroy7987]

Great man, this helped a lot

[@victoriacassolo]

Nice video! Congrats

[@rjmacalino3186]

stuck at installing vue? try this. >composer require laravel/ui >php artisan ui vue >npm i vue-loader >npm update vue-loader >npm install >npm run dev

[@victorparedes6887]

I feel like I'm pulling my hair out here. I'm using Vue3, so I'm not sure if that's the reason, but I"m at 1:00:15 and my list is throwing this big error: "[Vue warn]: Extraneous non-emits event listeners (reloadlist) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option." Can you let me know if It's just because of the version or if I should keep looking around for some kind of typo. I've gone over it close to 50 times character by character and I feel like I'm going crazy. Thanks for putting your time into this. It's very challenging, to be sure.

[@villianfadhilahareksa5553]

OMG!! Dude you are a life saver!!

[@donmikele07]

php artisan make:controller ItemController --api -m Item - THIS CREATE API RESCOURCE CONTROLLER AND IMPLEMENTS ROUTE MODEL BINDING. So this spares some time.

[@nicanorhuamanlima1472]

php artisan make:model Item -mr --api

[@buiquocanh3686]

Thank u so muck, for shared your knowledge 😍

[@mexantos]

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.

[@bigkbcao007]

Thanks for this awesome video.

[@user-gf3hf5ri8b]

Thank you for this video. we appreciate it

[@basicduck]

Ahhh. This is gold!!

[@Grovermol]

You helped me a lot dude, thanks !!