The key to writing highly reusable Vue components (2/4)

Hey there! In yesterday's email we talked about the importance of reusability in your Vue components. Today I'm going to share with you the key to making that a reality. I had asked what you thought the key feature for writing highly reusable components is. My inbox filled up with great replies from you! ​ The most common answers I got were slots, composables, and props. ​ So, what's the answer? Based on this informal "poll", I think many of you will be surprised. The Key Feature We have to go back about 7 years, to when I first started working on a component library at my job. One thing you need to know about me is that I love weird ideas. So one Friday afternoon I found myself trying to see if I could build an entire Vue application entirely inside of the template block — no script block allowed. I have no clue where I got the idea, but it sounded like a lot of fun (and it was!) I had so much fun that I continued experimenting with this idea, which eventually led to my very first lightning talk at VueConf Toronto in 2018. But then I realized that the patterns and ideas I had developed were actually useful, and not just a fun distraction. I started to apply them to the component library. Then, the core product itself. Of course, I never wrote production code for my day job that only used the template block — I'm not that crazy! But those initial weird experiments were the seed of a whole slew of useful patterns and concepts. As I led the efforts to develop that component library and continued to ship new features, I slowly refined these ideas over time. The main feature I used across most of these ideas? It was slots. Specifically, scoped slots. Why scoped slots? We could spend a whole series of emails on this detail alone, but I'll try to keep this short. First, slots let us use markup as a first-class data type. Props don't really allow us to pass around components and HTML — at least, not in a great way. You can use v-html or pass components through props, but that's not a great DX and it's hard to maintain. Markup is important because it gives us flexibility. You can put in literally whatever you want, which lets us write components that are far more reusable. Second, scoped slots rely on inversion of control. Instead of the parent component spoon feeding information into the child component, we give the child component a chance to grow up and take on some more responsibility. With scoped slots, the child can give the parent some information and have more control over the slot. This inversion opens up a whole new world of possibilities for us. If this doesn't make complete sense to you, don't worry! Slots are hard. We'll cover them in more detail in tomorrow's email. But before we wrap up, I need to address a question I'm sure you've been wondering about. Why not composables? Composables are fantastic at helping us to reuse and organize our logic. But what about our UI? What about the templates of our components, and hooking up all of our logic to those components and HTML elements? Composables can't really help us there. So, while they are great at helping us with logic, they're only a piece of the puzzle. We need something more to get us all the way there. Understanding Scoped Slots Slots, especially scoped slots, are one of the hardest parts of Vue to master. But, trust me, they're worth mastering, just as Patrick was telling me this morning: Tomorrow we'll go in-depth into understanding how they work, and how we can get the most out of them. I hope to give you as many "aha!" moments as possible. — Michael

Unsubscribe | 8 Queen St N, Kitchener, ON N2H2G8