2.2 Vue-ifying JavaScript Code

In this lesson, we are going to encapsulate the functionality of Bootstrap's modal component with a Vue component. I like to call this Vuefying because we are essentially taking code that was not written for Vue and turning it into a Vue component so that we can use it within our applications. This is a very regular thing because, well, let's face it, there's a ton of useful JavaScript code available for us to use within our applications. The only thing is that they were not written with Vue in mind because some of this code was written many years ago before Vue even existed. So the idea is this. We have some code that we want to use. It could be something simple, it could be something a jQuery plugin, it could be a complete library. But we want to use it within our application, so we want to wrap it with a Vue component. And I just want to throw this out there. There's a course here at Tuts+ called Convert a jQuery App to Vue.js. Now, it's primarily focusing on actually converting an app. But there is a lesson under wrapping a jQuery plugin. So if you're interested in that, it is a short course, 45 minutes long. I'm not gonna say anything else about that. I should also say that this process is also highly dependent upon whatever it is that we want to use. So I'm going to give you some ideas and concepts that you can apply to just about to anything. But how you do that and the things you actually implement is really dependent upon you and the code that you are going to Vuefy. So as I mentioned, we are going to Vuefy Bootstrap's modal. So before we start getting into that, let's first of all look at the code that I want to write. I wanna have a modal component that has a show property. And if it's true, then of course, it's going to show. If false, then of course, it's going to hide. But I want this to be dynamic. So we're going to have a modalShown property that we can change at any time, and that will show or hide the modal. So let's go ahead. Let's add that data prop, and then we will get started implementing this. This is, of course, going to be in a different file. So let's import Modal from, and that file will be Modal.vue. And then we will add that to our components property here, and then let's create that file. Now, as far as the modal that we are going to create in this lesson, it admittedly is not going to be very useful because it's just going to be static data or static content. Later on down the line, we will turn this into something that will be useful that we can use in any program, and it will be great. But for now, we're just going to stick with static content because, as I mentioned, I want to get the ideas and the concepts across. So let's just take some of the mark-up from the demo, and that's going to be our starting point. And there's an error over here, so let me quickly fix that. And as far as the JavaScript for this, we do have that show prop, so let's go ahead and add that. And this is going to change the behavior of our component based upon the value of show. So to me, that just screams a watcher. So we will have a watcher for show, and if value is true, then of course, we are going to show it. Otherwise, we will hide it. But for right now, we're going to stick with showing. Now, when it comes to showing a modal, the Bootstrap really gives us two ways of doing that. We can use attributes on an element that specifies the modal that we want to open, and that we want to open that modal. And that is certainly great, but that's not really going to work for us. Instead, we want to use the JavaScript API, which is actually nothing more than a jQuery plugin. So in order to do this, we need to import jQuery, so let’s go ahead and do that. And we want to retrieve the div element that represents our modal, because we're going to need that element so that we can pass it to the jQuery functions, so that we can then use the modal plugin to do whatever it is that we need to do. So we need an easy way to reference this element. Let's just use ref because that is easy. And let's do this. Let's say that our element is going to be this and then refs and then modal. And of course, we're going to pass that to the jQuery function so that then we can have easy access to the modal method, and we will call show. So there we go. That should show our modal, but of course, we need to set up something to actually show it. So we're going to have a button, and let's give it the btn-primary class. We'll say Show Modal. And let's do this. We will simply have click event listener. We will prevent the default action because I think it's a good habit to get in. We will say modalShown = true. So that should show our modal, and hopefully, whenever we click on this, we see our modal. We do, great. However, let's go to the view inspector and let's see what we have here. So let's refresh, and if we look at our app component, we of course have modalShown as false. If we click on the button, modalShown is true. That's great. If we close it, well, modalShown is still true, and thus, the show prop on our modal component is still true. So whenever our modal closes, we need to update that value. So to me, that is an event. So if we look at the modal documentation, we can see that there are several events. We have a show, a shown, a hide, and a hidden. And we can essentially replicate these within our components. So in this case, I'm just going to replicate the hide event. So in our app, what we would then have is we would listen for the hide event, and here we would say modalShown = false. So then what we need to do is emit this hide event whenever the actual hide event occurs. So we need to set up that event lister. Well, a hook is really what comes to mind, so my first thought is, okay, we could do created. So we could say this and then refs and then modal. Then we could call on. We want to handle the hide.bs.modal event, so let's add that there. And then for our event handler, we would simply emit hide. Just like that. That's great, except that that really doesn't work, because whenever this created hook executes, we don't really have access to our refs. So instead, what we could do is use the mounted hook. So now if we go to the browser, let's inspect the app components. We see that modalShown is false. If we click on that button, our modal shows. If we close it, we can see that modalShown is false. So there we get the functionality that we would expect. If we look at modal, we can see that that value for show changes whenever it is shown and closed. Now, one thing I do want to be able to do is close this programmatically so that if we toggle modalShown to false, well, that it hides as well. So that means that we need to add an else here inside of our show watcher, and we will simply hide. And so now we will refresh. Let's make sure that our existing functionality works just fine. Everything is going okay. But if we do this programmatically, if we change modalShown to true, we see our modal. If we change it to false, it's hidden. Now, there are four options that we can implement. And really, there's only three, because the fourth, show, is not something that we would actually supply as a prop for our component. This is something that we would use internally, so that whenever we call the modal method, we would pass in an options object that says show equal true, because we are showing the modal at that point in time. So let's implement the backdrop. And we can see that it can be boolean value or the string value of static. So it's going to require something more than just a simple truthie or falsie test. We'll need to see if we have an actual value and then use that. So as far as the prop is concerned, we just need to specify that we have a backdrop prop. And then inside of our show watcher, we are going to build an options object. So let's go ahead and do that. Let's set show to true because we are showing our modal here. And then we will check to see if our backdrop is not undefined. Because if it's not, then we want to work with whatever value that is. And we will simply add a backdrop property to the options object, and then we will pass our options object to the modal method. So that should work, hopefully. Let's, first of all, make sure that we haven't broken anything, and it looks like everything's working okay. So now let's add that new backdrop prop here, and we will set it to static. Now, a static backdrop means that whenever we show the modal, we will not be able to hide it by clicking on something other than the close buttons. So if I close, or rather, if I click in the body, we can see that it is not closing as it did before. So that is working just fine. Now if we set backdrop to false, let's see what kind of behavior we get. If we show the modal, we still get that backdrop, but also notice that it is expecting a Boolean value or a string value of static. So, what we really want to do then is use the v-bind syntax so we are sending an actual Boolean value. So now let's do a hard refresh. Whenever we view the modal, we can see that the backdrop is not there. So there we go. We have successfully wrapped Bootstrap's modal component with our own modal view component. And really, the process is straightforward. Arguably, the toughest decision is where and how you want to initialize your jQuery plugin, or your library, or whatever it is that you're wrapping. But as I mentioned, this wouldn't really be very useful unless if we needed a static modal. So in the next lesson, we are going to look at slots, which is arguably the most powerful feature in Vue because it allows us to build very dynamic components.