Vue.js Tips: Use Slots The Right Way // VUE.JS SLOTS TUTORIAL WITH VUE 3

[@ProgramWithErik]

📚 Sign up and get notified about my new Vue 3 course! And get a free cheat sheet! - bit.ly/2vFWBQi

[@BlackxesWasTaken]

Not sure if I'm just used to it, but I actually watch almost every educational video about something coding in 1.5 or 2 since people mostly tend to sway away or drive off topic and do "casual" talk about something none related. There are videos prepared with a script beforehand which I set on 1.25, but I actually never watch on 1. Its just simply to slow I think educational videos on youtube are mostly beginner or intermediate but never high end stuff. I mostly know the basics and intermediate stuff on which I just can "skip" over as in listening to it briefly, understanding everything, but this way I can get the gist of a topic or explanation better without losing track because people were like "Ah and this (Which is something else) is this and that.. and let me correct this first.. ah wait I forgot.. " etc. You get the point Perhaps some people as well just talk slow, sway away or simply introduce artificial delay on purpose to boost the time to a certain length. Which is sad as well

[@RussPainter8]

Very nice. Been using Vue for a while now, but somehow never came across the idea of exposing a child component function this way. One bit of constructive criticism - It would be helpful for beginners if you didn't use variables like "data". It's hard to tell if this is a vue language word, or something they can change. Perhaps a more real world example would lead to better variable names.

[@sven_527]

I used to find that hard too. I think names like myVariable are always helpful because it shows it's not fixed or names that are not so generic.

[@scriptedpixelsltd]

This is good but looking for a use case tbh, it would be great to see some sort of use case where you would use this or have used it in the past

[@ProgramWithErik]

Thanks for the feedback

[@RockyCastaneda]

Simple examples makes it more understandable. Great job on explaining it to the most simple terms.

[@ProgramWithErik]

Thanks!

[@DieterGribnitz]

OMG 2x, did not know this feature existed on youtube. You just cut my research time in half. Thankyou for the tip and thanks for the awesome content.

[@NigelStratton]

New with Vue and first time looking at slots. Good amount of info and speed at 1x for following everything.

[@benjimminy]

OMG. Thank. You. I have read article after article trying to grasp what scoped slots are, and have come away from each one just as confused as I was when I started. I finally get it. I'm struggling at the moment to think of a practical application for scoped slots, but I'm sure that will come now that I understand what they are.

[@irinakats8008]

Same!

[@techdan7098]

This was perfect for me. I'm not new to programming but I am new to Vue and this helped solidify what I couldn't grasp from just reading documentation. Thank you!

[@bemi1410]

Vue beginner here, and very grateful for this informative video! Thanks.

[@princechavez]

Nice content, very informative! I have some minor constructive criticism though: in your example at around 6:30, I think it would help with clarity if you don't name the property name you are declaring the same as the preset vue property (am talkin about the data: () =>{ data: '...' } section). Cheers and more power!

[@isaacgrimaldo8807]

Thank broo, your video helped me in my job, you won a new subscriber today

[@piusvictor8780]

Thanks so much bro,this was one of the concept which confused me alot but now am happy you clear me all the doubts with your simple,clear and brilliant examples, One love from Tanzania... Cheers ✨✨

[@curadermbcc9923]

Very good video!! Finally I understand what are the slots and how they function. It's easy understand them, when someone explains the things fine. Thanks!

[@hakan6379]

theme seems like disco! :D thank you!

[@pankajs271178]

One of the Best Slot explaination ... great.. Thanks a lot

[@tmbarral664]

yep, watched in x1.5. Used to go for x2.0 but sometimes the sound quality becomes too bad. Anyway, your talk speed is perfect. It's just a matter of pref (and allowed time ;) )

[@beedleChompz44]

Thank you for your video! To answer your question, yes I watch at 2x. Would have loved to see a use case where slots is better than props and emit events! That would have tied it together really nice :)

[@TecnoRepair]

OMG! the best tuto I subscribe right now

[@jonsplex]

I am one of the people who watch your videos at 2x speed. I don't watch full videos -- I do my best to extract only what I need and move on to my work or another video if I don't get the info that I need.

[@rishidusad2985]

had a diff problem but your video kinda solved it

[@saturne2248]

Thanks for the video, really helpful.

[@notlessgrossman163]

Good format to the point. I pause often to check the code. BTW I was expecting you to tell a real world example to get the 'why' of a feature. I like that you mentioned that the same thing can be done with props and events. I had to check again to confirm the difference I would really like a performance, limits analysis of comparing these options including Rxjs and Vuex.

[@deirdrechong623]

Please use composition api when using vue 3

[@39zbk13]

great job will help me in my work ;)

