Laravel 5.8 Tutorial From Scratch - e26 - Vue Basics 101

Vue is a modern Javascript framework that is powerful but yet simple to understand. In this episode, we are covering the basics of Vue by setting up a reusable button component. We will wrap it up by fetching some data from the Laravel backend using Axios.

Resources
Course Source Code

About This Course

Ready to get started on your path to Laravel Artisan? In this series, we are breaking down all of the basics of Laravel to get you comfortable using the world's most popular PHP framework. Let's get started!

[chimaonoh]

Thank you so much for just sharing your knowledge .... This means so much to me. I literally just wake up every morning and start digging on ur channel looking for new lessons from you... This Vue and laravel stuff is my dream .Good job !

[aaron]

I have experience with laravel + vue, I just came here to refresh of what I learn, btw your explanation is very clear and detailed at least to everyone on my level, although it's kinda not that easy for beginners to keep up immediately, but the overall insight is there. I love the way to break down things, keep up sharing your knowledge and good works!

[lambo]

I've watched the full 4+ hours instagram clone course you've made (obviously coded along with you, and managed to finish it). Actually, the explanation of the laravel things was so good and so clean that i've subbed and belled right away, without a single doubt. Now, coming into Vue Basics, I certainly gonna follow the whole rest of the series. I just know it's gonna be good

[christoherright]

You deserve more views. The quality of content is priceless.

[NitishKumarPatra]

I am surely going to be a life-long subscriber.. Clean explaination.

[isabelphillips]

Oh my God! You're just so easy to follow🥰🥰🥰 I'm new here and I will be here forever ... Great content!!!

[japalekhin]

3:02 no. the rule is actually: a component <template> must contain exactly only one child element. it doesn't have to be div, it can directly be a button. this is especially important if you're creating inline components (like badges) that can go between words of a sentence for example or an inline icon (fontawesome?). always having a div as the parent will produce a block component which can't go into a sentence/paragraph.

note: you can override this in the view/component consuming the component you're creating by setting the display to inline or inline-block and making the component an item of a flex or grid collection. BUT WHY would you unnecessarily always create a block just to potentially use it as a non-block? it's safer to just create a component according to how it should be displayed by default.

[shupesmerga]

I love this! this got me up and running in my frontend just right after the video. Just what I exactly need. I can't wait to finish my project and dig in further into vue. Awesome!

[jandublianski]

Clean and great explanation. Step by step. Thanks

[francescofucetola]

Hello, I have a problem with sue on safari. The control that I've been created isn't show

[johnnguyen]

Hi,
as you mentioned that by default Vue require Bootstrap and Bootstrap require Jquery. But when I try to put some basic jquery code below, I got error: Uncaught ReferenceError: $ is not defined. The error shows that Jquery is not included yet.
Could you please let me know how to check if Jquery got included or not, and if not, where/how to include it properly?


Really appreciate for any help!

[israaexo-l]

Hey there!
me and some of my friends have an issue, we've followed the exact same steps that you've described to configure vue.js and all but the button you first created isn't appearing to all of us, any suggestions about why the issue could be happening? thank you!

[JohnSmith-zlrz]

Man! your tuts are great, you explain so well.

[martins-ecke]

Your course is really well done and you have a very pleasant voice - subbed and registered =)

[boihuynh]

Hi! I love your Laravel tutorials, it is very easy to follow along and you are explaining everything so well. I have one question, are you going to teach us more about APIs in the upcoming videos?

[rebeka]

But how we can retrieve more complex data from our backend, for instance a post with all related contents and maybe comments

[seochanid]

I have an issue where the response from axios can't override the "test: null". So the button is showing an empty text rather than the response.data.

So the response is ok, shows "John Doe".

No error showing, so i'm kinda clueless. I even copy the script from your github and still get the same result.

[overlordmarvel]

i m getting these error ''Non-static method should not be called statically''

[wonderMaein]

I have an error "Call to undefined method

[DWR]

Although name of test appears on the button, I'm still getting:
[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of null".
Unless I add: v-for="t in test".