Guys, check out www.netlify.com, not just because they sponsored this video but because it is literally one of my favorite platforms for deploying static sites and front end apps. Any sponsor I have, I believe in and believe they benefit my audience. The free tier is incredible and easy to use.
Helped me too, I mean, what Brad shows works also fine, but beginning from 45:34 it helps to add your suggestion into the code. rather than Brad's. But both work, your suggestion is shorter. Thanks.
@@Universestyle When you click button [submit] or [whatever], the default is send the form. Use prevent for blocked this default. Use addTodo for do what you want.
So basically now you're redoing all the crash courses, Great Job, actually that is what we all need. There were a lot of new additions in these technologies since your last courses.
@@nadir2k Absolutley never...I always and will always consider myself a student because things are always changing and you have to keep learning to keep up
You are actually the best. I have never learned a framework in 1hr. I just followed this crash course to the end and now I have a next project I am writing in Vue. Thank you so much.
If anyone is still having trouble with uuid not being found, use vue-uuid like this 1. run - npm i vue-uuid 2. in the script block add the following import - import { uuid } from 'vue-uuid'; 3. Save file It should work. Awesome crash course as always!!!
Brad, You're a truly good man. I'm a self-taught developer and I've been Coding less than 18 months. Your tutorials have not only helped me get a job as a developer, but they are helping me keep at the top of my game, and continuously progress myself. I can truly say of all the content I've consumed in my short 18 months of coding, your tutorials always come out on top.
Brad you are the man!!! been following you for about 2 years, and now you're almost at 1 million followers! crazy.. anyway, I followed this tutorial and found a warning when implementing the deleteTodo with the axios json. this line > .then(res => this.todos = this.todos.filter(todo => todo.id !== id)) I was getting the warning that res was defined but not never used... so I fixed it, by just passing it at the end... like this> .then(res => this.todos = this.todos.filter(todo => todo.id !== id, res.data)) anyways hope this helps someone out if they encounter the same thing.. Cheers and thank you for your amazing material!
Hi komplex, it solves the error for me as well! Thanks But I actually dont understand this part, can you please share what the comma means in the code?
You can also do this: .then(res => this.todos = this.todos.filter( res.data.id !== id )). This way you're actually using the response you're getting. You look at the data that's retrieved which is a single todo and then compare its id property to the id of the todo you deleted. Then the filter method filters it out
If you ever question your life I hope you don't because you've been so much of a help to the community and everyone in a way most people wouldn't do, I love your content man please keep on the good work, absolutely no one does tutorials the same way you do. Congrats on 600k subs! Do some Laravel + Vue.js ;)
I'm trying to imagine what would justify anyone giving this video a thumbs down. This is one of the very best UA-cam videos I've seen and I say that as a professional IT instructor. I also happen to be new to Vue.js, vue cli, and VSCode yet after watching this video - and following all the instructions very closely to get my own copy of the app running - I feel like I have a strong working knowledge of how to use these tools which were so unfamiliar just a few hours ago. The course is first rate. It includes exactly the sorts of things I needed to know to get started with Vue.js and VSCode and doesn't throw in a lot of fluff. Everything is explained in a level of detail that was just right for me. The ongoing exercise seemed to be just the right level of difficulty for a beginner like me. I still have lots of learn but I feel like I will be able to learn it with the help of this video, other videos by the same (and different) presenters, and some one-on-one help on the Vue.js forums. Thank you VERY MUCH, Brad! If I could give you 10 stars (out of 5), I would but I gave you what I could, a like, and I clicked the Subscribe button. As far as I'm concerned, this course sets the standard for what ALL video courses should be.
Brad helped me do my undergrad project through his Laravel crash course. I also sold a modified copy of the same to a classmate for $50-haha . And now two years into full-time employment, he still teaches me a lot of new stuff I apply at work. Thanks Brad! Keep up the good work.
@@tmattoneill because not everyone does the practicals, i am here to see what is Vue; since i am working on Generating JS from Rust, am researching to find out if these Frameworks give me any advantage over generating VanillaJS. :-)
Not bad, not bad at all. I watched this course a few weeks ago, and along with the official documentation, I converted one of our Dashboards (originally written in Angular 4) to Vue.js. Now Upper Management has given the go ahead to do all of our upcoming projects in Vue. Without saying exactly who I work for, it's one of the largest cable and broadband providers in the country. This tutorial took the sting out of the learning process. I can say this much without hesitation - it beats all the versions of Angular, hands down.
Hello, Brad. You've saved millions of minutes that people may have spent to crawl documentation and learn all you say. Thank you, you're doing great job.
Wonderful crash course. Your approach worked for me. You started from an empty slate all the way to a simple functioning app without leaving out some often overlooked set up nuances. I have watched quite a number of these crash courses and I was left with knowledge gaps. You started with the basics of installing Node and NPM for example and worked your way all through configuring the IDE using extensions. This was excellent for me. This crash course is my reference point for some basics in my journey to learning more about Vue JS. Great job and thank you for taking the time to do it. Look forward to more of your courses.
Thanks Brad, ever since i found your channel my web development skills have improved tremendously. The way you teach its quiet clear that you seek to impact lives.
Nice video! By the way, the checkbox "markCompleted" function (33:50) is now considered as an anti-pattern and has been deprecated in Vue 3.0, because it modifies props in the child component. It's a good exercise for audiences to change this part using @emit.
You are the reason why I removed the AD BLOCKER so that you get money from the advertising, unfortunately I do not have a credit card otherwise I would be a patreon of you!!! Thank you very much for all your videos !!! Best ever !!!!!!!
I've watched quite a few tutorials on the web, and all those guys(authors) are definetely specialists in their area, no doubt. But ony few of em can teach and explain really well. You are a good teacher, man. I enjoy your videos, thanks.
Great video, one thing I would change. Your variable / component names are very confusing (Todo, Todos, etc..) if you made those more distinct, it would be much clearer which item was being referenced at all times
Totally agree. for me it ruined a large part of the video. i ended up having to rewatch again and again. Please change the variable names. it is proper programming convention
I agree but that actually helped me more than I thought! I've done this myself and that way I started playing with the code and understood how the data is linked to each other :)
I like Vue the most because of how it splits everything into components BUT in the components, it goes into Template, Scripts, and Styles. React doesn't separate these as well and it has a bunch of unnecessary files (from create-react-app).
If created is not firing, it may be because you put that method in the methods array instead of it being at the same level as methods. Lifecycle hooks (created, mounted, etc ) have to be at the same level as "methods".
The error is coming from ESLint. To prevent the error, you can add "// eslint-disable-next-line " (without the double quotes) right above the line of code causing the error (witch I believe is the .then() method). You can also disable the rule in the Vue UI in Configration > ESLint Configuration > "Rules" tab > vue/no-unused-vars, and change the "Error (Default)" to either "Off" or "Warning". I used the // eslint-disable-next-line, but then I found the plugin configuration a couple of hours later.
@33:22 - If the project fails to compile in Vue.js 2.x when using vue/cli@^4 after adding line 15... ``` methods { markComplete() { console.log(123) } } ``` ...just add `window.` before `console.log`, so that line 15 reads `window.console.log(123)` instead. Problem solved.
At 59 minutes, if you're getting an error: 'resp' is defined but never used. We can actually change the resp to an empty parenthesis () to remove the eslinting error.
First - love this video and really appreciate the time you have invested in taking us through this. Thank you! :) Second - thank you Vue for the developer extension in chrome - without that I would have spent even more time debugging.. word to the wise - install that :P Last but not least, for those that may be using the latest Version of Vue and struggling with emitting events to the parent app component, I found that: - the click event on the TodoItem component worked well as noted in this video (using the parameter todo.id) - emitting the event from Todos to the app root required me to pass $event as the parm (not the todo.id) in both the Todos and App components I wanted to share as this took several hours of trial and error, countless searches on the web, perusing stack overflow, vue's docs and, of course, some censored words aimed at the monitor here and there :oP I"m very new to this framework, so it could be some kind of version issue.... either way, I thought i'd give back here with a solution to what others may run across
Would you mind sharing the element's code that got your passed this point please? I'm currently getting `TypeError: Cannot read property '$emit' of null` when attempting to delete.
Thanks for another nice vid! I already have experience with VueJS so maybe this video is not for me, but I've started my "VueJS career" from your previous VueJs starter videos. And your vids helped me a lot! Can I make a small notice here? 28:03 - actually, we don't need that extra wrapper element here now, because we can iterate that component directly. You can replace this: with this: That's because your component already has its' own wrapper inside a component code. So your rendered HTML will be something like: Todo Item instead of: Todo Item I do not criticize your video, but it may be useful for beginners. Thanks again, Brad!
Thanks Brad. One thing that helps me understand a bit when learning a new framework is to comment near every appearance of one of the framework's function. Like ```//vue method data(){ ... }``` My first gotcha moment was when I finally understood where basic JS stops and where you are calling lets say a React method like render() etc, the separation of what is vanilla and what is a framework/lib is important to understand in my opinion.
Thank you for making it so easy to compare Angular, React, and Vue. Vue seems much smaller because it installs centrally (I think), but here's what I saw in terms of files on disk: Angular: 29,000 files = 292MB for the project; dist: 22 files = 18.3MB React: 28,200 files = 119MB for the project; dist: 14 files = 723k Vue: 209 files = 7.28MB for the project; dist: 9 files = 824k
You can also toggle the 'completed' attribute by adding v-on:click="todo.completed = !todo.completed" on the input tag, I'd say it's a cleaner approach.
33:37 Any idea how to solve this error with console.log(123) when I was testing it out this appeared -> Unexpected console statement.eslint(no-console)?
I was just recently introduced to Vue. Currently building my website with it and changing out of notepad with a new design. Great video. You keep it simple and its easy to keep up with you. This helped a lot. Thanks.
You have become my Guru(Teacher). The way you explain things are fantabulous and easy to understand. A big thank you from the other side of the world :)
This is a wonderful crash course. The very first time my life I wrote a frontend app and really enjoyed the way you explained. Thanks for your amazing work. One quick note in AddTodo.vue uuid.v4() doesn't work. It seems I am using v12.16.1. I had to use import { v4 as uuidv4 } from 'uuid'; and id: uuidv4 in addTodo() . Once again thanks.
If for some reason you just installed vue-router before hearing that it was going to re-write your App.vue, you should be able to just ctrl + z and get the code back for your App.vue - Thanks for the all the great tutorials Brad! Whenever someone asks me where I leanred, I direct them promptly to your channel. I'm not sure if I would of gotten to the point where I was able to get my first dev job 3 months ago without you!
One of the best tutorials I've watched, seriously. Coming from a PHP background and picked it up exactly at the right tempo and learned some ES6 stuff at the same time.
@TraversyMedia, Great Video, I am eagerly Waiting for Vuex Crash Course. I have a small project to manage my ERP and I am thinking to use Vue.js for that. Its basically an admin Component.
This video is really awesome and clean. I just got the overview, the basics of Vue, CURD, and API interaction in just an hour. Thanks you are awesome :)
To keep the checkbox from reversing the functionality when loading a todo that's already completed. You can use v-model="todo.completed" on the checkbox, instead of referencing the markComplete() function. That way it's conditionally bound, similar to the "is-completed" class condition.
59:20 - Kept getting an error about res being instantiated but never called, and one of the below solutions resulted in a similar error saying that todo was instantiated but never called, and one of the other solutions simply broke the delete method entirely. Here's the one resolution I found that works the best: deleteTodo(id) { axios.delete(`jsonplaceholder.typicode.com/todos/${id}`) .then(() => this.todos = this.todos.filter(todo => todo.id !== id)) .catch(err => console.log(err)); }
Hey! I think this makes a bug... when you enter several of your own TODOs, and then try to delete one of them, it bulk deletes all of the ones you entered
stackoverflow.com/questions/55505768/multiple-todos-in-todo-app-getting-same-id-from-json-placeholder .... may be because of this.... I will investigate
Any chance you could do an intermediate-level series for Vue/Angular? I feel like everyone only focuses on these introductory level videos but I would love to see some of the more advanced features of these frameworks as well. Cheers, and happy 2019!
Love your style. I'm just a newbie as I just landed my first front end development job and your method of teaching is working well for me after hours learning. Thank you!
With both frameworks and languages, once you learn two, you start to see they are all pretty similar there is just different terminology and syntax. The core concepts are the same or at least pretty close
@@TraversyMedia First I've seen such a recent comment from you so I'll take this chance to say thank you hoping you will see it. You have single handedly helped me through a very bad time in my life and also helped me find a job I'm so incredibly grateful. I owe it all to you (and some of the design / styling tips with travis@Devtips). I haven't stopped learning from you either, the learning continues with vuejs! Thanks a lot man.
31:30 to toggle complete and incomplete. The example used is somewhat problematic. Notice that Todo 2 which start as completed have the checkbox still unchecked. You can do the whole thing without writing the markComplete method. Just do the checkbox like this:
When coding deleteTodo(id), it always shows " error: 'res' is defined but never used (no-unused-vars)" and cannot compile. My code is the same as yours.
That would be because you are defining res but never use it in the callback function and no-unused-vars does not like that. Replacing res with () or disabling no-unused-vars should fix this.
You can also use res in the filter method by replacing the arguments to the filter method with ( res.data.id !== id ). Now you're checking the id of the todo that is returned from making the call to jsonplaceholder.
Global installation requires admin permissions. You can install Vue CLI locally by removing global attribute `npm i @vue/cli` and then run `npx vue create test` to avoid running it from the root.
Hi Brad, I have seen many of your previous videos, and i have learned perfectly with vuejs-cli. I have worked 3 years in Angular2+, and now i am switching to Vuejs. I think VueJS is mixture of Angular and React. Thanks and be there for more videos like this.
I hate to be that guy, but I really find this tutorial hard to follow. I think it's a bit too confusing with how the naming of things went. It really made it hard to really understand what was happening for me and how we're supposed to piece components. EDIT: Like with how we have a file called Todos TodoItem then theres a todo prop and a todo-item class.
This does make things a bit confusing because it's hard to understand how different variables are referencing each other and what exactly is pointing to what.
I think thats the right way, because the name is on the convention that we use in our day. If your dont get used to it, just try to make a project naming every thing "button-add-todo-emitter-son" "button-add-todo-emitter-final"
If you think you can create better free material, help yourself. Brad does a great job explaining the basics and showing how the pieces tie together. Extremely nit picky feedback.
These videos teach the essentials of web development tools really well. Thank you. I usually code along with the videos instead of looking at the source on GitHub. There are a couple of things I usually modify when coding along. (1) I'm a fan of longer, more descriptive variable names. They usually help me better understandwhats going on rather than seeing "todo" or "todos" a lot of places. (2) I usually see a lot of divs that don't really wrap contents with purpose, they just kind of exist. In a component like AddTodo, it's ok to have just the form on its own in the template. Another example would be using v-for on a component. For example, in Todos, you can use v-for=todo in todos" when embedding the TodoItem component and also v-bind:todo="todo" to pass it as a prop. In general, I find the generated HTML content is much cleaner to look at if you can avoid using divs that don't need to be there.
@@DistantComputer In that case, you'll have to put it in every directive calling this method, right? If so e.preventDefault() seems better for encapsulation.
Hey, I can understand where you may have gotten confused. However, if you follow real close, you should be able to differentiate the identifiers despite there being multiple plays on the word "Todo"
When I see 500 thumbs up and 0 thumbs down, I feel so great as if it happened to me, because Brad, you really deserve it. You are a good teacher, overwhelming majority of your content is free and you are really a great guy. Keep doing this great work for the community and I wish you all the best in the years to come!
Awesome crash course video - you explained all the basics so well and happily not just on a helloWorld project but a real app! Great job, keep on the good work!
Wonderful course, you made us to watch till end, you exactly knew how to proceed and what to cover in an 1 hour video. Thanks for such useful beginner crash course.
Thank you very much !! Thanks to your crash courses for React, Angular and Vue, i got an idea about their concepts and it made it clear for me to choose the one i feel more comfortable with !! 🙏🏻
Just a friendly heads-up, for anyone having issues with the CLI in Jan 2020: There's an error when using the scaffolding tool alongside some older versions of Node, so make sure you're running at least 13.1 of Node if you find yourself getting a lovely, very verbose build failure message when trying to run the basic serve command as I did earlier this afternoon.
For anyone wanting to know how to do a default completed of true and make the class styles/check sync together. Inside of TodoItem --> Remove the onchange method and just add
Guys, check out www.netlify.com, not just because they sponsored this video but because it is literally one of my favorite platforms for deploying static sites and front end apps. Any sponsor I have, I believe in and believe they benefit my audience. The free tier is incredible and easy to use.
They are really good! My first static site is still hosted by them 😁
Next do a django crash course please
Django crash will be updated to 2.x soon
So, netlify supports you, and you should make a "Netlify CMS" video!
Netlify is solid. Best kept secret in the industry.
Slides:
0:56 - What is Vue?
1:18 - Why use Vue?
2:37 - What you should know before learning Vue?
3:10 - Components
4:39 - Anatomy of a Component
Setup:
7:20 - Installation
8:46 - Create an app through Commandline
10:37 - Create an app through UI
Coding:
13:10 - Brief review
19:25 - Data
21:35 - Creating "Todos" component
26:05 - Creating "TodoItem" component (nested)
27:20 - Outputting TodoItems
29:30 - Implementing 'is-complete'
31:35 - Event (checkbox)
34:35 - Deleting
39:47 - Adding a header
41:45 - Adding a form
43:53 - Fixing the button
44:20 - Adding functionality to AddTodo
50:33 - Http Requests:
53:25 - get
55:25 - post
58:30 - delete
59:37 - Vue Router
1:07:09 - Build
This deserves more likes people
Wow. Thanks
They need to pin this comment, thank you so much!
Legends never die
tnak you verymuch
In case someone has issue there: 25:22
I just spent 40 minutes to troubleshoot why it was not working. I see I should have watched the video for 15 seconds longer last night...
sweet. Thank you!
I am SOOO glad you mentioned this. I almost threw in the towel. :-)
Thanks man, that helped a lot.
Thank you, this really helped, was stuck for a while.
Minute 50:
Other method to prevent form default is add 'prevent' after @submit
Example:
Agreed, I just read up about this also, much better way to do it and should be mentioned!
Nice tip
Helped me too, I mean, what Brad shows works also fine, but beginning from 45:34 it helps to add your suggestion into the code. rather than Brad's. But both work, your suggestion is shorter. Thanks.
Can someone explain to me, in more detail what "prevent" does and why we need it, and why there is an "e" in "addTodo(e)?
@@Universestyle When you click button [submit] or [whatever], the default is send the form. Use prevent for blocked this default. Use addTodo for do what you want.
So basically now you're redoing all the crash courses, Great Job, actually that is what we all need. There were a lot of new additions in these technologies since your last courses.
Yes, all my crash courses were out of date using older versions. Also I have grown as a developer since then
@@TraversyMedia When exactly does a developer reach the peak point of learning :D
@@nadir2k Absolutley never...I always and will always consider myself a student because things are always changing and you have to keep learning to keep up
@@TraversyMedia Please do a dart or flutter crash course, thank you very much!
@@TraversyMedia I love your work... thank you so much for sharing your knowledge in such easy way
You are actually the best. I have never learned a framework in 1hr.
I just followed this crash course to the end and now I have a next project I am writing in Vue.
Thank you so much.
If anyone is still having trouble with uuid not being found, use vue-uuid like this
1. run - npm i vue-uuid
2. in the script block add the following import - import { uuid } from 'vue-uuid';
3. Save file
It should work.
Awesome crash course as always!!!
47:20 substitute with: import { v4 as uuidv4 } from 'uuid';
and then in the script: id: uuidv4(),
thank you for this >.
import { v4 as uuidv4 } from 'uuid'
id: uuidv4(),
That worked for me
you're a life saver, thanks
Brad, You're a truly good man.
I'm a self-taught developer and I've been Coding less than 18 months.
Your tutorials have not only helped me get a job as a developer, but they are helping me keep at the top of my game, and continuously progress myself.
I can truly say of all the content I've consumed in my short 18 months of coding, your tutorials always come out on top.
Brad you are the man!!! been following you for about 2 years, and now you're almost at 1 million followers! crazy.. anyway, I followed this tutorial and found a warning when implementing the deleteTodo with the axios json.
this line > .then(res => this.todos = this.todos.filter(todo => todo.id !== id))
I was getting the warning that res was defined but not never used... so I fixed it, by just passing it at the end...
like this> .then(res => this.todos = this.todos.filter(todo => todo.id !== id, res.data))
anyways hope this helps someone out if they encounter the same thing..
Cheers and thank you for your amazing material!
Thanks! :D
thank you. you solved my error.
Dude, thank you! I've been staring at the screen for like an hour because of this. You're the man!
Hi komplex, it solves the error for me as well! Thanks
But I actually dont understand this part, can you please share what the comma means in the code?
You can also do this: .then(res => this.todos = this.todos.filter( res.data.id !== id )). This way you're actually using the response you're getting. You look at the data that's retrieved which is a single todo and then compare its id property to the id of the todo you deleted. Then the filter method filters it out
If you ever question your life I hope you don't because you've been so much of a help to the community and everyone in a way most people wouldn't do, I love your content man please keep on the good work, absolutely no one does tutorials the same way you do. Congrats on 600k subs! Do some Laravel + Vue.js ;)
59:08 Don't need res => here, just assign this.todos the way it is. I'm not a pro. But we don't use the response. So far.
Thank you so much Michael for pointing this out, I don't know how I overlooked this. This made the app worked!
I'm trying to imagine what would justify anyone giving this video a thumbs down. This is one of the very best UA-cam videos I've seen and I say that as a professional IT instructor. I also happen to be new to Vue.js, vue cli, and VSCode yet after watching this video - and following all the instructions very closely to get my own copy of the app running - I feel like I have a strong working knowledge of how to use these tools which were so unfamiliar just a few hours ago.
The course is first rate. It includes exactly the sorts of things I needed to know to get started with Vue.js and VSCode and doesn't throw in a lot of fluff. Everything is explained in a level of detail that was just right for me. The ongoing exercise seemed to be just the right level of difficulty for a beginner like me. I still have lots of learn but I feel like I will be able to learn it with the help of this video, other videos by the same (and different) presenters, and some one-on-one help on the Vue.js forums.
Thank you VERY MUCH, Brad! If I could give you 10 stars (out of 5), I would but I gave you what I could, a like, and I clicked the Subscribe button. As far as I'm concerned, this course sets the standard for what ALL video courses should be.
Brad helped me do my undergrad project through his Laravel crash course. I also sold a modified copy of the same to a classmate for $50-haha . And now two years into full-time employment, he still teaches me a lot of new stuff I apply at work. Thanks Brad! Keep up the good work.
34:10 i thought u cant update a prop from a child component, it throws an error Unexpected mutation of "todo" prop vue/no-mutating-props
I had the same issue. You can use the same strategy he uses at 34:30 for deleting the todo item
this needs to be higher and addressed. It's a showstopper. Why aren't more people mentioning this?
Im having the same error being trown, and havent figured a work around yet..
@@tmattoneill because not everyone does the practicals, i am here to see what is Vue; since i am working on Generating JS from Rust, am researching to find out if these Frameworks give me any advantage over generating VanillaJS.
:-)
Use Vue 2
Not bad, not bad at all. I watched this course a few weeks ago, and along with the official documentation, I converted one of our Dashboards (originally written in Angular 4) to Vue.js. Now Upper Management has given the go ahead to do all of our upcoming projects in Vue. Without saying exactly who I work for, it's one of the largest cable and broadband providers in the country. This tutorial took the sting out of the learning process. I can say this much without hesitation - it beats all the versions of Angular, hands down.
this is so much easier than React , Thank you so much for this course man !!
Hello, Brad. You've saved millions of minutes that people may have spent to crawl documentation and learn all you say. Thank you, you're doing great job.
Hello from Russia! I watched many of your lessons and want to say thank you for your work. You are one of the few who can TEACH!
Wonderful crash course. Your approach worked for me. You started from an empty slate all the way to a simple functioning app without leaving out some often overlooked set up nuances. I have watched quite a number of these crash courses and I was left with knowledge gaps. You started with the basics of installing Node and NPM for example and worked your way all through configuring the IDE using extensions. This was excellent for me. This crash course is my reference point for some basics in my journey to learning more about Vue JS. Great job and thank you for taking the time to do it. Look forward to more of your courses.
Brad is trying to kill us with a tsunami of useful knowledge. How are you so fast at creating valuable tutorials?! Now I don't know what to watch!
I suggest you go with MEAN, MERN, MEVN....
Thanks Brad, ever since i found your channel my web development skills have improved tremendously. The way you teach its quiet clear that you seek to impact lives.
Nice video! By the way, the checkbox "markCompleted" function (33:50) is now considered as an anti-pattern and has been deprecated in Vue 3.0, because it modifies props in the child component. It's a good exercise for audiences to change this part using @emit.
Can you please help me how to solve this?
You are the reason why I removed the AD BLOCKER so that you get money from the advertising, unfortunately I do not have a credit card otherwise I would be a patreon of you!!! Thank you very much for all your videos !!!
Best ever !!!!!!!
Can’t wait for the Vue Front To Back Course!!!
I'm waiting for the same!
f
f
f
F
I've watched quite a few tutorials on the web, and all those guys(authors) are definetely specialists in their area, no doubt. But ony few of em can teach and explain really well. You are a good teacher, man. I enjoy your videos, thanks.
Great video, one thing I would change. Your variable / component names are very confusing (Todo, Todos, etc..) if you made those more distinct, it would be much clearer which item was being referenced at all times
Totally agree. for me it ruined a large part of the video. i ended up having to rewatch again and again. Please change the variable names. it is proper programming convention
Same. That is the ONLY thing I dislike sometimes.
I agree but that actually helped me more than I thought! I've done this myself and that way I started playing with the code and understood how the data is linked to each other :)
Couldn't agree more. I am so confused with the names...
All I could hear was "Todo" "Todos" .
I like Vue the most because of how it splits everything into components BUT in the components, it goes into Template, Scripts, and Styles. React doesn't separate these as well and it has a bunch of unnecessary files (from create-react-app).
If created is not firing, it may be because you put that method in the methods array instead of it being at the same level as methods. Lifecycle hooks (created, mounted, etc ) have to be at the same level as "methods".
Thanks, I was stuck with this problem!
@@AlissonSandes I hear it is a common problem. I'm glad the comment was helpful for you!
oh gosh, I spend a day trying to figure out what's wrong... finally, this solved it for me too!!!
Best crash course! I learnt vue 3 years but forgot a lot of things, this is a very good refresher.
My mom asked me to send her the link because his soothing voice made her sleep xD
Your mom doesn't have to search for a TV channel anymore before going to bed. Lol.
Corey schafer is also a good one! Your mom can learn python in the end.
Lol
😂
lol, that's kinda true. i do get sleepy while listening to him xD
27:04 styling:
.todo-item {
background-color: #f4f4f4;
padding: 10px;
border-bottom: 1px #ccc dotted;
}
.is-complete {
text-decoration: line-through;
}
.del {
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 50%;
cursor: pointer;
float: right;
}
59:17 I did this, but why do you not get the same error of "res is defined but never used"
The error is coming from ESLint. To prevent the error, you can add "// eslint-disable-next-line " (without the double quotes) right above the line of code causing the error (witch I believe is the .then() method). You can also disable the rule in the Vue UI in Configration > ESLint Configuration > "Rules" tab > vue/no-unused-vars, and change the "Error (Default)" to either "Off" or "Warning". I used the // eslint-disable-next-line, but then I found the plugin configuration a couple of hours later.
@@bmehder Thanks!
@@bmehder Thanks!
@@bmehder Thanks a lot!
@@bmehder Great job thank you
1:30why use vue
2:35
JavaScript fundamentals, objects, arrays, conditions,etc
3:10
To do app
4:38
Output, functionality, style
5:42
Vue-cli3
6:36vuex for state management
7:16install vue cli
Node.js
Vue.js dectools chrome extension
Vuejs.org get started
Cli.vuejs.org
9:10Vue create test
9:55 cd test, ls, npm run test
10:00npm install serve
10:15localhost:8080
10:30cd ..
vue ui
localhost:8000/project/select
10:40Vue project manager
Projects create import
10:45Vue project manager
create, 10:58users/traversy/desktop/ create a new project here
11:03
Create a new project
❤️Details ❤️presets❤️ features ❤️confirmation
Project folder:
vue_crash_todolist
Package manager:
npm yarn
Additional options:
Overwrite target folder if exists
Git repository:
Initialize git repository (recommended)
Initial commit message (optional)
11:15❤️next, presets
Default:Babel eslint
manual:
remote:git
11:30❤️
localhost:8000/dashboard/
Dashboard
Plugin
dependencies
Configurations
Tasks
13:00❤️vscode
13:30vue_crash_todolist
node_modules
Public
Src
Gitignore
Babel.config.js
Package-lock.json
Package.json
Readme.md
13:29❤️ package.json
14:00❤️ public/index.html
14:35❤️Src/main.js
15:05❤️Src/app.vue
21:45 components/Todos.vue
You can also write "scaffold" in a new empty Vue file and you will get all the three part of the file.
on new version its just "vue" for anyone wondering
@33:22 - If the project fails to compile in Vue.js 2.x when using vue/cli@^4 after adding line 15...
```
methods {
markComplete() {
console.log(123)
}
}
```
...just add `window.` before `console.log`, so that line 15 reads `window.console.log(123)` instead.
Problem solved.
At 59 minutes, if you're getting an error: 'resp' is defined but never used.
We can actually change the resp to an empty parenthesis () to remove the eslinting error.
Life saver.
Ty for the tip :))
First - love this video and really appreciate the time you have invested in taking us through this. Thank you! :)
Second - thank you Vue for the developer extension in chrome - without that I would have spent even more time debugging.. word to the wise - install that :P
Last but not least, for those that may be using the latest Version of Vue and struggling with emitting events to the parent app component, I found that:
- the click event on the TodoItem component worked well as noted in this video (using the parameter todo.id)
- emitting the event from Todos to the app root required me to pass $event as the parm (not the todo.id) in both the Todos and App components
I wanted to share as this took several hours of trial and error, countless searches on the web, perusing stack overflow, vue's docs and, of course, some censored words aimed at the monitor here and there :oP
I"m very new to this framework, so it could be some kind of version issue.... either way, I thought i'd give back here with a solution to what others may run across
Would you mind sharing the element's code that got your passed this point please? I'm currently getting `TypeError: Cannot read property '$emit' of null` when attempting to delete.
My god, thank you!! I have been stuck on this part for too long and that worked!
.
Thanks for another nice vid! I already have experience with VueJS so maybe this video is not for me, but I've started my "VueJS career" from your previous VueJs starter videos. And your vids helped me a lot!
Can I make a small notice here? 28:03 - actually, we don't need that extra wrapper element here now, because we can iterate that component directly. You can replace this:
with this:
That's because your component already has its' own wrapper inside a component code. So your rendered HTML will be something like:
Todo Item
instead of:
Todo Item
I do not criticize your video, but it may be useful for beginners. Thanks again, Brad!
From a professional dev evaluating Vue this is an awesome intro video. Well done.
vue is already way cooler than react, loved this tutorial/framework
Thanks Brad. One thing that helps me understand a bit when learning a new framework is to comment near every appearance of one of the framework's function. Like
```//vue method
data(){ ... }```
My first gotcha moment was when I finally understood where basic JS stops and where you are calling lets say a React method like render() etc, the separation of what is vanilla and what is a framework/lib is important to understand in my opinion.
Thank you for making it so easy to compare Angular, React, and Vue. Vue seems much smaller because it installs centrally (I think), but here's what I saw in terms of files on disk:
Angular: 29,000 files = 292MB for the project; dist: 22 files = 18.3MB
React: 28,200 files = 119MB for the project; dist: 14 files = 723k
Vue: 209 files = 7.28MB for the project; dist: 9 files = 824k
What a coincidence, I was searching for a vue.js crash course in your channel (updated) since last week. And then this came out. Thanks Brad!
Wooo near 600k subs!! You really deserve this Brad.
You can also toggle the 'completed' attribute by adding v-on:click="todo.completed = !todo.completed" on the input tag, I'd say it's a cleaner approach.
33:37 Any idea how to solve this error with console.log(123) when I was testing it out this appeared -> Unexpected console statement.eslint(no-console)?
same problem!
in package.json file find object «eslintConfig», then in "rules" attribute add "no-console": "off"
try: window.console.log(123) instead of console.log(123)
if eslintConfig doesnt work for you, put /* eslint-disable-line no-console */ after the console.log();
I was just recently introduced to Vue. Currently building my website with it and changing out of notepad with a new design. Great video. You keep it simple and its easy to keep up with you. This helped a lot. Thanks.
Awesome course:) in the deleteTodo method, you didn't change the filter with the res.data, so it didn't compile.
I just got rid of the arrow function and it compiled. Do you know if that would a good way to handle the http response?
You have become my Guru(Teacher). The way you explain things are fantabulous and easy to understand. A big thank you from the other side of the world :)
This is a wonderful crash course. The very first time my life I wrote a frontend app and really enjoyed the way you explained. Thanks for your amazing work. One quick note in AddTodo.vue uuid.v4() doesn't work. It seems I am using v12.16.1. I had to use import { v4 as uuidv4 } from 'uuid'; and id: uuidv4 in addTodo() . Once again thanks.
Oh I just commented this, didn't see your comment before, it would have saved me some time haha
If for some reason you just installed vue-router before hearing that it was going to re-write your App.vue, you should be able to just ctrl + z and get the code back for your App.vue - Thanks for the all the great tutorials Brad! Whenever someone asks me where I leanred, I direct them promptly to your channel. I'm not sure if I would of gotten to the point where I was able to get my first dev job 3 months ago without you!
As a beginner, Spending 1 week on Angular vs 1 day in Vue. I feel comfortable with Vue than Angular.
It speaks about you, not about Angular.
@@TomislavKaljevic rude
One of the best tutorials I've watched, seriously. Coming from a PHP background and picked it up exactly at the right tempo and learned some ES6 stuff at the same time.
@TraversyMedia, Great Video, I am eagerly Waiting for Vuex Crash Course. I have a small project to manage my ERP and I am thinking to use Vue.js for that. Its basically an admin Component.
This is fantastic..I am doing school project using vue.js framework. and this video is a life saver.
keep doing more videos.
Thank you! I just started going hard into VueJS so this is very helpful
This video is really awesome and clean. I just got the overview, the basics of Vue, CURD, and API interaction in just an hour.
Thanks you are awesome :)
26:15 error 'res' is defined but never used no-unused-vars
remove "res => " and save
To keep the checkbox from reversing the functionality when loading a todo that's already completed. You can use v-model="todo.completed" on the checkbox, instead of referencing the markComplete() function. That way it's conditionally bound, similar to the "is-completed" class condition.
59:20 - Kept getting an error about res being instantiated but never called, and one of the below solutions resulted in a similar error saying that todo was instantiated but never called, and one of the other solutions simply broke the delete method entirely. Here's the one resolution I found that works the best:
deleteTodo(id) {
axios.delete(`jsonplaceholder.typicode.com/todos/${id}`)
.then(() => this.todos = this.todos.filter(todo => todo.id !== id))
.catch(err => console.log(err));
}
Hey! I think this makes a bug... when you enter several of your own TODOs, and then try to delete one of them, it bulk deletes all of the ones you entered
stackoverflow.com/questions/55505768/multiple-todos-in-todo-app-getting-same-id-from-json-placeholder .... may be because of this.... I will investigate
unfortunately..... it seems it has been a problem for a loooooong time. No solution
If you want to check items that are completed at the begin, you only have to add this to checkbox input template:
v-bind:checked="todo.completed"
Any chance you could do an intermediate-level series for Vue/Angular? I feel like everyone only focuses on these introductory level videos but I would love to see some of the more advanced features of these frameworks as well. Cheers, and happy 2019!
I'm doing todo list as interview task, my first Vue project, as I used React before. This Vue rendering logic made me instantly miss React
When can we expect a Vue front to back course? :p WAITING EAGERLY :P
Love your style. I'm just a newbie as I just landed my first front end development job and your method of teaching is working well for me after hours learning. Thank you!
How long time does it take you to learn 1000 languages in your lifetime, this is so crazy!
With both frameworks and languages, once you learn two, you start to see they are all pretty similar there is just different terminology and syntax. The core concepts are the same or at least pretty close
@@ilya-zhidkov I think he was exagerating and I think he meant frameworks/libraries/etc as well :)
@@ilya-zhidkov Also you can add Ruby to that list if it's worth anything these days :(
@@TraversyMedia First I've seen such a recent comment from you so I'll take this chance to say thank you hoping you will see it. You have single handedly helped me through a very bad time in my life and also helped me find a job I'm so incredibly grateful. I owe it all to you (and some of the design / styling tips with travis@Devtips). I haven't stopped learning from you either, the learning continues with vuejs! Thanks a lot man.
@Kranti Nebhwani I am glad I could be of any help at all. Thanks for watching my videos :)
29 Jan 2021, starting my Vue journey by this course, Wish me luck guys
Thank you Sir ... I dont have any words for your awesome, great job... Hatsss of to u sir...
😊👍 .
31:30 to toggle complete and incomplete. The example used is somewhat problematic. Notice that Todo 2 which start as completed have the checkbox still unchecked.
You can do the whole thing without writing the markComplete method.
Just do the checkbox like this:
Notification Squad. Thanks Brad
54:50, After the limit parameter, add "&completed=false" so the line-throughs don't get mixed up.
When coding deleteTodo(id), it always shows " error: 'res' is defined but never used (no-unused-vars)" and cannot compile. My code is the same as yours.
That would be because you are defining res but never use it in the callback function and no-unused-vars does not like that. Replacing res with () or disabling no-unused-vars should fix this.
You can also use res in the filter method by replacing the arguments to the filter method with ( res.data.id !== id ). Now you're checking the id of the todo that is returned from making the call to jsonplaceholder.
Global installation requires admin permissions. You can install Vue CLI locally by removing global attribute `npm i @vue/cli` and then run `npx vue create test` to avoid running it from the root.
please more videos about vue js and laravel ........yoou are so goooooood at teaching laravel plzzzzz
Hi Brad,
I have seen many of your previous videos, and i have learned perfectly with vuejs-cli.
I have worked 3 years in Angular2+, and now i am switching to Vuejs.
I think VueJS is mixture of Angular and React.
Thanks and be there for more videos like this.
I hate to be that guy, but I really find this tutorial hard to follow. I think it's a bit too confusing with how the naming of things went. It really made it hard to really understand what was happening for me and how we're supposed to piece components.
EDIT: Like with how we have a file called Todos TodoItem then theres a todo prop and a todo-item class.
I actually had the same issue. Too many things with the word todo, it made it confusing to show what was linking up to what
Brad Traversy, is the best instructor ever, period. He's a national treasure!
I'm sorry but naming literally everything "todo" is not how one should teach a framework. Variable names need to be descriptive.
This does make things a bit confusing because it's hard to understand how different variables are referencing each other and what exactly is pointing to what.
I think thats the right way, because the name is on the convention that we use in our day. If your dont get used to it, just try to make a project naming every thing "button-add-todo-emitter-son" "button-add-todo-emitter-final"
If you think you can create better free material, help yourself. Brad does a great job explaining the basics and showing how the pieces tie together. Extremely nit picky feedback.
Yeah quite confusing, nonetheless awesome tutorial.
There is nothing from stopping you from naming your own variables and it is a crash course after all, Keep up the great work Brad!
Great course! Have not used Vue in a while but just got a new job which uses Vue and this was a great refresher! Keep up the good work man
Brad is Awesome!
Thanks :)
Vue definitely seems to be easier compared to react
For preventing submits on forms use:
lets rename the MEVN stack to VENoM stack
oh yess)
These videos teach the essentials of web development tools really well. Thank you. I usually code along with the videos instead of looking at the source on GitHub. There are a couple of things I usually modify when coding along. (1) I'm a fan of longer, more descriptive variable names. They usually help me better understandwhats going on rather than seeing "todo" or "todos" a lot of places. (2) I usually see a lot of divs that don't really wrap contents with purpose, they just kind of exist. In a component like AddTodo, it's ok to have just the form on its own in the template. Another example would be using v-for on a component. For example, in Todos, you can use v-for=todo in todos" when embedding the TodoItem component and also v-bind:todo="todo" to pass it as a prop. In general, I find the generated HTML content is much cleaner to look at if you can avoid using divs that don't need to be there.
Good job. Thanks.
Please, use @submit.prevent="action" next time. Instead of calling e.preventDefault()
Why is this way better than the other?
@@DistantComputer Ohh okay I see, thank you!
@@DistantComputer In that case, you'll have to put it in every directive calling this method, right? If so e.preventDefault() seems better for encapsulation.
@@DistantComputer True
Love how you simplify and make everything clear before diving in, thank you brad!
Todos all over the place, unfortunately. Might be good tutorial for a todo app, but very difficult to understand the gist of the framework.
Hey, I can understand where you may have gotten confused. However, if you follow real close, you should be able to differentiate the identifiers despite there being multiple plays on the word "Todo"
I've been falling in love with Vue over the last few weeks. Once the conventions click and you shake off all the React, you'll be loving life.
if i may ask
what do you mean by shaking off react ?
you had trouble learning it ?
Always todo list 😅
This is one of the most simple organized course about Vue.js i have watched
thanks a lot
When I see 500 thumbs up and 0 thumbs down, I feel so great as if it happened to me, because Brad, you really deserve it. You are a good teacher, overwhelming majority of your content is free and you are really a great guy. Keep doing this great work for the community and I wish you all the best in the years to come!
Awesome crash course video - you explained all the basics so well and happily not just on a helloWorld project but a real app! Great job, keep on the good work!
Wonderful course, you made us to watch till end, you exactly knew how to proceed and what to cover in an 1 hour video.
Thanks for such useful beginner crash course.
Thank you very much !! Thanks to your crash courses for React, Angular and Vue, i got an idea about their concepts and it made it clear for me to choose the one i feel more comfortable with !! 🙏🏻
If you want the checkbox checked depending on the completion status of the item, add v-bind:checked="todo.completed" to your checkbox.
Just a friendly heads-up, for anyone having issues with the CLI in Jan 2020:
There's an error when using the scaffolding tool alongside some older versions of Node, so make sure you're running at least 13.1 of Node if you find yourself getting a lovely, very verbose build failure message when trying to run the basic serve command as I did earlier this afternoon.
yep , lots of errors and then suddenly works (";")
Been through a few Vue.js tutorials and this has been the best.
Thanks for this quick crash course covering all the basic stuff. Its the first time I am watching one of your videos, but I'll definitely watch more.
For anyone wanting to know how to do a default completed of true and make the class styles/check sync together. Inside of TodoItem --> Remove the onchange method and just add