[@VitorSouza-uj6ep]

Hey Erik, what theme do you use in visual studio code? this theme is amazing by the way!

[@gatosssss1]

Starting to learn Vue and i have always wondered how slots work. Seems like it aint so difficult but i probably need some time to think how to use them for an actual web app. Great video btw.

[@ProgramWithErik]

You can do it!

[@chidieberechukwudi9077]

Lovely. Please what type of vscode theme are you using ? I love it

[@chris_ea]

As always, awesome patterns revealed! Thanks!

[@nevinkuser9892]

What is this styling you're using to make it glow? Really cool! Please share. SIDENOTE: I tried watching in 2x and it was too fast. I realized that I was actually robbing myself by watching important videos at 2x because it's WAY harder to retain the information. The problem is patience and focus lol. Studying is painful sometimes, but we need to accept it. 2x is similar to people using drugs to escape reality. A lot of the time it's not that the presenter is talking too slow, it's that we don't want to be there in the first place.

[@bstark1640]

I actually fell in love with the ide theme. What is it?

[@TheDvscg]

Found it! It's called SynthWave'84 - search for it in the marketplace.

[@ChrisHaupt]

very useful, thank you!

[@atvoquangthanh8086]

What extension do you use to change the theme of vscode? Tks you

[@kalmanbraz7696]

Hi! What theme u use for vscode?

[@oshrahartuv4989]

Awesome video!! Tnx

[@arkz22]

Is there any difference in term of performance when passing data using slot vs emit/props ? Thank you for the explanation really like your video.

[@devKev34]

I didnt think much of slots, but with that functionality i think it's pretty underrated. is that new with vue3?

[@EdsonSilva-qr5gr]

This is awesome, thank you so much

[@SebastianNeikes]

Yes, I'm currently watching this in 1.7x speed. But I'm only telling you this because you were curious, that is no critique! If I watch at a slower speed my brain starts wandering off, thinking about other things and loses focus. The best way for me to stay fixated on a video is to increase the speed to force my brain to concentrate.

[@SebastianNeikes]

But I've been a developer for quite some time, it's just vue specifics that are new. For example, to get from knowing absolutely nothing about vue to the basics I watched "Vue.js Tutorial: Beginner to Front-End Developer" by "Envato Tuts+" ( /watch?v=1GNsWa_EZdw ) in 2.3x speed on average! (sometimes I slowed to 2x and at most I used 2.4x). I hope that insight is interesting

[@ruirodrigues705]

really nice slot tips! thanks.. :)

[@ProgramWithErik]

You are welcome!

[@hend9745]

This was perfect, thank you

[@icarofreitas6523]

Thanks

[@PriyankBolia]

for me min speed is 2x, generally non programming videos at 3 to 5x, and only music or comedy videos at 1x and 1.5x

[@ProgramWithErik]

Aww, ok. Yeah I thought that would be too fast, but glad it works

[@elimenendez237]

Thanks a lot!

[@nangseakheng2976]

Love your video 🥰🥰

[@rjfortis5415]

Great tutorial Erik!

[@Alekobeats]

This should work in Nuxt too right? I’ll give it a try. I can see a useful case for this.

[@ProgramWithErik]

It should

[@jenstornell]

Speed is perfect and the video is not too easy or hard, for me at least. 👍

[@silvesterwali6565]

Usefull

[@rpadron1986]

the speed for me is 1.25x for your videos, thanks for a cool tips :)

[@jntaca]

Thanks !!

[@nero1375]

Thanks for this tut! Anyway, Did you know why filters are gone on Vue3?

[@SidharthShambu]

Is data passed through slots reactive?

[@balenata9359]

bro what theme you use ?

[@v1r47]

Yes, I watch at 1.5. It is good.

[@v1r47]

That was a wonderful tutorial. I never thought it that way!!

[@LukeryaPereprygova]

beginner noob question but still - what are a couple of real life practical examples?

[@rahimeinollahi1]

thanks man

Got stuff Erik! thnks a lot

[@sadrashadmand552]

when to use slots vs props for this kind of passing data between child and parent components ?

[@minhtringuyen1267]

can u show me some extention used, please.

[@AlexanderSchaffer72]

just fine, thx!

[@aesmerio]

Thanks for the great content =D

[@ProgramWithErik]

Welcome!

[@sergiomassip5731]

Amazing !!

[@danman3196]

If I use slot name, it doesn't work . is there a way to fix it ? tks u

[@TershiXia]

why your text will be lighting? what extension do you use?

[@ProgramWithErik]

Synthwave 84!

[@TershiXia]

@@ProgramWithErik thx bro

[@hectorPerez-qf1ho]

Te amo bro

[@odenismata760]

How can I access slotprops from ???

