Full Stack Vue.js & Laravel

[@ousmanetoure9011]

Bonjour Brad, en 45min tu m'as montré ce que j'ai pas pu élaborer après des mois de lecture des cours de VueJs, vraiment je ne pourrais te remercier assez. Tu es le meilleur prof que j'ai encore jamais vu sur le net. Grand merci!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@nyplace1]

No doubt the best vue to laravel video I have ever watched, no extra complexity, simple to understand the project that touches on all basics that one needs to know. Wow amazing presentation. My son is learning programming now and this video is perfect to continue his studies. Although I do some laravel programming myself, most of my projects involve developing in Java (Spring) :( , I am jealous of you people who get to actually code using this amazing framework, it actually enjoyable to code.

[@dassyboi6131]

Brad you are the best! Watching your tutorials are a pleasure, it's soo refreshing to hear someone speak about programming in such a clear and concise way that it makes sense to us novices. I studied programming at University in the UK and I got to say you've taught me more than the 3 years I spent there! Keep up the great videos man!

[@blazerowland3398]

This couldn't have been more perfectly timed for the laravel project I just started. I literally was 10 minutes into your vuejs in 60 minutes tutorial when I got the notification for this. Still going to watch both tho. Keep it up. Always wonderful content. Favorite teacher by far!!!

[@TraversyMedia]

Awesome. If you are new to Vue, I would definitely suggest starting with the crash course. I appreciate the comment :)

[@blazerowland3398]

I did! This tutorial helped reinforce what I learned there. Which is exactly what a good teacher should be doing. Tons of praise your way Brad!

[@kushagraacharya6279]

If you are lost while installing Vue for the project in higher laravel project do these 1. composer require laravel/ui 2. php artisan ui vue --auth Then you can perfom the npm install which shows in your terminal and then follow the tutorial again from 4:47

[@rosaclovis]

Hey Brad, this is the kind of intermediate/advanced content that I'd love to see in your channel. Thank you very much mate! Cheers

[@philanderson888]

Just worked through this on a MAC - worked flawlessly and very pleased how it all fits together so simply.

[@sangamadhikari8497]

Wow Brad, i have been searching over and over about a tutorial on Vue and Laravel. Can't thank enough.

[@sangamadhikari8497]

Liked the video so that i can watch it later.

[@StaySickGdl]

I took a Vue.js course at udemy but there, the teacher, as good as he is (thanks Max), didn't even explain a simple backend integration which is something very useful for someone like me who has worked as a developer some time ago, under different technologies or a novice. Thanks for this kind of approach...

[@CyJobes]

Thanks for the tut. While I still don't get all of Vue, YET :), you answered a few questions for me about how Laravel and Vue work. Plus, I've always used Jquery for AJAX, but your tuts have opened my eyes to Axios. I'm going to watch the video you mentioned at the start of this so I can understand what you are doing with routes/api.php. I've never known anything about it or what it does. Thanks again. You are really helping me, and I'll throw you a donation soon.

[@basantakc2168]

If youre useing larave 5.7 or 5.8 Vue.component('articles', require('./components/Articles.vue').default); make sure to add .default OR you can use import statements

[@JamesShisiah]

Just found this out, I think it's because of Vue 3.^

[@prathamkhand5048]

my and are not recognized

[@mimitk6642]

Hi, i'm using laravel 5.8 and in my meta last_page is missing, i'm wondering if you had this problem and how did you fix it ? Thanks

[@hatimfellak7286]

@@prathamkhand5048 did u find any solution ?

[@panjigemilang2077]

@@hatimfellak7286 u need to 'npm run dev' and there u go

[@ilyarablitip4636]

It's so nice.I just started laravel project ,but i'm not a backend engineer i just wanna learn laravel,appreciate this cource thx u

[@PR0D0T4]

