DEV Community

Cover image for How I'm using Vue Slots on my site

How I'm using Vue Slots on my site

Samantha Ming on July 08, 2020

Say hi to the first Vue tidbit ๐Ÿ‘‹ Itโ€™s about time I start covering Vue in my code tidbits, right ๐Ÿ˜‰โ€ฌ Use the new named slot shorthand with "#". Th...
Collapse
 
samanthaming profile image
Samantha Ming

The messy drawer is mine and the organized is yours ๐Ÿ˜„! I need Vue slots in real life ๐Ÿ˜‚

Thanks for being supportive on the Vue topics! I canโ€™t wait to write more. Been learning a lot on the job, so I think itโ€™s about time I start sharing ๐Ÿ˜†

Collapse
 
nathanheffley profile image
Nathan Heffley

Awesome article! I hadn't seen the new # syntax for slots; it's so clean now! ๐Ÿ˜

Collapse
 
prahladyeri profile image
Prahlad Yeri

Slightly off topic but each time I try to get into some modern js framework, I always get confused between angular, vue and react. So, instead of trying to learn all three of them and getting mad, I simply don't bother! Can you state which one of these is the best, or could they even be combined for some use cases?

Collapse
 
twitch0125 profile image
Kaleb Ercanbrack • Edited

I've worked with all of them (I use Vue at work) and here's what I think. Vue was made by Evan Vue, and is largely community supporte, and is the youngest of the 3. Vue is definitely the easiest to get into, and is growing rapidly but still doesn't have as large an ecosystem as React. Vue combined a lot of things from React and Angular and gave it their own Twist. I'd say Vue's biggest Pro is that it's progressive, meaning you can convert an app to Vue one piece at a time. The biggest Con would be it's smaller ecosystem, and it doesn't have the best Typescript support (that is, until we get Vue 3.0)
React is backed by Facebook, and probably has the largest ecosystem. There's also React Native which is getting popular for native mobile app development. The biggest Pro for React is definitely the ecosystem. You'll probably find anything you'd ever need has some support for react. The biggest Con, imo, is that there's no set way of a styling solution. Vue and Angular both have set styling methods for each component, but react is "just JavaScript" and you have to come up with a way.
Angular is backed by Google. I'd say it's the hardest to learn, as you have to learn Typescript and RXJS. Angular came before React, and is kinda fading away. Angular's biggest Pro is that they have everything included, ie: state management, styling solution, routing, even their own component library (Angular Material). However, Angular also has a much larger file size than React or Vue, and its growth is stagnating and it's adoption isn't as high as Vue or React.

Collapse
 
seanolad profile image
Sean

I personally would go with React. It doesn't stray to far away from basic Html principles, unlike Vue and Angular which go in almost entirely different directions.

Collapse
 
samanthaming profile image
Samantha Ming

Fair! I wish I was more familiar with React. But Vue was the one I found the easiest to pick up, so I have been using it ever since ๐Ÿ˜„

Collapse
 
daveblythe profile image
Dave Blythe (he/him)

What's implied here is that I REALLY need to implement the slots concept in my garage :).
More seriously, I'm right at the "just enough to be dangerous to myself" stage in learning Vue... And this post is immensely valuable to me!
Thanks so much for the simplified (but conceptually accurate) explanation.
Looking forward to more tidbits!

Collapse
 
samanthaming profile image
Samantha Ming

Slots in real life is my next business idea ๐Ÿ˜‚

Vue is a new topic I want to cover more so Iโ€™m glad you found it helpful. Thanks for reading my article! And yes more tidbits to come ๐Ÿ˜„๐Ÿ‘

Collapse
 
chiubaca profile image
Alex Chiu

Yay for Vue tidbits! Look forward to more! can you do one on plugins vs mixins ? I never know which to use

Collapse
 
samanthaming profile image
Samantha Ming

Ah mixins is my headache ๐Ÿ˜ฃ BUT Iโ€™m recently learning the new Vue composition API which solves some of the concern of mixins, so cant wait to be able to use that!

In regards to plugins, can you expand more? So I know content to better create ๐Ÿ™‚

Collapse
 
chiubaca profile image
Alex Chiu

Yes of course, so for example in one of my early Vue projects where I had no idea what i was doing. I started writing a mixin which handles all of my HTTP requests to firebase.

I noticed in other projects , this was handled much better as plugin instead, this allowed for you to extend the Vue object, so you could do something like this.$http.get() or this.$http.post() etc inside a vue component. This seems a lot cleaner! It's left me wondering in which circumstance would a mixin be better choice over a plugin? like you said, perhaps mixins are going out the door with vue 3?

Thread Thread
 
samanthaming profile image
Samantha Ming

Ah gotcha! Thanks for clarifying! That's a good question -- I have been avoiding mixins so I'm not sure when it is advantageous ๐Ÿค” Let me dig into it and see what I find ๐Ÿ‘

Collapse
 
gabe profile image
Gabe

Great analogy for slots!

Collapse
 
samanthaming profile image
Samantha Ming

Phew glad that made sense ๐Ÿ˜… I find analogies helps me with my own understanding, so Iโ€™m happy it didnโ€™t cause more confusion ๐Ÿ˜„

Collapse
 
lowcozy profile image
LowCozy

nice very clearly

Collapse
 
samanthaming profile image
Samantha Ming

Yuppee! Glad to hear that ๐Ÿ‘

Collapse
 
kirofint profile image
Kirill

I like the presentation of the material

Collapse
 
g33knoob profile image
G33kNoob

You have a great website i love it

Collapse
 
samanthaming profile image
Samantha Ming

Awesome, thanks for the positive feedback! ๐Ÿ˜„

Collapse
 
singhacz profile image
singha-cz

I believe it's Serena :-)
Thanks for your great article though.

Collapse
 
samanthaming profile image
Samantha Ming

let me fix it ๐Ÿ˜ฑ omg canโ€™t believe I spelled that wrong ๐Ÿ˜ฃ thanks for the catch!!! Letโ€™s keep this on the DL, cause obviously Serena will read my article ๐Ÿ˜