[@lekhrajrai1172]

which font you are using?

[@SupunLakshanDissanayake]

i believe its the theme he using, which i think it is github.com/robb0wen/synthwave-vscode

[@ProgramWithErik]

Yup

[@yadusolparterre]

I watch your videos in 2x. But don't worry, I watch other videos in 2.5x :)

[@fayismahmood8612]

Thnx❤️❤️❤️❤️❤️❤️

[@anveshveerelli9257]

Yep I watch in 2x speed, because I will watch each video 5-6times to master. So, to read and learn, there are techniques like skimming, scanning, intensive etc. Watching your video at 2x speed is like skimming an article....

[@ProgramWithErik]

Great tip!

[@mohssinemythe1235]

Thanks for the great content There is any MEVN stack project in the future?

[@ProgramWithErik]

I'll look into it!

[@Alekobeats]

Please do!

[@michelfonseca3461]

what is this theme?

[@radagast2001]

I have a doubt, I am new at Vue. How can you update child's data? I mean, I have a parent component which uses a child passing a 'data'. When I update parent data, should it be update child's data??

[@ibrahimsule1873]

I've seen where slots are being used like this and my question is... how is data being retrieved when it's not restructured from an object. From your video, data was restructured from an object.

[@sajjadrahimi1181]

what's this guy's vscode theme?

[@jgamer1394]

Man, should I wait for the official release of vue3 for my project or just use react for now.

[@StraightCrossing]

My experience has been that Vue3 is pretty stable. However if you plan on using TypeScript and the composition API things might be a bit more difficult. Things like vuetify and buefy weren't playing nice and type support for reactive objects seemed to complain with computed properties nested within them. But if you want to use JS you'll probably be fine.

[@jgamer1394]

@@StraightCrossing i want to use vuetify and laravel. But base on vuetify roadmap they will release their vue3 version next year

[@StraightCrossing]

@@jgamer1394 yeah all of the component libraries have a lot of work to migrate to Vue 3 which is unfortunate. However you can use CSS libraries like bulma for styling and get most of the way there. But if vuetify is a must I'd wait or start now with Vue 2 then migrate to 3. You shouldn't have to rewrite html to migrate to vue3

[@lararawf6100]

God bless u

[@nadircatalkaya5011]

I watch your videos at 1.25x speed even if English is not my native language.

[@ahmadalghali90]

I watch all tutorials on 2x lol.. including this one

[@tontonanton]

to me, it 's valuable only for strongly coupled parent/child components. adds an other layer of complexity to the game, and devs have to keep things as simple as they can. a good modular state managment wouldn't be preferable ?

[@grugbrain]

I am expecting more slots. ;D. This one is too short.

[@dcernach]

For me I'm used to watch almost all youtube videos at 1.5x or 1.75x and some at 2x speed !!

[@MereddynYT]

I am one of those guys, that watch development videos / tutorials in 1.25 or 1.5. Got used to it.

[@sadrashadmand552]

2x watcher :-D

[@OmarAlsaheb]

As u ask , I watch you on 1,75 :)

[@ImanBcheck]

1.25

[@klauslife10]

You can pass down a function and handle the click on the child, hello = () => alert();

[@JeffPohlmeyer]

Watching right now in 1.5x, which is a little fast. One I have to watch in at least 1.5 is Ben Awad

[@kennethpineda6143]

Please make Vuetify tutorial and try there slots.

[@ProgramWithErik]

Ok~!

[@johnm8358]

how do i configure the @ to work on import?

[@ProgramWithErik]

It's by default if you create it with Vue CLI

[@johnm8358]

@@ProgramWithErik ah that's where I went wrong

[@Martin-jq8th]

I'm watching on 1.6x

[@JoeSmith-kn5wo]

Yes, I watch in 2x speed 😁

[@zacharyallen4270]

I've just kind of gotten used to watching tutorials at 2x speed, if I follow along I go slower though.

[@ProgramWithErik]

Sounds good, me too

[@grapes639]

Thought Slots were going away with Vue3?

[@ProgramWithErik]

Nope, they are staying, as far as I know.

[@grapes639]

@@ProgramWithErik Alright. Good to know :) If I may ask additionally: I thought that "methods" was replaced with "setup" in 3? Or do they serve different purposes?

[@DedicatedManagers]

Grapes: The “setup” or the “composition” api is purely “additive” meaning it is a bonus feature. The original way (the “options api”) of building components will remain.

[@deload]

2x

[@kyuss0x1]

i am watching in 3x

[@matteobagni1235]

I watch everything at 1.5

[@akjkjkak]

2x speed here :)

[@ProgramWithErik]

2x gang!!

[@ifriends6281]

1.5x here bro