Vue 3 Slots

Transcript from the 'Slots' Lesson

[00:00:00]
>> Slots, slots are really fun. So far we've been passing things with props and saying like, okay, render this thing but bypassing props. But there are instances where you just need to render a little bit of content differently. So you can pass some content into a component with ease.

[00:00:17] It's just waiting there for that content. So a modal is a pretty good example of this. Typically, with a modal, you've got something that is going to always function, similarly, where it's got a certain presentation style, it's gonna open, it's gonna close, but what's inside of it might change, right?

[00:00:34] The way that you're using that modal might change because you want different content to be displayed. So here, it's Here I am, Here I am. And, inside of here, if we look at this we've got is showing, so we've got a v-if v-else work, basically toggling. This is showing, and we've got our template, Here.

[00:01:00] Inside of our template for this kind of script tag, we're putting in a thing called a slot. What that allows me to do is inside of that component rather than just saying at modal and closing off at modal, I can put whatever I want in here. I could put h2s, I can make a p tag and say like, hey there, everyone, I am more and p tag, I'm not passing that in with a prop.

1. Just like in the other tutorials in the advanced series we have looked at thus far, the tutorial on Component Basics is a perquisite. When Vue 2.6.0 was released, Vue introduced a new unified syntax which is (the v-slot directive) for named and scoped slots.
2. Vue users should use the official @vitejs/plugin-vue-jsx plugin, which provides Vue 3 specific features including HMR, global component resolving, directives and slots. If not using JSX with React or Vue, custom jsxFactory and jsxFragment can be configured using the esbuild option. For example for Preact.
3. We have the Layout component with multiple slots. Then in the test, we mount the components with all the slots filled. The keys have the slot names, the values are the HTML we want to put inside it. Then we can check the HTML that’s rendered in the last 3 lines. Conclusion We can test Vue 3 custom input components and slots with Vue Test Utils.
4. Alternative to Mixins/Scoped Slots. AND / OR Type safety in TypeScript is important. Reactive takes an object and returns a reactive object toRefs creates a plain object with reactive references Notice we don’t have to use.value since the object is reactive VUE 3.

[00:01:29] I'm able to put whatever content I want into that slot and it will just live as content. Modals are a great use case for this because that's typically what we do. We like want the same basic functionality, the same look and feel and everything. And then we wanna pass a bit of different content.

@vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggle - Vue 3 toggle component with labels, custom slots and styling options.

[00:01:46] So that's typically how we work with that. So we're passing in this slot, I'm gonna show you my veritable slot machine. [LAUGH] So we've got these slots to populate content. We have some pieces that are hard coded, but we were saying in this first one, we want slot number one.

[00:02:06] In the second one, we want slot number two, and we can put more information into slot number one, slot number two, both inside of that same app child component. And so here, we are like we can use slots to populate content. This is slot number one, this is slot number two, and both of them have this terrible joke of it's so we can hard code content in that component as well.

[00:02:31] But we can pass in whatever information we want. And it can be any tags that we want as well. Whereas with props, we're not necessarily passing in all of the p tags and all of this stuff too. So you can also have some defaults. So if you know that most of the modals on your site are going to be saying like, you're signed in, then you could, inside that slot, say, you're signed in and then replace it when you need to.

[00:02:58] So that's pretty cool. You can have more than one or if you just wanna keep things tidy by naming them, which I suggest, you can say, template v slot header. And then pass that in, nd then in the component itself, you would say slot neat, you give it a name.

[00:03:13] You say name is header, and then you say that template v slot. I'll show you an example of that. So if I have my Taco blog, because I blog every day about tacos, I don't really but I should. And then we've got this app child. I can say template v-slot header is the taco blog.

[00:03:34] The v-slot default is all of this information that I have. And then the v-slot footer has generated by Taco Ipsum. But you didn't know there was Lorem ipsum for tacos. And if we look at the component itself, we have a header that's just HTML, you don't have to put it in that header.

[00:03:55] And we've got our slot name header, we've got our slot name footer. But, here's the tricky part. If we have a slot that is unnamed, we can still pass information in. This was called v-slot default. So we had two named headers, or two named slots, and then a default slot that we can put this in.

