From Laravel Blade to Vue.js + API [Live-coding Example]
Вставка
- Опубліковано 20 сер 2024
- For those who haven't started with Vue.js - you can watch me adapting that quickly, in 22 minutes, in (almost) live-mode.
We take a typical Laravel page of catalog with categories and products, and we transform that into Laravel API, then consuming it from Vue.js.
Repository: github.com/Lar...
Wanna dive a bit deeper into Laravel + Vue? I have a full 2-hour course with a practical project "Vue.js 3 + Laravel 9: CRUD with SPA": laraveldaily.t...
- - - - -
Support the channel by checking out my products:
- My Laravel courses membership: laraveldaily.t...
- Laravel QuickAdminPanel: bit.ly/quickad...
- Livewire Kit Components: livewirekit.com
- - - - -
Other places to follow:
- My weekly Laravel newsletter: bit.ly/laravel-...
- My personal Twitter: / povilaskorop
This type of tutorial is what i want. Straight to the point
My God...
This video should called like "Understanding the Laravel+Vue+Api in 22 minutes". This is the first vid in a million that i watched and understood all of the main point of these two frameworks.
Just awesome!
You are really the best teacher of laravel. U make things clear by doing simple things.
Your heart can hear exactly what beginners are suffering from....and you serve the needs. Thank you very much🙏 for the clear cut video you've done🏆.
Continue with your good work. Good luck.
You are a blessing for laravel learners
From the bottom of my heart, thank you, honestly, a big thank you! You once again helped me so much! I work hard on a project and am REALLY struggling sometimes, but your videos are awesome, they're giving me hope, it keeps me motivated, it makes me wanna keep on trying and moving forward. I will definitely subscribe to your courses to support you and what you are doing ! Best regards
Thanks for the video, Pavilas! Just wanted to note that you can also just run `npm run watch` instead of `npm run dev` each time. 😉
@Povilas Korop , Thanks for the video, Or u can `npm run dev` without each time run `npm install`
I find your explanation quite easy to understand. It will be much appreciated if you could make a tutorial series on vue.js.
Thanks, will think about it.
You are the best!! Thank you so much for this amazing tutorial. Developers like you are responsible for the success of so many other developers!
Great stuff!
I have been researching about this matter, and found a lot of videos but yours is the most clear and simple to understand.
Really, really good content, thanks!
Great! 99% of tutors don’t cover building project
thank you saved me .several concepts in one video
Clear and straight to the point. Thank you for your time and for sharing your knowledge!
15:18 - consistency 😁
1) data: function() { ...
2) mounted() { ...
I am paying attention sometimes :P
Very nice, view from the top to the key point instead of too much unnecessary details. The great point is it explains the relationship between blade and vue.js. Thanks
Wanna dive a bit deeper into Laravel + Vue? I have a full 2-hour course with a practical project "Vue.js 3 + Laravel 9 SPA: CRUD with Auth": laraveldaily.teachable.com/p/vue-js-3-laravel-9-crud-with-spa-and-auth?
Hi sir can you make tutorial review product laravel vue js pusher
actually made a tutorial that made me motivated to learn it. just simple and clear! Thank you for the good work!!
Thank you for having the patience to explain every step, this is a great tutorial !
Pretty nice video! Congrats, from Brazil 🇧🇷
Watching your videos is the best way to learn. Thank you very much!
I just starting reading about vue two days back and now this helps me alot as I already know laravel.
So basically mounted here stands for on ready similar to Jquery
Thanks
I love watching your videos. I hope you'll create one similar to this for Vue 3 in the future, if you have the time.
You are a real Hero. Thank you for this amazing video
I'm motivated now to learn SPA with Laravel and Vue, thanksss.
Straight to the point man. No bs. Subscribed.
It was super simple to understand yet informative and to the point
Best Teacher!
This video is gold
Npm run watch and you don't need to run npm install everytime
npm install isn't needed in any case, it's enough to run it just once. npm run watch actually removes the need to run npm run dev multiple times
It was simple and comprehensive.❤
Please make a video about livewire and its difference with VueJS in laravel.
Is it necessary to go to VueJS even though there is livewire?
And their relationship with AlpineJs
One change I'd make is wrap both method calls in the mounted function within a try catch block, and then set loading to false. that way, you'd ensure both api calls loaded before rendering.
O tutorial que eu precisava! O brasil te manda um beijoo
the best 💯 so far
I'm using both, for product listing blade is better and dynamic widgets (like graph and chart) only possible with vue. Perfect combo 👌
Thank you so much. Please keep generating great content! Cheers to you.
only understood your lecture, thanks, man. you saved me a lot of time.
Huge thanks mate! Saved me a lot of time!
Really really well presented tutorial. Great pace, easy to follow and clear!
Great tutorial! Thank you!
If you run in to a problem with the application not renewing. Check your cache. Quite obvious but I didn't think of it myself :D
I love this. very straight forward and understandable. Thanks. I will like to get a full course on Laravel, vue, Laravel vue. I don't mind paying
Thanks for this video, please do more on Vue.js + Laravel
Looking forward to your more videos relevant to VUE. Respect from Pakistan 🇵🇰
This is awesome tutorial, taking Vue like slicing cucumber with sharp knife, Very straight forward, We appreciate you so much, Pls help Us with a vidoe on the explanation of the vue Pagination part.
Great! That's exactly what I needed! Thanks for sharing!
Good tutorial, but you should put API calls in created, not mounted. Created is ran when the component is alive, mounted is ran when the DOM of the component is rendered.
Thank you.. very easy to understand..
thank you for another great tutorial. Really helps us beginners out.
I was waiting for this video. You are awesome
Easiest to understand ever
Great tutorial! Thank you. Straight to the point.👍
Thanks a lot for this example... very clear.
you saved my day, thank you so much. Liked and shared
I would be super interested in a video over the depths of statically including a model over importing through a constructor, really curious about the pros and cons of it
thanx man.. one of siplest tutorial... just at point...
instant sub, great work, vivid explanation.
Very very helpful ❤
Lovely. Thanks man, straight to the point. BOOM.
Hey, you are doing exceptional job by teaching us good stuff in latest framework. I would like to tell you could you please make vue js tutorial videos with laravel. From basic to advance level so user who know laravel but not vue js can learn that from your video and example like you make.
Hope you provide such a good solution for this.
Thanks, will think about it.
@@PovilasKorop I love how php master teach us js thank you sir
Amazing job. Thank you
Greate Video! You know how to pass knowledge very efficiently.
Thank you so much for clear explanation!
Thank you sir. I was searching for this kind of video and finally i got it. it helped me alots.
very detailed explanation : thanks
Я Английский сюда захожу подучить =) Идеально произношение! Спасибо!
Hi Povilas , Great tutorial, and I was wondering if you were going to follow it up with an insert / update example
I didn't plan to, but seems like the audience want more content about spa and Vue with Laravel, so yes will figure something out.
Awesome tutorial!!! Great job, thank you.
Excelent! Thanks for wonderful explaination.
That's really what I'm working for.. thank you!
Really awesome tutorial. Thanks.
thank you, you deserve more subscriber
Gracias desde Chile!
You are the best!
Just to be clear to all ppl starting, us dont need to run npm install && npm run dev each time you have changes, npm install muyst be run only for install the project or if u add new packages to the package.json manually
Very very nice tutorial.
great tutorial
I dont know what to say but Thank you! 😊 🙏
I prefer this way than Inertia or Livewire, thanks!
excellent tutorial, thank you
Verry usefull. Thanks
Amazing tutorial, ty very much! :D
grateful to You. Can we have a series of laravel 8 + react/vs with any live project tutorial...
Good explanation 👍
Yes. This is a good start
Muy buena explicacion Gracias.!
Oh nice topic ! Thank you
It will be nice to add a lazy loader for products so the user can actually see something fast
Thanks a Lot that was very helpful
That's loading state to false should be in finally scope, bcz when request failed that loading still show forever
yeah in finally block, but that should be just fine for starting point
Awesome video. I really needed a refresher in Vue, been 6 months since I used it with laravel.
Should just be able to use 'npm run watch' to have it compile after every save automatically yea?
Saves having to manually run the commands :)
Yes, good catch.
I'm starting not to use blade. I love how dynamic Vue is.
Can I install vue 3 with an existing Jetstream/Livewire project. I tried doing it, but getting a few errors. Will doing it collide with any internal configuration.??. Please help me out.
Thank you for this video
Thank you verymuch
I would love a tut like this about Laravel API + Nuxt
Big Fan of yours. Thank you for the tips and knowledge you shared. Can you make another video with, Laravel+Vue jS multi-page project?
Search my channel for "vue", maybe you will find something: ua-cam.com/channels/TuplgOBi6tJIlesIboymGA.htmlsearch?query=vue - not sure what you mean exactly by "multi-page" project
why dont u use npm run watch
The example works on a localhost, an error appears on the server
src="{{ mix('js/app.js') }}" Failed to load resource: the server responded with a status of 404 (Not Found)
How to fix it?
You are awesome
What are the benefits of using Vue with laravel? I assume you can do the same things right?
The only problem I see is that Vue uses axios and for laravel you need to use ajax.
Same question here. I've only browsed the Vue docs but I don't really see the point. Since I'm running a business, I don't see the point of learning another product unless it provides a more efficient & readable way to do something that I already do, or it provides a way to do something I *can't* currently do. Vue doesn't seem to meet either of those requirements for me. But I'd welcome the thoughts of others on this.
Sensacional! Muito bom!