Hey guys. I'm not so good in GIT, so I didn't know how to make a PR to the full project in this video, so I worked on it and made it on my own repository. Changes : 1. Edited the back-end, made it ultra-easy and improved. Also changed the route links convention to plural. 2. All controller methods are much cleaner and easy as possible. 3. Store and Update methods are separated. 4. Edited and improved the Article.vue component, separated Add and Update method. 5. Changed request method from fetch to axios (recommended to use & included by default in Laravel). 6. Now, after editing a specific resource on some page, after saving it auto-renders at that page. 7. Now, after deleting a specific resource on some page, after saving it auto-renders at that page. 7.1. If there are 21 elements (5 on page) there are 5 pages, and on the last one there are only one Article. If you delete him, remains 20 elements (4 pages), so it re-renders all automatically to the new latest page (4 from 4). 8. Modified href from '#' to javascript:void(0); so, it doesn't add the '#' to current URL, it just doing noting. REPO : github.com/priMo-ex3m/Laravel-API-VueJs-example

[@ridwangumz10]

thanks to share your project. i have been follow the brad project, but i found some bug (i guess). when i edit an article and then add an article i got an error.

[@KamalKhan-bc8lz]

After completing ur vue crash course headed right here, That's what looking for. Thank u sir :)

[@ridwanmaulanatanjung1198]

a little tip for 34:23 if you guys don't want the page moving to the first page after deleting, simply just add this as the parameter `api/articles?page=${this.pagination.current_page}` so your code will look like this : this.fetchArticles(`api/articles?page=${this.pagination.current_page}` );

[@orbitory7936]

if anyone is trying this with Laravel 6 you need to do install laravel/ui: composer require laravel/ui php artisan ui vue --auth

[@intellsoft]

Oh boy here we go

[@kennethpineda6143]

This is nice tutorial. Can we get a new updated 2019 version of laravel + vue? Would be nice if you used vuex, vue-router and vuetify. I wish you make that.

[@ankitchoudhary7593]

you are very supportive man ... keep going.. I am already recommending your channel to my friends

[@CodeWithMukeshBadgujar]

Searched Video, Open it, Seen Traversy Media >> Without Thinking Just Like It... :)

[@edmartinez5345]

I had trouble initially with the start up. (1) first, vue devtools mentioned that vue was detected but it cannot be shown because the site was at production mode. solution: restart your computer. (2) there was an error on the article that was not properly recognized by vue. I just added a the "default" in Vue.component('articles', require('./components/Articles.vue').default); and it worked. Awesome video!

[@zohairirani6133]

Hi, I am having the same problem with recognizing custom elements in Vue. I tried adding default but nothing changed. It's recognizing without registering with Vue.component() but not inspite of registering for some reason. Can you help out?

[@asimghafoor]

I have been through paid courses but this one was better than all.

[@quanchi88]

Still works in 2020, with Larravel 7. Good job.

[@mariusp7537]

It is so easy to understand if you are explaining, just awesome. thank you

[@MrMabdelaziz77]

Fantastic! I just was looking for a course like this, this video came in time! Thank you so much, your videos are helpful :)

[@messi8ballon_dor]

Thanks man, I like this video, It's easy to understand what the vue is and how to implement it with Laravel.

[@klukiyan]

Very good. I didn't like the add/edit form at the top and made it as a modal. However on "Save" the vuejs didn't want to be friends with bootstrap, so had to require bootstrap+vuejs package and make the form in there. It ended up working good. even very good

[@zohairirani6133]

For editArticles(), you are manually creating a new field inside articles {} object called article_id, this has 2 problems: 1. article_id variable defined in data() is not used anywhere. So no point in creating that variable. 2. After editing a post, when we try to create a new post, it throws an error, since it has one extra field in the articles object, article_id. To resolve this, use "delete this.article.article_id" before exiting the else block. Also we have to manually set this.edit = false before exiting the else block, otherwise, creating a new post will just edit the previously selected article since the edit value is still true and never set false.

[@shivamchhetri9893]

This is what i'm searching from morning and now you upoaded it. laravel + vue + api

[@CODINGISEASY]

good luck on learning!

[@novakevin]

Hey Brad, I noticed in one of your older videos you mentioned you preferred React over Vue.js because you had more experience with React. Has you opinion of either changed since then?

[@tallcoder]

Great question ... I tend to like Vue better. Worked with React first, but I tend to lean towards Vue anymore.

[@snoot_loops599]

I know this is old, but from my experience, React is better for bigger projects, and Vue is better for smaller projects. Vue can get extremely messy and harder to manage on a larger application.

