From Laravel Blade to Vue.js + API [Live-coding Example]
HTML-код
- Опубликовано: 29 сен 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
Easiest to understand ever
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.
Great
is there any chance for using this cache with Query PDO?
Yes.. it is nice .....
2:12 "as good practice... controllers should be named in singular form..." then puts ProductsController lol
Question- will existing big laravel project based on blades (view) affects by installing vue.js for frontend.
Like wise - Existing routes will affect or any other controller issue?
For example- i want to create one page with Vue. Ratio will be 99% blade and 1% vue.
Will both are working fine?
Please answer asap...
Thanks
It depends on how you code it. Vue may conflict with jquery if you use it, your old Controllers may conflict with API Controllers if you miss some details. So it depends on your coding abilities, not on Laravel or Vue.js
@@LaravelDaily - conflict word makes sense. Thanks
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
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
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
Uh, setting loading to false in the resolve part of only one AJAX request is a bad practice. You should return the promise from both loading methods, wrap them in a Promise.all() and then, if both promises are resolved, set loading to false. That is the correct way. But to be fair: you're a PHP guy and not a JavaScript one ;)
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.
15:18 - consistency 😁
1) data: function() { ...
2) mounted() { ...
I am paying attention sometimes :P
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`
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.
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!
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.
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.
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.
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
Pretty nice video! Congrats, from Brazil 🇧🇷
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
why dont u use npm run watch
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.
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.
In 6:29 your advice is to store the price/money in Integer... but what if the new developer forgets to transform that and now your client doesn't have $10.85 but $1085 , that will be chaos ( U_U)
the best 💯 so far
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?
Good catch, my mistake there, since I was working on a local machine I didn't notice. It should be dependencies, yes.
Povilas Korop no worries, thanks for the clarification. BTW love your videos you do a fantastic job teaching Laravel enthusiasts!!
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?
Я Английский сюда захожу подучить =) Идеально произношение! Спасибо!
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?
Great! 99% of tutors don’t cover building project
Best Teacher!
actually made a tutorial that made me motivated to learn it. just simple and clear! Thank you for the good work!!
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
This video is gold
what if the first api call takes longer than the second one ? you would then display the page even if the first api call is still waiting for the data. I kknow this is a simple example, but you should at least mention that you need to somehow join on both api calls imo.
Nice video though :)
Clear and straight to the point. Thank you for your time and for sharing your knowledge!
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.
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 😃
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.
instant sub, great work, vivid explanation.
You are awesome
I'm starting not to use blade. I love how dynamic Vue is.
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!
grateful to You. Can we have a series of laravel 8 + react/vs with any live project tutorial...
You are really the best teacher of laravel. U make things clear by doing simple things.
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?
You are a real Hero. Thank you for this amazing video
How to work with vuejs inside providers directory in order to use view composers?
Thank you for having the patience to explain every step, this is a great tutorial !
will this cause me to have an SPA website or will it remain the same normal website?
thank you saved me .several concepts in one video
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?
That is SEO friendly?
you saved my day, thank you so much. Liked and shared
What editor are you using for laravel?
can you do same tutorial for Vue 3?
Thank you.. very easy to understand..
I dont know what to say but Thank you! 😊 🙏
Huge thanks mate! Saved me a lot of time!
You are a blessing for laravel learners
Amazing job. Thank you
does this way affect the SEO of the website ?
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 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".
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 =)
@@halilcakar5157 thank you very much. I got it. $wrap.
Thank you so much. Please keep generating great content! Cheers to you.
why load the inside the body and not in the head like Laravel do by default???
Verry usefull. Thanks
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
Is it possible to get vue inside laravel project without run npm?? Thanks!
Tkanks video ! Việt nam không hiểu chỉ xem thôi 🤣
I'm motivated now to learn SPA with Laravel and Vue, thanksss.
Your example of setting the this loading variable is wrong, axios returns a promise and there is no guarantee about which will finish first.
What you actually need to do:
- return both promise from their methods
- wrap them in promise.all
- define a then on the new promise to set the loading only after both of them are finished
Thanks for the notice! I agree it could be improved with your suggestion, but the goal with this video was to show the absolute beginners how Vue works in general, any additional theory about promised would be a step for overwhelming them. So, one step at a time, I will probably need to shoot followup videos or a full course.
Mmm I like your method rather than my method of simply using variables to track if they're all complete. I did catch the exact same concern you had and mention you needed to look for both callbacks to complete, but your solution is more elegant than mine.
Great! That's exactly what I needed! Thanks for sharing!
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!
Greate Video! You know how to pass knowledge very efficiently.
Thank you verymuch
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?
Thanks for this video, please do more on Vue.js + Laravel
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?
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".
@@PovilasKorop Thanks Now I understood clearly.
Very very helpful ❤
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.
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
good newbie tutorial, but you don't need to run `npm run install` every time you change your code, only `npm run dev` (or `npm run prod` on production). It's too much for a newbie tutorial, but the first thing to learn when dealing with multiple API call into the mounted() method is how to chain the API calls using axios.all() (or Promise.all() which is nearly the same)
Hello;
Thank you for share. Please can you show us an example of how to use laravel translation in vuejs.
Thank you and have a nice time;
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
Excelent! Thanks for wonderful explaination.
I'm using both, for product listing blade is better and dynamic widgets (like graph and chart) only possible with vue. Perfect combo 👌
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?
All likes and no dislikes.
Yeah after my comment there will always be that person.
Thanks a lot for this example... very clear.
Does the front component name on the div #app needs to be the same of Front.vue ?
No, div id="app" is for the whole application, and Front.vue is for , so in other words, front page is one level below the app.
You are the best!
It will be nice to add a lazy loader for products so the user can actually see something fast
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!
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
@@PovilasKorop Thanks!
Thank you sir. I was searching for this kind of video and finally i got it. it helped me alots.
thank you for another great tutorial. Really helps us beginners out.
thanks so much
EXCELENT!