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
• Create A Vue.js 3 Full...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
👉mentorcruise.com/mentor/erikh...
Need to Learn Vue or Nuxt? Check out my courses below!
bit.ly/2LalQka - Learn Nuxt.js Course!
bit.ly/3aiYe8s - Quick Starter On Vue 3
bit.ly/2OETt0M - Full 6 week course on vue!
🗂️ 🗂️ 🗂️
Make Sure To Check These Courses From Wes Bosd ! 💻
Begginer JavaScript - BeginnerJavaScript.com/friend...
React For Beginners - ReactForBeginners.com/friend/...
Advanced React - AdvancedReact.com/friend/HANC...
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
Links
mentorcruise.com/mentor/erikh...

[@BEN1AM1N]

As someone who had to learn vue from 0 for my work project, these videos where you tell "Hey! Here is a nice and easy way to do X" have been really useful. Thanks!

[@mrigankabora4835]

I am also learning from last one month...any courses that you recommend?

[@YuriyKlyuch]

Eric: "you can see here className="title" - that's another thing that triggers me every time I see this" Also Eric: casually typing className on 12:28 But seriously - thanks, good topic!

[@Electricity0]

He is passing some classes as props, so that's why he doesn't use 'class' but 'className' instead. It is correct.

[@kobrowsky]

The background music at the beginning is what I listen while working. Making Vue apps.

[@jazcash]

maaaan your content is so invaluable for anyone using vue, great stuff

[@darkmode404]

I definitely liked this video. Thank you so much!

[@thiagotimm3668]

Awesome! That fight between format on save from prettier vs. eslint it's really annoying! Thank you very much!

[@nghbrhood6848]

This was very informative! Thanks 🙏

[@ronaldaug8504]

Love your code editor!

[@igordasunddas3377]