[@CODINGISEASY]

i have used both and personally i prefer vue

[@tijubrains]

@@snoot_loops599 if you think that way about vue, then that must be because you don't know vuex.

[@AleksandarPanov]

@@snoot_loops599 Not true. :)

[@JamesShisiah]

This is the video I was looking for. Great work

[@andrewkiminhwan]

YES YES YES!!! Perfect timing brad, this is wonderful content! Thank you so much for your efforts

[@indrajitdas9595]

Just awesome ...It helped me a lot . Where is the next episode ? Can you plz tell me sir?

[@shubhamtarkar38]

Congrats in Advanced Brad about to reach 300k Subscriber in next ten days !!!

[@olosh01]

Man ... I can't explain... I was about to ask you to do full stack vue laravel project few days ago :) Consider making full course Vue-Laravel or even just Vue. Thank you!

[@sleepydev4700]

This channel is definitely help me a lot, thank's man

[@bulldog2024]

Great content as always Brad. Love your stuff.

[@nickstockley]

Lol I have been creating an app with laravel and partly vue just this last week. The vue part is working pretty slick now but I have stuffed so much code and functionality into one single component. I shall watch this before I open vs code tonight and hopefully learn how it should be done.

[@TK-ne1ku]

For those who have an issue that can't add new article after updating some articles, add these three lines above "alert('Article Update')" this.article.article_id = ''; this.article.id = ''; this.edit = false;

[@jantinnerezo5634]

Thank you so much for the useful, lifesaver and great content Brad!

[@RikakoDu]

[Vue warn]: Failed to mount component: template or render function not defined If anyone comes across this problem at 8:40, do the following in your app.js file. require('./components/Articles.vue').default The .default is required for it to work.

[@stormcorexz]

Hey Brad, thanks a lot for what you do to us, it is really one of the best channels ever, always my first stop to check for an answer :) would you pls make an sample project with vue router and vuex so i can grasp the whole idea because u know consuming an api with a separated front end need an extra router layer than laravel router, also working through components needs vuex as well.

[@iancarr3923]

Same as below - I have been able to make a fast start on a new project. Thanks!

[@ryankang1783]

Hey man, this is cool! Can you show us how to implement the Authentication to the application?

[@ambrosesulley2788]

Thanks so much Traversy your Tutorials help me out thru my carrier. If possible create for us crash course for data filtering using laravel and Vue.

[@aRookieProgrammer]

13:54 you could do Article::latest()->paginate(5)

[@vas.milivoj]

i was searcing for this these days, peeerfect, thank you so much :)

[@kingzeddicus]

Thank you for this helpful video. Subscribed! Hope to learn more from your videos in the future.

[@PatrickMacielCampos]

Thanks man. Direct, simple and functional tutorial.

[@wassim5622]

First of all, what a great course you are the best man ! second will there be a course using laravel with react, i think its gonna be a great course too

[@jaimarkenchi8373]

Wow Fantastic Tutorial, keep it up master

[@tandoku9133]

Loved the 2 video series of Laravel API and Vuejs. Thank you. Could you make a tutorial for Laravel Auth with vuejs. Where in action /login does not happen immediately on submit of form, but will first call a vuejs function then will "fetch" to the API. Many thanks.

[@josuebarros-desenvolvedorw2490]

Laravel and Vue are so cool!!!

[@lserranoit]

Thank you. You explain exactly what we need to learn

[@PR0D0T4]

Great video. It would be nicer if you use Axios instead of Fetches, since it's much cleaner to work with & it comes pre-defined with Laravel. Can you please make some videos not about how to put parts of applications in components, and then just collect them in a base page with html directives as , but making series about multiple components (with Laravel), talking to each-other as parent-child, child-parent, child-child? Thanks in advice!

[@HamKibz]

This is awesome. Keep up the good work.

[@pekakdogler3542]

Hey i'am using laravel 5.8, i have problem that i found on my code at 18:37, "Uncaught (in promise) ReferenceError: res is not defined" how can i fix this?

[@rhyzo1]

love the laravel videos, keep it up!

[@topsl69]

Don't we have to set this.edit to false after we did the request to update the article at about 43:45?

