From Laravel Blade to Vue.js + API [Live-coding Example]

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

[@bru6626]

This type of tutorial is what i want. Straight to the point

[@sebot1]

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!

[@manishprabhakaran1561]

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.

[@hamdaniash-siddiq5021]

You are really the best teacher of laravel. U make things clear by doing simple things.

[@peo6264]

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

[@Sdirimohamedsalah]

Great! 99% of tutors don’t cover building project

[@gojamoja6719]

You are a blessing for laravel learners

[@tallaljamshed4880]

I find your explanation quite easy to understand. It will be much appreciated if you could make a tutorial series on vue.js.

[@PovilasKorop]

Thanks, will think about it.

[@the_coding_traveller]

actually made a tutorial that made me motivated to learn it. just simple and clear! Thank you for the good work!!

[@mwacharojohn9318]

thank you saved me .several concepts in one video

[@mauriciosorto8163]

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!

[@adriennecool69]

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!

[@Imagine51204]

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

[@BradleyAhrens]

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

[@MohamedZiada]

@Povilas Korop , Thanks for the video, Or u can `npm run dev` without each time run `npm install`

[@windigo000]

15:18 - consistency 😁 1) data: function() { ... 2) mounted() { ... I am paying attention sometimes :P

[@mydublue]

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

[@emersonslvm]

Pretty nice video! Congrats, from Brazil 🇧🇷

[@VadimBesedin]

Clear and straight to the point. Thank you for your time and for sharing your knowledge!

[@onessimuslyngdoh289]

Npm run watch and you don't need to run npm install everytime

[@Formula7Driver]

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

[@bogdanmarian3786]

Thank you for having the patience to explain every step, this is a great tutorial !

[@remorechtzen5163]

Watching your videos is the best way to learn. Thank you very much!

[@masterpreshy9614]

Best Teacher!

[@gurbeigekolekter8831]

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.

[@hasanchishti6428]

You are a real Hero. Thank you for this amazing video

[@francisco25657]

This video is gold

[@Jes14-t3b]

I'm motivated now to learn SPA with Laravel and Vue, thanksss.

[@shabastech]

the best 💯 so far

[@aronpop1447]

Straight to the point man. No bs. Subscribed.

[@lakmalp]

It was super simple to understand yet informative and to the point

[@KastsEcho]

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.

[@hesami13]

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

[@caio.osalchesttes8791]

O tutorial que eu precisava! O brasil te manda um beijoo

[@ciaranslemon83]

Really really well presented tutorial. Great pace, easy to follow and clear!

[@hinafraz528]

only understood your lecture, thanks, man. you saved me a lot of time.

[@jaker9007]

Huge thanks mate! Saved me a lot of time!

[@edmartinez5345]

Thank you so much. Please keep generating great content! Cheers to you.

[@aungminhein2178]

Easiest to understand ever

[@topmemesforyou5848]

Thanks for this video, please do more on Vue.js + Laravel

[@Michel39511]

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.

[@mateuspokemon01]

Great! That's exactly what I needed! Thanks for sharing!

[@eleadnetworks3876]

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

[@KangJangkrik]

I'm using both, for product listing blade is better and dynamic widgets (like graph and chart) only possible with vue. Perfect combo 👌

[@woutervisser5987]

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

[@Saikiasian]

thank you for another great tutorial. Really helps us beginners out.

[@PL4YR]

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

[@MrDLashley]

Hi Povilas , Great tutorial, and I was wondering if you were going to follow it up with an insert / update example

[@PovilasKorop]

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.

[@haziriamin]

Thank you.. very easy to understand..

[@user-og2gz7lh5t]

Я Английский сюда захожу подучить =) Идеально произношение! Спасибо!

[@taiwoolatmi3594]

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.

[@dennisreetz8492]

Great tutorial! Thank you. Straight to the point.👍

[@nabeelyousafpasha]

Looking forward to your more videos relevant to VUE. Respect from Pakistan 🇵🇰

[@ajithlal1688]

I was waiting for this video. You are awesome

[@Undercraftt]

