I like the Options API even more. It feels more structured than this kind of loose approach using the Composition API. So again, all of this is perfectly normal. We haven't really reviewed many benefits yet. So that's what I want to start doing or begin doing over the next few episodes. Let's begin by talking about code reuse. So here's my Home component. Actually, we don't even need this. Let's get rid of that. And then temporarily, I'm going to switch back to the Options API.

Let's get rid of that. And then temporarily, I'm going to switch back to the Options API. Okay, so imagine here, in response to something, we'll just use a button here. When you click on the button, we want to display some kind of flash message to the user. Okay, so I could say when you click on me, call a method flash, and we'll say it works. All right. So of course, I need to create a method here called flash that accepts a message. And for now, I'm just going to do an alert. Switch to the browser, give it a try, and of course, it works. Basic stuff at this point.

Okay, so we'll say it works on the About page. But of course, if we give it a try, that's not going to work at all. And the reason is obvious. I don't have access to this method. It was defined in a totally different component over here. Okay, so now, you think, well, I need to call flash, so let's go to the About page, and I'm going to paste in all of that code. And now, it'll work. Yep, About page, Home page, we're up and running. But yeah, clearly, you can see this is not ideal.

Yep, About page, Home page, we're up and running. But yeah, clearly, you can see this is not ideal. I don't want to copy and paste this every single time I want to show a flash message on a new page. And then further, if we change it, there's an opportunity for these things to become out of sync. So for example, maybe we decide to switch to a tool called SweetAlert. So I will pull that in through NPM, and then I will import it up here. I'll call it Swal. There we go.

I'll call it Swall. There we go. And then, it's as simple as replacing Alert with SuiteAlert. Okay, so now, if we give it a try, we have our fancy new alert message, but yeah, way back on the Home page, that's still using the traditional alert. So now, things have become out of sync. And it's really easy to do that six months down the line, when you've forgotten that you copied this from one page to another. All right, so let's see how to fix that. So first, real quick, if you're not familiar with SuiteAlert, you can always add a title,

Okay, so a more legacy or traditional way that we would solve this in Vue 2 applications, and actually on that note, it still works in Vue 3, it's just a little frowned upon these days. Anyways, that technique is known as mixins. It's sort of like traits in PHP. So let's give it a try. I'm going to add a new directory called mixins. And you can name this anything you want. I'm going to go with Flash. Okay, so when we are creating mixins, one nice thing is the object here will be identical

I'm going to go with Flash. Okay, so when we are creating mixins, one nice thing is the object here will be identical to your Vue components. And whatever you have here will literally be mixed in with the component that pulls it in. So that means if I want a method, then I create one here. If I have a particular hook, then I would declare it here. And again, it all gets mixed up or merged into the single Vue component. Okay, so now you can see where I'm going with this. If I switch back, I could take, well, all of this and move it in here.

Okay, so now you can see where I'm going with this. If I switch back, I could take, well, all of this and move it in here. And we'll return this. All right, we have our mixin. So now if I want to use it back in the About page, so import Flash from, and we go into our mixins directory, and Flash. Now I can export an object, and I will add this new mixins property where I can provide an array of mixins that should be, again, mixed in with the current component. Okay, so now I once again have access to this Flash method because it was defined in the mixin here.

Okay, so now I once again have access to this Flash method because it was defined in the mixin here. So this should work exactly the way it did before. But now I can also pull it in from the Home Vue. So let's do this. So now I have a single place where we can define how a Flash message or overlay is presented to the user. And we don't have to worry about them becoming out of sync. I don't have to worry about copying and pasting implementations. This is definitely a step up.

this method, and you don't immediately know where it comes from. And worse, if you have multiple mixins being pulled in, or you're using a library that's pulling in mixins, again, it becomes confusing to determine where this is being defined. Or if you're changing state, maybe you're changing some kind of message property, but you don't see message defined here, so you find yourself having to look into all of your mixins to see where it's defined. And yeah, that's not dissimilar to traits in PHP. Now granted, a good IDE can help you with this. So in fact, I think PhpStorm can figure out where this is defined. But yeah, you're not always going to be using that.

So in fact, I think phpStorm can figure out where this is defined. But yeah, you're not always going to be using that. And still, it's a potential concern. So a more recommended approach is to reach for something known as composables. And I'll show you how to do that. Let's create a new directory here called composables. And I'll add a new file here. And the common convention is to name it use, and then the thing it represents. So in our case, we are working with Flash messages, I will call it useFlash. And now I will export a function that has the same name as the file.

So in our case, we are working with Flash messages, I will call it useFlash. And now I will export a function that has the same name as the file. Again, we're following conventions here. Okay, so let's do it. I'm going to take everything we have here, and it looks like it's just a method called Flash, and I will define it like so. I'll paste that in, and then declare Flash as a function. And you do note when I pasted that in, it automatically pulls in the import as well. Okay, finally, I'm going to return whatever I want to expose to the outside world, or whatever I want to share.

Okay, finally, I'm going to return whatever I want to expose to the outside world, or whatever I want to share. In this case, it looks like I just want to share a method called Flash, or a function called Flash. Now what we have here is technically just a module. I'm calling it a composable. But if you think about it, we're not really leveraging the composition API, we're not managing any state. But nonetheless, we will get there. I'm trying to start with the simplest possible example.

But nonetheless, we will get there. I'm trying to start with the simplest possible example. So this is a very basic composable in quotes. Okay, so now let's use it. I'm going to go back to my Home component. We're no longer using mixins, so I will replace this with useFlash from composables useFlash. Okay so now, in my setup method, and this is almost always where you will call your composables, I can trigger this method or function. And think about it, that function is going to return to me an object with a key of flash. And that property is equal to a function that displays a SweetAlert.

And think about it, that function is going to return to me an object with a key of Flash. And that property is equal to a function that displays a suite alert. All right, let's use it. So I will pull that out, Flash. And now don't forget, when we create this setup method, whatever you've returned from it is exactly like what you would have defined in your data method. Whatever I return here is just like what I would have returned from the data method. Okay, so I will return Flash. Now I can use it in my template. Switch back to Chrome, we're on the home page, and it works.

Now I can use it in my template. Switch back to Chrome, we're on the home page, and it works. Very cool. So yeah, this is an alternative to using mixins. And I think you'll find this is the more recommended approach these days. And don't forget, we can even clean this up further by using script setup. When we do this, just like before, I can take the contents of my setup method and graduate it to the top level like this. And just to prove it to you, of course, it still works. But yeah, now to my eyes, this becomes much more appealing.

And just to prove it to you, of course, it still works. But yeah, now to my eyes, this becomes much more appealing. If I want to reuse code, I create a composable, I import it, and then I use it. Okay, so now in my About page, I'm going to do the same thing here. I'm going to paste it in. And now I have access to a Flash function within this page as well. Give it a try. It works here. And on the About page, it works as well. Okay, so now if I want to change the functionality, I can do so within a single place.