[00:04:17] Another note between v2 and v3, this template v-slot is new. That's not how we used to work with it in v2. It's a way for us we used to use scoped slots slightly differently than regular slots, and there's a merging of this to make it a little bit more simple.

[00:04:34] So, here is all of this. And then if you wanted to see the rendered content, let's go back to the, my slides are getting a little slow here, sorry about that. If you want to see what was rendered to the page, like what was actually created, we have that header that I mentioned is just HTML that was placed in side of here.

[00:04:55] The main with all of these p tags in the footer, so it's rendered to the page like this and you can add whatever information you want. We could also do something like make a wine label if we wanted to. So I could say like, wine time, which is my favorite time.

[00:05:15] And then we've got a white label and a black label and I can even pick a color here if we wanted to, maybe something bright red, I can change the font. All of this stuff, I can add some flourishes, I can add a background. And I can change the image opacity if it's like conflicting with my background.

[00:05:37] I can change the placement of the label up and down and up and down. These are all form things that you did before with v-modal. And what's tricky here is actually that that entire label is passed in as a slot. Really what I have is this SVG and there's a lot of number garbage here, don't worry about that.

[00:06:01] That's coordinate system in SVG, like working with, rendering all of these different pieces of the SVG. But here is the magic. We have this black one and this white one, we're passing all the information of the SVG into a slot. And the reason why we might wanna do this is because we can have different styles for each one of them.

[00:06:28] So I can say like black label is fill black, black bottle and fill white and all of these things because I gave it a different class. Now, when we move to single file components, you can actually create a scoped tag for this. So that's really exciting. But here we're just doing what some classes, right, we're changing the way that it is outputting based on that.

[00:06:51] And, there's one more thing. There's a directive that you didn't see before. The hidden secret extra directive which is, this allows for us to use dynamic components. So, when we have this selected at back, the component is going to be whatever I selected here. And I have v-modal that allows me to select appBlack or appWhite and it's gonna switch out that component based on which one I want.

[00:07:23] So now we can pass all of that into a slot and we can also change all of those pieces based on that directive. So here we have that input type, the modal label color. So what we have is, when we click this button of selected, we say select appBlack or we say at click appWhite, cool.

[00:07:51] Let's talk about the keep-alive and the is directive. Let's do a little bit of a deeper dive into is directive because it is really cool and creating dynamic components is really cool. So, I mentioned before that we could do component is selected and we can pass in whatever we want and we can switch out components as we see fit, which is really nice.

Vue Jsx Slot

[00:08:12] We also have available to us this thing called keep-alive that you can wrap that component in. So, let's say we have this home component and this post component. And in posts, if I click on one of these, I have Doggo Ipsum, Hipster Ipsum, Cupcake Ipsum, excellent, and for each one of these I have a little bit more information.

[00:08:38] I have a bunch of things about the cupcakes, actually, let's open this one in a CodePen too. So we've got our current tabs, we've got home and posts. And then we've got our computed property which is showing which one we are using the home or the posts. And then in here, by clicking on this, we're creating this piece.

Vue 3 Slots Video Poker

[00:09:05] So let's go look at this. At click his currenttab is tabs, and the component is CurrentTabComponent. So whichever one we clicked on will bring up cupcake or hipster or doggo, but we wrapped it in a keep-alive. And what that allows us to do is I'm on Doggo Ipsum right now.

[00:09:26] If I go back home and I come back, there's my Doggo Ipsum. If I remove the keep-alive, this component will mount and unmount and I'll lose all that state. So if I say Hipster Ipsum, I go back here, I go back, it's not there anymore. Because the component is completely mounting and unmounting, it doesn't remember which one you selected.

Vue 3 Context.slots

[00:09:52] Whereas with this keep-alive, it's saying remember which one I had selected. Remember which piece I had dynamically bound. So that's pretty cool. That means you can create dynamic components that remember themselves quite easily. So there's more information about scoped slots and there's tons more information in the documentation.

Vue 3 Slots Online

[00:10:18] We have a lot to cover today, so we're not gonna go into any diving into this any further but you can absolutely check more information out there