Thanks a lot for this example... very clear.

[@davidsyengo1893]

instant sub, great work, vivid explanation.

[@bhubanmalek4589]

thanx man.. one of siplest tutorial... just at point...

[@programmingwithsami1]

Very very helpful ❤

[@ericksanabria5657]

Amazing job. Thank you

[@sagytt]

Greate Video! You know how to pass knowledge very efficiently.

[@rafa.alcantara]

Lovely. Thanks man, straight to the point. BOOM.

[@freyarusso154]

Thank you so much for clear explanation!

[@debasisacharya3604]

Thank you sir. I was searching for this kind of video and finally i got it. it helped me alots.

[@krisssachintha]

you saved my day, thank you so much. Liked and shared

[@niketjoshi5877]

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.

[@PovilasKorop]

Thanks, will think about it.

[@daviddeleon3411]

@@PovilasKorop I love how php master teach us js thank you sir

[@javascoutfootball]

That's loading state to false should be in finally scope, bcz when request failed that loading still show forever

[@aqshalzakki2526]

yeah in finally block, but that should be just fine for starting point

[@damwrz5739]

Awesome tutorial!!! Great job, thank you.

[@h.serhan9862]

You are the best!

[@carlosquintero1968]

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

[@RadomPlayers]

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.

[@ShabbeyRoadMusic]

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.

[@jeevachaithanyansivanandan]

very detailed explanation : thanks

[@Daily-digital]

grateful to You. Can we have a series of laravel 8 + react/vs with any live project tutorial...

[@zhasan66]

Really awesome tutorial. Thanks.

[@saravanangilli007]

Excelent! Thanks for wonderful explaination.

[@YassineHAOUARI]

That's really what I'm working for.. thank you!

[@kristiansibarani3084]

thank you, you deserve more subscriber

[@JohnSmith-zl8rz]

I prefer this way than Inertia or Livewire, thanks!

[@djnkuli]

I dont know what to say but Thank you! 😊 🙏

[@manishprabhakaran1561]

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.

[@kelvezu1585]

I'm starting not to use blade. I love how dynamic Vue is.

[@403gtfo]

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

[@LaravelDaily]

Yes, good catch.

[@marilenaarsulescu]

great tutorial

[@Paltibenlaish]

It will be nice to add a lazy loader for products so the user can actually see something fast

[@technocoh]

Amazing tutorial, ty very much! :D

[@chablay1]

Very very nice tutorial.

[@arturodelosangeles]

excellent tutorial, thank you

[@pietrosavastano9940]

why dont u use npm run watch

[@cyrillembia]

Verry usefull. Thanks

[@curiousbd8115]

You are awesome

[@tannercampbell]

Why do you install Vue.js in the devDependencies and not the dependencies? Doesn't that require an additional npm command when running the application in a production environment?

[@PovilasKorop]

Good catch, my mistake there, since I was working on a local machine I didn't notice. It should be dependencies, yes.

[@tannercampbell]

Povilas Korop no worries, thanks for the clarification. BTW love your videos you do a fantastic job teaching Laravel enthusiasts!!

[@JohnSmith-zl8rz]

I would love a tut like this about Laravel API + Nuxt

[@geraldbustos]

Gracias desde Chile!

[@merahsamia9785]

Awesome!

[@copinman]

Hi, im kinda new with blade and laravel but im been doing some complex stuff too yet does anyone can explain to me why use vue.js instead of the simple blade syntax that doesnt need to compile. Thanks 😃

[@ShabbeyRoadMusic]

Good question. I always wonder about these tools that keep coming out that don't seem to do anything new. They just seem to do what something else already does in a different way.

[@mansoul3606]

Good explanation 👍

[@technozoon4087]

Thank you

[@ridwanhaqi6834]

Thank you verymuch

[@sergeyk7285]

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?

[@flashbangstudio9102]

Oh nice topic ! Thank you

[@andrewbookamba7674]

Thanks

[@shohanhossain8280]

Yes. This is a good start

[@iordanistsapanidis4021]

How to work with vuejs inside providers directory in order to use view composers?