Video details

Every New Vue Developer Has Made These Mistakes...


If you've worked in Vue in the past you know there are certain mistakes a lot of developers make. In this video we discuss those mistakes and how to avoid them. Including props, double brackets, how to use slots and more!
👉Check out my last video on creating a Full stack Vue.js 3 app with AWS
👉 Sign up and get free Vue cheat sheets and updates!
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out 👉
Need to Learn Vue or Nuxt? Check out my courses below! - Learn Nuxt.js Course! - Quick Starter On Vue 3 - Full 6 week course on vue!
🗂️ 🗂️ 🗂️
Make Sure To Check These Courses From Wes Bosd ! 💻
Begginer JavaScript - React For Beginners - Advanced React -
0:00 Introduction 0:36 Single Brackets and Class Names 02:41 Not using Vue Extensions (Volar, Vetur) 05:01 Not setting up ESLint and Prettier Correctly 11:13 Using too many Props instead of using $attrs 16:14 Never using slots


Hey, developers, are you making these common mistakes in your View applications? In this video, we're gonna explore some common mistakes that new View developers and even experienced View developers make on an everyday basis. I've had the privilege to actually look through hundreds of of View projects, so I do see some common things that people do. And so I'm going to explain those and how you can make fixes for those, so you don't repeat the same mistakes over and over again. Hey, and if you're new here, my name is Eric. I'm a full stack software developer. I'm also a big fan of all the JavaScript frameworks, so if you guys like that content and want to learn more, make sure you click that subscribe button. All right, let's go ahead and jump into it. So let's take a look at our first example here. And this is pretty straightforward. So a lot of times when people come from React or Savelt and they're not used to viewing the syntax, they'll make kind of tiny mistakes like this depending on their setup. Sometimes this will slip through. So I've seen people use single curly brackets, so you might see a click handler that happens anytime you click this button. It's supposed to trigger this alert me. People will have data methods you can see here. There's a name for Eric, but they'll just put single bracket names, and obviously that won't work. And you can see here. Class name equals title. That's another thing that triggers me. Anytime I see this, I've noticed that it's probably a React developer coming through. That one is not a big of a deal, but you can see this is what it renders. Obviously, this is something you would catch pretty quickly if this is the first time through, but it's definitely an issue. Sometimes when you're just switching between React and View, it's really easy to forget that you need to do double curly brackets and not single curly brackets. So to fix something like this, it wouldn't be too bad. We would just need to get rid of the curly brackets here and the Alert me just surrounded by quotes in this name right here. We'll just add double curly brackets. And really class could just be called class, not class name. It just could be class. So if we do all three of those now, it seems it working. Press me. There's an alert pop up. So this is working as we expected. Another thing that kind of trips up people, especially coming from React is they might be used to using this way. If you have an onclick handler, they might be actually have an arrow function pointing to it and then having it run this way, which you can do. It works very similar. It works the exact same way, but it's not necessary. You can also run Alert Me with an open and closing apprentices, and that works as well. So there's a couple of different ways to do it. This definitely doesn't work in react, because if you do something like this, it'll just run alert me right away, but you don't have to worry about that inside view. Another really common mistake I see is that new developers for View don't really understand what to install in their It environment, and they miss out on some really cool things that you can do. I went ahead and slightly changed this example in my data method here. I have now name info instead. Just name and it's an object that contains a name and age. And so if I wanted to use this inside my template, I would use double curly brackets and then do name info. And then if I hit the dot here, you can see I'm not getting any auto complete. I really don't know what's in this object, so I'm going to kind of have to remember what everything is in here. And so it's not working quite the way I expect it. Now. If I hit, if I save it here, you can see here's the object appearing here. But what happens if I just want the name or I just want the age? So this is where it goes back to installing extensions. Now, this could be different in your ID if you're using a different one. But I'm assuming most of you guys are using Vs code. So if you just search for View, the one that always pops up and has millions of installs, is this a View syntax highlight for Viewjs? And this is great, but it doesn't have some of those really nice things like the auto completion, the sensing that we're in a template. So really the two extensions I highly recommend if you're installing a View two or View three app. There's two. There's one called Vitor. If you look at here, it's this one right here. And the way it works, it has the View language services has the terminal interface. It works really great. I usually recommend this for View two projects. You can use them in View three, but the one I really like for View three is called Volar. If you look at Volar or just look up View language features, it has the same thing it has set up for View two, it supports View three. It's really great for TypeScript support. It has those language services that you want. So if I come back over here and I enable this and I come back over to my app view. Now if I try to do the double curly brackets name info now I actually get the auto completion. I can see there's an age. There's a name. This is so helpful. As you get farther and farther along into your view journey, you're going to be using this all the time. It also detects issues. It'll give you more errors. Yeah, definitely. Try to install the right extensions and we're going to talk about more about extensions here. In a second. Okay. So here's another example of some really common mistakes. I see. So if you can see right here from the left hand side, I have an export default. I have a name, a data, have its returning name, and then really is all. This is Hello World, and then it repeats Hello ten times. So this is a very trivial example, but you can notice some weird issues. We have some weird spacing here doesn't quite look right. We're kind of used to be four, but there are some common practices that we should probably be doing, and you'll notice a weird thing too, that if we make any changes to this file, let's say I add in a space here and enter and it saves it. All of a sudden I get this fail to comply error, and I get a bunch of warnings and an error that says I need to be bind the key directive to require for V key. So I'm like, okay, well, that's the only error. So I'll come in here and I'll just add key equals index in here. I'll save it. Cool. It's working. But if you look here, you still have the warnings in the console. And I've been in projects where people just ignore these warnings and never fix them. And so usually this happens when you add in a Linter into your project, but you don't configure it correctly. So an easy way to do is anytime I come into a project, I make sure my ID has a few extensions. Now. I already mentioned Vollear and VTR, but what I usually do is I go to this Eslin extension, this one right here. I enable this right away because it helps out and it actually starts detecting the errors in my ID. And then I also install prettier and prettier is really nice because it helps do some auto formatting for me. So I'll enable that as well. And then between those two now I'm starting to see in my ID errors, and I can see right away like this name test. There's an ESLint error with it. There's an error with this error. Here some of the warnings. I have this base button. There's an error here. So usually one simple way to fix it is just to make a simple space and save it, and it automatically reformat to the way it's supposed to be. Well, most of the time you can see it. There's a problem here, but you see, it actually fixed a bunch of the different errors. I can do the same thing with this file if I just save it. And now I'm just left with a handful of weird errors that I should be able to fix. And so this where it comes to the next part is I see a lot of people who have Predator or ESLint inside their projects, but they don't have a configure correctly, and they have this weird issue. I'll show you so right here, if I mouse put my cursor over this squiggly line, it says I need to put a comma. So if I put a comma here and save it, the comma disappears and the squiggly line comes in. So prettier is overriding the es lint settings for this project, which is really annoying and actually happens quite a bit when you first create a project, or if you're not really sure. Now, some people who get completely frustrated about this and they just remove ESLint or they remove from their editor the plugins, or they just fix only the things that are errors. But you can actually fix something like this. So what we can do is we come through here then actually, before I started this recording, I created this old old file. I'm going to rename this to prettier if I can do this right, this old right here and rename it to prettier RC JSON. And what this is going to do is I added two new settings trailing comma all, which means that it always adds in that trailer comma, and also this end of line auto because there was a second issue. So if you come over to this base button, if you highlight over here, it says this delete carriage return ESLint error. If you look inside the documentation for prettier, it actually tells you if you add in this end of line auto, it kind of fixes that. So now if I kind of resave it here, it added in the comma as I expected. It also in the baseball. If I just add an empty line, it fixes all these. So it didn't fix the delete CRS length, but I should be able to sometimes you just have to reload the window after you put in the file, and if it works correctly, it should automatically not give me the error again. So what I did there, by the way, is I can do control shift, Windows, keyboard, P, these command shift P, and a Mac. I just did developer reload window, and then all it does is reload the window, and I always do that anytime I have some weird TypeScript, errors or some other weird errors. So now if I save it here and I save it, it's out of formatting, and I don't see the weird squiggly line errors. Also, if I go back to my console here, you see, I no longer have any warnings. If I stopped and restart it, everything works as expected. We'll just make sure it works. Yes. So there's no errors. If I make any changes, everything seems to work fine. Everything's working great. So we have now solved the issue. So make sure in your projects to install Eslin, install prettier. And if you have some weird configuration issues from between prettier, add that prettier RC file with the correct information. Oh, yeah. One last thing too. So in my Eslin file, you can see here I have this is the default that comes out with View three. When you install with ESLint, it gives this plug in View Three essentials recommended, but there's also rules here, so if you want, you can actually turn off individual rules in here. You just have to look them up in the length guidelines. Also, this View Three essential. If you look at the style guide and you go to the real categories, you can kind of figure out what this does. So it's basically this priority a essential which helps prevent errors. But you can actually change this from View Three Essential to View Three recommended or strongly recommended, and even have a tighter control of exactly what you're going to allow inside your app. In this example, we're going to take a look at props and maybe some things that aren't necessarily mistakes, but could be done better. So I really see this a lot. I have a base button here, and the base button has a message in it, and maybe it has a whole bunch of other props. So in this case, I just have a message, but it might have a message. It might have like, classes. It might have a data size, a whole bunch of props on here. So you may be thinking like, well, that's just the way View is in view. You create this props, and by the way, I'm using the Options API here, but it's very similar. If you're using the script set up using something called defined props, but you basically create and you have to define every single prop, and then you can kind of insert them and do whatever you want inside here. That will work. But typically what happens is you end up having components with a whole lot of props, and I'm not saying that's bad, and that's not always wrong, but there are other ways to do this. So first, in this example, let's say I wanted to add in this info as a class into this button here so I could create an array of class names that would be like an array here of every single class, including info and so on and so forth. And then define that in my base button and then have it attached to here. But there's obviously a much easier way and to do that first, you have to understand that in view, it automatically assumes that any attributes that you add to a component that's not defined in a prop, it gets added to the outermost element inside your template. So in this case, the outermost element that surrounds everything is a button. So you can see here. I have this info and data size small. I can just do this. I can just do class info. Hit, enter, cool. It went ahead and updated. If I take out this class and have no class and save it and I go back here and I make sure I save it. You can see it's back to the way it was before I can even do the same thing with this data attribute. So there's this data size small. So if I add data size small and I look at it again, cool. It actually made it a little bit smaller. And if I wanted to, I don't know, I can do like .2 M it's even smaller so you can see it's definitely taking whatever values I pass into the component and automatically adding it to here without having me to automatically do it. I see this pretty common with people who aren't familiar with the prop system and view. It can be a little confusing. Another thing you can do is let's say I want this class info here, but I have multiple elements. So in view three, you don't have to have one like root element. Everything surrounds. So I could have a Div here that says title information about the button. And if I save this and I have information about the button, I come back here and have this class info you see here. It didn't work like if I kind of look and inspect it, I go to the console and I just kind of look right here. I see I don't have it anywhere in here. It didn't add it to anywhere. In fact, if I go to the console, it gives me this warning that I have external nonprofit attributes class, but you can fix this so you can go back to the template here and you can add in inheritatters. And if you do that, that will get rid of the error message. So if I go back to inspect, go back to the console and I refresh it here and I come back here back to console. You see, there's nothing there. I don't have any errors, which is good, but I still want to be able to add those attributes to the button. So to do that, I can just add the secret code here. V bind equals dollar signatters. And if I do that and I refresh it cool. There it is. So now it's working as expected. It added it added it as a class on the button itself. If I wanted to, I can do this. I can do class equals adders class, and this will work the same way. So refresh it and I put this colon here so it binds it. So cool. It's working the same way. So I said dollar class Editors class, and now I'm able to specifically target different things onto my template without having to pass them all in and define every single prop on it. One last thing to do that I can see too, is people don't realize in view, especially starting out that you can use slots and they're pretty powerful. So instead of passing this message as a text as a prop, I can just simply get rid of this message here. Get rid of this message here. And then in the opening closing, I just add this slot like this S-O-L-O-T. And now if I go back to my app view, I can just delete this message and I can put the message in between the opening and closing brackets of the component. So it's sort of like reactchildren if you're familiar with that, but now I can put in. This is a button. If I hit enter there, this is a button. So now it has done exactly what I wanted to and I could put in a whole HTML elements in here. I can put in if I wanted to put in like, my Fab icons or something else. Instead of having to figure out every single prop and every single icon and how I'm going to do that, I can just simply add it to the opening closing brackets here, use this slot and do it and you can even be more. I did whole videos and slots, but you can have name slots. You can have scope slots. In other words, you can have slots that take information from the child component and bring up to the parent component. You can have multiple levels of slots, so it's really powerful. It's worth learning. If you're a view developer and something I see a lot that people don't use enough. I hope you guys learned something that was a whirlwind of things. There's a whole bunch more. If you guys like these videos, make sure you leave a comment below of what you liked about it. And if you've ever run into these things, or if you've never run into these things, that would be great. Also, I also offer mentoring and other things. I'll put a link in the description. If you guys want to learn more, I teach via you and other things. Take care. Bye.