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

[@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!

[@hamdaniash-siddiq5021]

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

[@Sdirimohamedsalah]

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

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

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

[@gojamoja6719]

You are a blessing for laravel learners

[@shabastech]

the best 💯 so far

[@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!

[@LaravelDaily]

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?

[@muhammadharis-lo9nv]

Hi sir can you make tutorial review product laravel vue js pusher

[@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`

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

[@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!

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

[@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!

[@VadimBesedin]

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

[@emersonslvm]

Pretty nice video! Congrats, from Brazil 🇧🇷

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

[@the_coding_traveller]

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

[@windigo000]

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

[@mwacharojohn9318]

thank you saved me .several concepts in one video

[@aronpop1447]

Straight to the point man. No bs. Subscribed.

[@Jes14-t3b]

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

[@lakmalp]

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

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

[@angelo.piletti]

Excelente vídeo! Então eu não preciso fazer nenhum tipo de intalação npm ou composer para usar o vue no laravel ^8.x?

[@topmemesforyou5848]

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

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

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

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

[@ciaranslemon83]

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

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

[@hinafraz528]

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

[@caio.osalchesttes8791]

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

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

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

[@francisco25657]

This video is gold

[@masterpreshy9614]

Best Teacher!

[@АлександрАболмасов-т5е]

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

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

[@hasanchishti6428]

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

[@KangJangkrik]

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

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

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

[@jaker9007]

Huge thanks mate! Saved me a lot of time!

[@69aantu]

I find your explanation quite easy to understand. thanks. One question please, api return as { "data" : [ ] }. is it possible, return as { "categories" : [ ] } ? that means "categories", "products" instead of "data".

[@halilcakar5157]

Hey, yes it's possible. You can see on laravel.com/docs/7.x/eloquent-resources#data-wrapping from laravel source :) And you can even disable it too =)

[@69aantu]

@@halilcakar5157 thank you very much. I got it. $wrap.

[@LaravelLover]

Very clear explanation from scratch. Can you please tell me why some peoples are using Vue project and laravel project separately, they can fetch the backend info from the Laravel and get into the vue using api endpoints. What is the reason behind the scene, what is good practice to create the large application, Create a single application containing vue and laravel or separate applications for both?

[@PovilasKorop]

From what I've seen, that separation of the project happens in bigger teams when there is a separate person/team working ONLY on the front-end and works with only their part of the project, also if there's a mobile app involved or a bigger structure, then it's worth creating separate repositories. Otherwise, one single application is fine. But generally, it depends on how it is more convenient FOR YOU, not just "following good practice".

[@LaravelLover]

@@PovilasKorop Thanks Now I understood clearly.

[@edmartinez5345]

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

[@nabeelyousafpasha]

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

[@Daily-digital]

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

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

[@sfrzid]

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

[@ajithlal1688]

I was waiting for this video. You are awesome

[@jmahachi]

Firstly, many thanks for the great tutorials! Secondly, I wanted to know if it is possible to separate code from HTML in Vue.js with Laravel. For example, with Angular you have the .html file and the backend .ts file.

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

[@indrajitdas9595]

Hello Sir, your videos are awesome . I have a question on axios .How I can use a laravel named route in axios ? Instead of URL?

[@davidsyengo1893]

instant sub, great work, vivid explanation.

[@bhubanmalek4589]

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

[@aungminhein2178]

Easiest to understand ever

[@mateuspokemon01]

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

[@sagytt]

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

[@JohnSmith-zl8rz]

I prefer this way than Inertia or Livewire, thanks!

[@MichaelBrown-vq4fd]

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

[@dennisreetz8492]

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

[@arslanramay]

Thanks for this great and easy to understand tutorial. Can you please guide us how to add Auth & ACL to this Laravel + Vue app or which Auth package would you recommend with Vue to build a custom CMS application? Thanks

[@PovilasKorop]

There's no one way that is possible to recommend to everyone, it all depends on a lot of things. For technical implementation, see this video + Github: kzbin.info/www/bejne/bp7cgpeGgZ18Z9U As for which method to recommend, my colleague is writing an article about it, when it's released I will definitely publish a video, so stay subscribed to the channel.

[@jeevachaithanyansivanandan]

very detailed explanation : thanks

[@manojbist3793]

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?

[@LaravelDaily]

Search my channel for "vue", maybe you will find something: kzbin.info/door/TuplgOBi6tJIlesIboymGAsearch?query=vue - not sure what you mean exactly by "multi-page" project

[@programmingwithsami1]

Very very helpful ❤

[@nicolasgoosen5142]

Thank you, Povilas! Around the 5-minute mark, why use resources as opposed to using the $visible or $hidden model attributes?

[@PovilasKorop]

For more flexibility, because maybe you wouldn't want to have visible/hidden attributes for all cases for that model. I like resources because I know where to find those rules when I need them. It's like a separate layer for that specific purpose. Model properties are more like "magic" which other developers can miss if they take over your code after months/years.

[@nicolasgoosen5142]

​@@PovilasKorop Ah, okay - that makes sense. And in addition to the above I guess at least you're assured that you won't accidentally break anything else in the rest of your app, because the resource is used explicitly.

[@PovilasKorop]

@@nicolasgoosen5142 exactly

[@haziriamin]

Thank you.. very easy to understand..

[@freyarusso154]

Thank you so much for clear explanation!

[@lordgodgiven]

Hello, Great video, many thanks. I've a question, it's about laravel livewire, according to you what do you think about that if you compare it with vuejs?

[@PovilasKorop]

I haven't worked with Livewire on live projects, so can't give opinion on it.

[@ericksanabria5657]

Amazing job. Thank you

[@krisssachintha]

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

[@chablay1]

Very very nice tutorial.

[@debasisacharya3604]

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

[@rafa.alcantara]

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

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

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

[@saravanangilli007]

Excelent! Thanks for wonderful explaination.

[@mansoul3606]

Good explanation 👍

[@lasseron]

Thank you for the tutorial! What is the minimum Laravel version for your example to work?

[@PovilasKorop]

Not sure, I was doing it with latest Laravel 7. Shold work from Laravel 5.5, I think, cause that's when API resources were released.

[@geraldbustos]

Gracias desde Chile!

[@zhasan66]

Really awesome tutorial. Thanks.

[@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!!

[@kristiansibarani3084]

thank you, you deserve more subscriber

[@h.serhan9862]

You are the best!

[@damwrz5739]

Awesome tutorial!!! Great job, thank you.

[@kelvezu1585]

Hi Povilas. Can you do some videos about service container and service provider. How, when and why we should use it?

[@PovilasKorop]

Personally, I haven't done any work with service container directly, and haven't created my own service provider except for when creating packages. I prefer practical knowledge with how to create things than digging deeper into how those service containers work under the hood. If you want, I recommend the course laravelcoreadventures.com/

[@kelvezu1585]

@@PovilasKorop Thanks. 😊

[@pietrosavastano9940]

why dont u use npm run watch

[@sunnysk43]

As always great explained. Just one question: If I load a big page with your shown method, the page is requested and behind the scenes the api... That's okay, but It always takes a litte until everything is rendered. Isn't it a good practice, when you visit a page ( in your example the shop ), that you load the categories and products with php and hand them over by vue props and the API request is only done, when I for example change the category or change the sort order or something like this?

[@sunnysk43]

​@@davidbasil2727 Sounds good! Thanks for your evaluation!

[@PovilasKorop]

It depends on what you want to achieve. I see such way of loading, as in the video, like Google Analytics or another dashboard with a lot of "blocks", so the page itself loads fast (to provide the info to the visitor that "hey it's working"), and then data is loading a bit later. If you load categories and products immediately, then - in this case you don't feel that because it's blazingly quick - visitor needs to wait for all DB queries to finish before any HTML is downloaded. So if you look at it from that point of view, this example in the video is not the best one - loading without Vue is actually quicker. But I just wanted to take a very simple example. And David - yes, rendering with Blade makes sense if loading of the data is pretty fast and visitor doesn't have to wait 2-3 seconds. But of course, it depends on the situation.

[@sunnysk43]

@@PovilasKorop Thanks for the clarification! Great Videos! Love your Channel!

[@mahmoudjoumaa6692]

Thank you Mr. for such a lesson. Here something caught my eye, we can do the stuff you did like transforming fields or removing fields from the resource using the models accessors and mutators and we can hide fields using the model hidden array, so which method is better? your openion matters a lot for me 🌹

[@Paltibenlaish]

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

[@techman4396]

can you do same tutorial for Vue 3?

[@JohnSmith-zl8rz]

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

[@vanessakilo7822]

This is great! But I got a question: is it absolutely necessary to run npm to compile every component? Is there a way to avoid npm at all???

[@chetanrajput7018]

run 'npm run watch' after that you don't need to run 'npm run dev' every time

[@arturodelosangeles]

excellent tutorial, thank you

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