[@MJBlum]

Awesome tutorials Brad! But right now I'm confused what should I use. Maybe you can give me an advice what to do! My goal is: An Laravel backend and a web frontend application + a react-native app (both with authentication). Should I create the web application frontend with larvavel like you've did in the "Laravel from the scratch" series , or should I create a REST API and build a React or vue.js web application + an React-native app? Thanks for your help and keep up the good work!

[@curry5423]

其实laravel 和 vue 结合的核心是laravel官方已经帮你配置好了webpack，这样可以节省很多的时间，但是个性化配置有时候会受到一些小限制。。。到总体来说真的方便。 我比较喜欢接口直接用lumen😁

[@afnibi]

Im watching this in 2022, Thank you Brad.

[@irwinpalomo7212]

As always Brad, thank you very much.

[@nameless_space04]

Can you add a login function for this app? A new tutorial maybe? Thanks!

[@pranilrathod]

I recommend you to try to implement it by yourself.... Mr. Traversy does an excellent job explaining every core concept for anyone to build anything from scratch... and his main motto is teach people how to teach yourself.... I believe you can consume the concepts from the video and try to make use of it Goodluck!

[@CODINGISEASY]

you can use laravel passport or a package called jwt auth

[@bagussup]

Did you use another framework to fetch json? i have an exception on the res.json()

[@pablorosa3848]

Try using vue-resource

[@pablorosa3848]

laravel comes with bootstrap 4 by default. Take a look at your packege.json it has "bootstrap": "^4.0.0" and in your app.scss you have @import '~bootstrap/scss/bootstrap'; So, you can pull the /css/app.css file that is in your public folder. and use Bootstrap already

[@achuajap]

hello, got a little problem here, at 8:43, when showing the "Articles" content, it doesn't show from my side. Still a blank page, also noticed that in my Articles.Vue component, the tags color are all white.

[@Rockapotamus]

if your console log is showing HTTPS vs HTTP issues. Use, "secure_asset('js/app.js')" helper vs "asset('js/app.js')" as outlined in the video.

[@fikoredha5557]

Keep making content and sharing Your videos help many people May God Bless You :)

[@matiasolivera8909]

Love this kind of videos, awesome!

[@wiscatbijles]

I believe there are some errors in this component. If you try to edit something and then create a new article it will be buggy. 1. I think this.edit needs to be reset to false. 2. And also this.article.article_id is not right, this is not how you defined it in data where it is this.article_id. I've got the following code to correct it. So I put the article_id into the this.article object and added the this.edit = false. data() { return { articles: [], article: { //bound to v-model in this case id: '', title: '', body: '', article_id: '' }, pagination: {}, edit: false } }, addArticle() { fetch('api/articles', { method: this.edit ? 'put' : 'post', body: JSON.stringify(this.article), headers: { 'content-type': 'application/json' } }) .then(res => res.json()) .then(data => { // clear the form this.article.title = ''; this.article.body = ''; this.article.id = ''; this.article.article_id = ''; alert(this.edit ? 'Article Updated' : 'Article Added'); this.edit = false; this.fetchArticles(); }) .catch(err => console.log(err)); }, editArticle(article) { this.edit = true; this.article.id = article.id; this.article.article_id = article.id; this.article.title = article.title; this.article.body = article.body; }

[@bjornarmar2462]

Thank. You. So. Damn. Much. I've spent the better part of two hours trying to fix this, and this is exactly what I was trying to do. It's disheartening as hell knowing that I couldn't figure out the syntax on my own even though I knew the logic I wanted implemented. But at least it's fixed now! Thanks!!

[@TillyTheCoder]

Really cool video 😀

[@rockinrandalf]

As always Brad, thank you very much. Oh, by the way, you're affected by the "Semikolon disease in vue components" again, ... ;-)

[@jukkahautakorpi6407]

Thank you for great tutorial! Next video of this series could show how to add #page=2 and so on urls that the url would be also rest

[@atefrihane]

I did npm install, npm run watch... but why the vue file is in white text? is anything missed ?

[@kn7multimedia675]

example of retrieving the json data from show controller is not given in this video. is it available in another video series? and one more question, can it be retrieved from the same vue file as the crud?

