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.

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

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

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

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

[@remorechtzen5163]

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

[@VadimBesedin]

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

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

[@bogdanmarian3786]

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

[@emersonslvm]

Pretty nice video! Congrats, from Brazil 🇧🇷

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

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

[@aronpop1447]

Straight to the point man. No bs. Subscribed.

[@mwacharojohn9318]

thank you saved me .several concepts in one video

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

[@hasanchishti6428]

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

[@Sdirimohamedsalah]

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

[@caio.osalchesttes8791]

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

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

[@shabastech]

the best 💯 so far

[@edmartinez5345]

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

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

[@hinafraz528]

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

[@ciaranslemon83]

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

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

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

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

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

[@masterpreshy9614]

Best Teacher!

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

[@ajithlal1688]

I was waiting for this video. You are awesome

[@KangJangkrik]

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

[@Daily-digital]

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

[@mateuspokemon01]

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

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

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

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

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

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

[@nabeelyousafpasha]

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

[@edmartinez5345]

My API doesn't seem to return the "data" field described in 5:33...any idea how to put it in place? i upgraded from Larvel 5.5 to 6.0,I'm thinking it's because of this it may not be automatic. Help!

[@PovilasKorop]

Not sure, from what I remember API Resources had "data" from the very beginning, but you should double-check this docs page with choosing previous Laravel version, maybe you will find something: laravel.com/docs/7.x/eloquent-resources

[@edmartinez5345]

@@PovilasKorop Thanks!

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

[@dennisreetz8492]

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

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

[@topmemesforyou5848]

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

[@sagytt]

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

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

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

[@bhubanmalek4589]

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

[@rafa.alcantara]

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

[@MichaelBrown-vq4fd]

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

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

[@nataliapalweski2072]

Almost 100% of tutorial on google and youtube only talking about using VueJS as a component but sometimes we don't want to use VUE as a component we want only to use in Blade files for frontend interactivity. for doing this we separate have to call VueJS cdn and put in Blade files which is annoying.. is there anyway to load Vue js as library in laravel mixing and call "new Vue" in blade files?

[@JohnSmith-zl8rz]

why load the inside the body and not in the head like Laravel do by default???

[@iordanistsapanidis4021]

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

[@davidsyengo1893]

instant sub, great work, vivid explanation.

[@bassamdarawshi]

hi what if i have multiple component that need to get data from same request for example if i have multiple component that show info about product where to put the axios request or what is the best solution in this case?

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

[@freyarusso154]

Thank you so much for clear explanation!

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

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

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

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

[@krisssachintha]

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

[@saravanangilli007]

Excelent! Thanks for wonderful explaination.

[@pietrosavastano9940]

why dont u use npm run watch

[@vanessayessa842]

Is it possible to get vue inside laravel project without run npm?? Thanks!

[@debasisacharya3604]

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

[@BrnBar]

How can i use Vue-meta in this scenario? I can hardcode some meta information directly inside welcome.blade.php. Since, that is the first template rendered, it will load everytime. But then, if i want to make a dynamic title, how can i access to my main title which is coming from backend. Any idea?

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

[@byldeash]

can you do same tutorial for Vue 3?

[@programmingwithsami1]

Very very helpful ❤

[@damwrz5739]

Awesome tutorial!!! Great job, thank you.

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

[@aungminhein2178]

Easiest to understand ever

[@geraldbustos]

Gracias desde Chile!

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

[@KoganeNoYubi]

isn't it best practise to put it inside computed properties instead of methods and also wrap the v-for with a v-if categories? just to make sure the data is there when v-for is triggered?

[@PovilasKorop]

Your way is another way to do it, I agree. Not sure if it's the best practice, my goal in this video was to show the quickest path to start with Vue. From there, it could be improved, I'm sure.

[@kristiansibarani3084]

thank you, you deserve more subscriber

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

[@vipinfarswan6555]

Instead of resource we can use protected $hidden = ['created_at','updated_at'] in model. Which is better creating resource or just using member variable in model ?

[@DarkZeroVenarius]

You might not want these values to be hidden to your entire application, just the API part of it, together with the concept of transforming within the resource, that might be a bit cleaner for some

[@vipinfarswan6555]

@@DarkZeroVenarius okay 🤓..got it

[@JouvaMoufette]

@@DarkZeroVenarius I guess for simpler applications that aren't using toArray(), hidden would be fine though.

[@DarkZeroVenarius]

@@JouvaMoufette Yeah, I do not see any problem of using hidden if it doesn't clash with your application. I have noticed another behavior though, computed properties from the model do not get passed along when you just return from the model, that's also something you can use the resource for, ['computed-property => $this->computed-property']

[@YassineHAOUARI]

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

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

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

[@zayedmohamed737]

does this way affect the SEO of the website ?

[@limuelmendoza5356]

will this cause me to have an SPA website or will it remain the same normal website?

[@haziriamin]

Thank you.. very easy to understand..

[@sanjeetbisht]

What editor are you using for laravel?

[@andwutv6016]

How can i add security in public api routes? Only my front end client is allowed to access the request

[@LaravelDaily]

If it's public, then it's public. If you need to restrict it by some condition, you add the Auth middleware for it, or some other custom middleware by whatever condition you come up with.

[@andwutv6016]

​@@LaravelDaily is there a way that i can rateLimit the request in laravel 6 just like in laravel 8?

[@zhasan66]

Really awesome tutorial. Thanks.