Every New Vue Developer Has Made These Mistakes...

hey developers are you making these common mistakes in your view applications in this video we're going to 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 view projects so i do see some common things that people do and so i'm gonna 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 svelte and they're not used to view in 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 at 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 noticed that it's probably a react developer coming through uh that one is not as big of a deal but you can see this is what it renders so obviously so 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 surround it by quotes uh in this name right here we'll just add double curly brackets and really class could just be called class not class name which could be class so if we do all three of those now it seems they work if they press me there's an alert pop up so this is working as we expect it another thing that kind of trips up people especially coming from react is that they might be used to using uh this way if you have an on click handler they might be actually have an arrow function pointing to it and then having it a run this way which you can do it works very similar it see it works the exact same way but it's not necessary you can also run alert me with an opening closing a parenthesis 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 vue don't really understand what to install in their ide 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's in here and so it's not working quite the way i expected 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 ide 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 vue the one that always pops up and has millions of installs is this a view a syntax highlighting for vue.js 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 vue 2 or vue 3 app there's two there's one called vtor if you look it 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 vue 2 projects you can use it in view 3 but the one i really like for vue 3 is called volar if you look at volar or just look up view language features it has the same thing it has has set up for view 2. it supports a 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 so helpful as you get farther and farther along into your view journey you're 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 it really is all it says 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 it doesn't quite look right there's also we're kind of we see this v4 but there's 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 hit 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 v 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 you usually see that this happens when you add in like 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 volar and vitor but what i usually do is i go to this eslint extension this one right here i enable this right away because it helps out and actually start 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 so between those two now all of a sudden i'm starting to see in my ide errors and i can see right away like this name test there's an eslint error with it there's an error with this uh error here some of the warnings i have this base button there's an error here so usually uh 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 prettier or eslint inside their projects but they don't have it configured correctly and they have this weird issue i'll show you so right here if i mouse my 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 my uh the eslint settings for this project which is really annoying and actually happens quite a bit if you 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 uh 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 and then actually before i got on to before i started this recording i created this old.old file i'm going to rename this to dot prettier if i can do this right this old right here now rename it to dot 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 charlie comma and also this end of line auto and 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 base button if i just add an empty line it fixes all these uh so it didn't fix the delete cres lint 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 giving me the error again so what i did there by the way is i can do control shift in a windows keyboard p this is command shift p and a mac i just did developer reload window and that all 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 stop and restart it everything works as expected we'll just make sure it works yep so there's no errors if i make any changes everything seems to work fine everything is 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 eslint file you can see here i have um this is the default that comes out with view three when you install with eslint it gives this plugin view three essentials esl 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 slint 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 like 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 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 you 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 setup using something called define 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 and so 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 like exposed like a an array of class names that would be like an array here of every single class including info and so 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 small 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 it like 0.2 rem 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 doing it and i see this pretty common with people who who aren't familiar with the prop system and vue it can be a little confusing another thing you can do is let's say i want this class info here but i have i don't have i have multiple elements so in view three you don't have to have one like root element everything surrounds so i could have like a div here that says title uh information about the button and if i save this then 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 and i go to the console and and i just kind of look right here it did i see i i don't have it anywhere in here it doesn't it didn't add it to anywhere in fact if i go to the console it gives me this warning that i have extraneous non-prop attributes class and so but you can fix this so you can go back to the template here and you can add in inherit adders colon false 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 sign adders and if i do that and i refresh it cool there it is so now it's working as i expected it added it to the 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 accept binds it so cool it's working the same way so i just did dollar colon glass class adders class and now i'm able to like specifically target different things onto my template without having to pass them all in and define every single prop on it one last thing uh to do that i could see too is people don't realize and view especially if you're 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 open and closing i just add this slot like this sllt 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 open and closing brackets of the component so it's sort of like react children 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 so in other words you can have slots that like take information from the child component 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 well 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'd 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 vue and other things take care

Channel: Program With Erik

Views: 24,722

Keywords: Vue.js Tutorial, Vue Tutorial, Vue tutorial 2021, Vue.js developer mistakes, Web Developer mistakes, Program With Eric, Program with Erik, Erik Hanchett

Id: 9wKivv-vvhU

Length: 18min 4sec (1084 seconds)

Published: Mon Nov 15 2021