[@chanthaofficial2898]

Wow, great video easy to understand.

[@eddielhs]

@Traversy Media you should consider installing JSON formatter plugin for your browser, it would help a lot when returning json from server... Keep up...

[@romeoasif]

Why I am getting this error after creating articles component Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[@prathamkhand5048]

same error how did u solve it

[@VadimBesedin]

@6:56 - Can we embed Vue components using just one (ending) tag, like this: ? Cause it works :) @33:33 - Why we need .then(res => res.json()) in the method: deleteArticle() ?

[@alitokmakc1678]

Well done! Great work! But should not we change the "this.edit = false" again after submit the post for update the article? Because if we don't change this.edit to false after update the article if we try to add a new article we cant because this.edit is not false. What do you think?

[@TheNation2013]

I am getting the error SyntaxError: Unexpected end of JSON input while trying to either add, delete or update ...... can somebody let me know what went wrong ?

[@tigere01]

If anyone is attempting this tut on Laravel 5.7, beware of the Laravel 5.7 Resources Directory Changes. @taylorotwell tweet last August 'Flattened the resources/assets directory into resources for Laravel 5.7' Solution is Running Mix laravel.com/docs/5.8/mix and then linking resources without the curly braces, so NOT but This worked for me when I had an issue of no data showing from console.log(res.data) in API call method @ 18:40

[@edunwa3679]

Great teacher thank you Brad

[@ilhamsaputrajati9767]

{{ asset('js/app.js') }} & app.js is including jquery & bootstrap right ? why u call again, and why u put window csrf token when u initialize with meta=csrf-

[@Colstonewall]

You da man, Brad! Thanks again.

[@TraversyMedia]

Thanks for watching :)

[@mabrarhassan]

The data is totally open in this application and can be accessed by unauthenticated requests. Please suggest the next tutorial. Thank you for so much great work!

[@zombiechibixd]

That you can learn yourself. This is just the basics References: laravel.com/docs/5.7/passport

[@amitshokeen7184]

Hey Brad, I just go through this whole tutorial everything works perfectly but I think you have missed/skipped the part. Once we set the Edit to true we are not making it false again after updating the value. With this it will keep updating the last selected articles data. Checking your other videos too, learned a lot through this video. I have a request too can you please add some videos on Create Wordpress plugins. Thanks

[@bjornarmar2462]

Dude, THANK YOU. I noticed this too only after playing with the app afterward. Your comment is exactly what I was looking for to figure out what was going on.

[@mahmoudfathy2074]

You got 00:09 wrong sir, We mean Laravel as a frontend to Vue as a backend . This is how you take challenges 😁.

[@zombiechibixd]

Oh no. Stop this madlad

[@dimitar1671]

should I add new action into articles controller if I want get some articles by additional param: by author_id (/api/articlesByAuthorId), by category_id (/api/articlesByCategoryId)?

[@agilasadi9642]

where is your csrf roken? or maybe even client token or something, how do you protect your post methods?

[@basantakc2168]

Isn't this value same inside the fetch and outside the fetch in fetchArticles() ?? is it necessare to save refrence to this value doing let vm = this?

[@Samit8400]

Hello Brad could you make an update to this important course on laravel and Vuejs

[@curlybracket3174]

Thanks for this awesome course

[@kcseforecast7580]

nice video kindly do a video on how to download a file from laravel backend api. Thanks in advance

[@stoevno1]

It will be nice to see a file upload video using Laravel & Vue.js... Maybe an addition to this video ;-)

[@CODINGISEASY]

i will try do one

[@alexyap4686]

hi brad. great tutorial! thank you. any chance you are going to extend this to add authentication in the future?

[@sarkersunzidmahmud2875]

thanks a lot for making this awesome tutorial.

[@TheCodebookInc]

Sir please add the authentication too for admins and guests

[@olegpristashkin9078]

watch in 2021. Still works (Laravel 7.30.4). Best regards

[@helloworld3914]

This is awesome, can we get a new updated 2020 version of vue+laravel? Would be cool if you used vuex and vue router too.

[@marendra1898]

could you please put a link for the previous video , i don't get it where is that file/list/article come from..?