This was a great video. I'm new to the channel, so I apologize if I should've looked at your channel first, but do you happen to have such hints for like.. typical structures of a project? Where to put what? How to properly group components with their DTOs etc.? I am new to Vue (started with Vue 2.6x, now on 3.x, because it's a home project and I can afford to not have something super stable and compatible), but I am quite experienced in Angular and do know some bits of React. In Angular one would use certain folder structures and module information in order to have separate lazy loadable functionalities. Is there something similar in Vue? I am using Vue3 with TypeScript and ESLint and I take joy in having a warning-free startup - I fix all the warnings, that appear. I already added MSW, Axios, Vuetify etc. to my project and am having fun trying things outside of my comfort zone (which is Java backend + Angular).

[@user-gnwolmgkqpcn15829]

Thank you for your advices on working with vuejs. by the way what are the theme and the font yare are using? because it's awesome!!! really wanna know that!! thank you for your hard work!!!

[@ProgramWithErik]

Synthwave 84!

[@RianY2K]

thank you, your tips and guide very useful

[@kelroar]

Cant get auto completion with volar neither vetur. Any idea what it happens? Thanks the great material you share with us!

[@MrColdstop]

Really nice information, all levels

[@cnikolov]

We are using vue2, even after installing volat and removing the vetur with restart of vs code I am still not getting the beautiful auto complete on the data

[@codedjango]

For some reason, I am unable to override the delimiters when I create a Vue 3.0 project with vue-cli....Can you please make a short video on how to override delimiters?

[@codewithguillaume]

Erik, the props error => above all of them ! So much devs still don’t use it !

[@codewithguillaume]

But I am glad that there is none I did 😂

[@azaf]

what theme are you using please?

[@PieJee1]

most common mistakes I see people do with Vue: - forget a good initial value so reactivity works as intended - misuse/confusing of this in vue - reuse code with mixins - auto-register every component in the bootstrap

[@Anonymous-xy8ps]

Hey Eric 👋, could you make a video about authentication with Vue 3?

[@fueledbycoffee583]

I never use slots but now that i think so... Saves plenty of time

[@zulfikarahmad3684]

your vscode font is glowing, what extension is that?

[@TechBuddy006]

Can anyone help me with my script.js only works on reloading the page manually on every page.

[@joeyst-laurent365]

Using attribute inheritance feels too tightly coupled for me. Good video.

[@behnamsalehi9765]

thank you

[@chris_ea]

Lovely!

[@ignisAnimus]

I don't think that you need Prettier if you configured eslint correctly. Each additional unnessecary dependency is bad.

[@avdylkrasniqi4687]

Out of vue... What is the background music at the beginning of video?

[@nayanchoudhary4353]

The last demo... You have multiple tags inside template, and as far as I remember, only one tag is allowed in template in Vue 2. Were you using Vue 3 in demo?

[@TheRvh70]

Yep, that's a Vue 3 feature

[@programerz]

that error on slots very annoyed me when say's v-slot on templates but not working on v-fab on ionic

[@thinking3911]

which vs code theme you are using

[@ProgramWithErik]

Synthwave 84!

[@thinking3911]

@@ProgramWithErik 😊

[@thinking3911]

@@ProgramWithErik first of all thanks for your efforts i learnt many things from you about vue 3 . i have a scenerio where i have alot of offcanvas and offcanvas open on click according to id attribute and i want if one offcanvas is open other have to be closed what will be the best approach to achieve this.

[@aleksandarstevanovic5854]

holdup, how do you have more than 1 root tags (h1 and button) in template? vue 3 but without composition api? i think using more than 1 root tags is the most common error in vue 2

[@samuelmorkbednarzkepler]

Vue 3 no longer needs you to have just 1 root element. You can have as many as you want now. Wheter you use composition API or not is irrelevant because this is about templates not scripts

[@aleksandarstevanovic5854]

@@samuelmorkbednarzkepler soooo... You can use options api in vue 3? Because i hate composition api to be honest

[@samuelmorkbednarzkepler]

@@aleksandarstevanovic5854 yes, you can use options API in Vue 3. However, I really reccomend you give the composition API a good try. Especially with the script setup method. Cause it really allows you to write incredibly clean and simple code. You can continue to write with the options API but I'm pretty sure the composition API is going to be the real future of web development in general

[@smohammadhn]

Amazing

[@scottamolinari]

The glowing code in your VSCode, is that on purpose? Makes me feel like my monitor is dirty.

[@ProgramWithErik]

Ha! it is, it's synthwave 84

[@svenyboyyt2304]

You don't need to make a change to the file to be able to save it again. You can just save it without changes and also add a keybinding for it. It's also pointless to use a linter for formatting because that's what formatters are for.

[@anveshreddy1245]

What is export default

[@meggi8048]

instead of curly brackets you can nothing at like Press me this is valid html5 and it works with vue.

[@ignisAnimus]

How is this shiny theme called? :D That makes the code glow :D

[@ignisAnimus]

found it: SynthWave '84

[@ProgramWithErik]

Yup

[@upl1nk.v01d2]

actually, this Vue tech is not so friendly, but I managed to understand a little bit of it.

[@behnamsalehi9765]

awesome

[@Arabian_Epileptic]

React using jsx is such a weakness for react

[@hidami3241]

How?

[@Arabian_Epileptic]

@@hidami3241 imagine using bootstrap and pasting in the html code from bootstrap docs, well u have to go back and change all the attributes to comply with jsx rules like class to classname, also there is no v-if v-else directives that react offers so we are stuck with very ugly jsx having ternary operators in it. Vue provides all these and more to write clean code

[@hidami3241]

@@Arabian_Epileptic I actually prefer react way of writing if and map instead of v-for or v-if cause it makes you better at javascript. And there's no big deal in using className instead of class its not like its a hard to to learn that oh I have to use className instead of class. React is javascript and as a developer there's nothing more than using a framework that even makes you better at javascript. React jsx is basically like html, ypu still use all your html syntax except for className and htmlFor and maybe others I don't know yet but they are also not hard to know. Vue is great I love it too, especially the vue ui part of it. But I don't like the too much magic aspect of vue, it just gives you too many things to learn where you can just use normal javascript to do it. And talking of clean code. I think react also does the same cause most of your javascript can be found before the return statement of the function and your templates are after the return statement. One of the things I don't just like about react is that it dosent come with its own styled component unlike vue scoped styled component. And routing. Vue gives too much magic and sometimes get me confused cause I don't even know how to write my javascript in it until I try and try and eventually would sort it out. However vue is great 👍 , I love the 2 way data binding. The vue ui especially when you choose manual setup. The built-in props validation And the built-in styled component features. React on the other hand is pure javascript if not almost

[@Arabian_Epileptic]

@@hidami3241 it’s not just replacing class name but all the attributes And using ternary operator in the markup I think is very weak. Vue provides computed properties to make it easier. Also map is not part of react. It is pure js. So react doesn’t really provide a way to render a list. Vue does easily with v-for There are so many more reasons too

[@hidami3241]

@@Arabian_Epileptic I never said map method is a react feature, I said react is purely or almost javascript which means you're basically writing javascript. All the attributes? They are not hard to remember it's as simple as when you are new to html. Class - className For - htmlFor etc.. etc.. You said vue does it easily with v-for... however I would prefer to actually know what v-for is doing behind the scene, I want to be able to do it myself and that's why I like the react way of using map. Give me magic but not too much, im not trying to be Merlin. I understand you're trying to say it is very sweet and easy to use v-for="Name in names " but i think writng the actual code is more better, I myself don't know how to use map method really well until I started using react and I started writing more of javascript it makes me understand somethings. Too much of trying to make it easy means a there would be a lot of things to know also. Are you seriously saying these attributes are hard fit you to remember? 😅😅

[@johnd1431]

it's can be useful

[@KangJangkrik]

My biggest mistake is using JSX inside Vue component

[@difusal]

🤠🙏 thx

[@J38x729]

writing date instead of data

[@Mavsdavis]

good I learnt vue before react😅

[@josbouma7924]

Another mistake is using alert to debug stuff

[@eotikurac]

i don't know about other frameworks but i'm working with vue and it's the works thing for my mental health since i started working as a frontend dev in 2015. only backend developers like this crap because it seems comprehensible and familiar in their feeble little minds. i'm not even trolling, it's horseshit. i can do everything 10x more quickly and more enjoyably with vanilla js.

[@eotikurac]

erik, watching you fix stuff or just make them a little different makes me rage. this is exactly what my boss and his ocd does. it's draining me an i have no motivation to work anymore because nothing i do is good, according to his opinion. can you please talk about issues like this? i'm not a robot and it makes me crazy when other people expect me to perform like a robot. i don't care about your spacings and your linter configs. these are completely pointless technologies made by people who have no friends and have too much spare time and a long list of menthol disorders.

[@ismaelgoldsteck5974]

cringe