2.1 A Vue.js Component Primer

The first things that we are going to target are our forms because, as I mentioned in the previous lesson, the user's primary point of interaction is our forms. And by default forms aren't that great to work with. So there's a lot of room for improvement for our forms because there's really nothing spectacular going on there. So we are going to essentially take the forms as they are, inside of our Blade vues, and we're going to convert them into what are called single file components. These are Vue components that we will make available in our application so that they essentially will be serviced through JavaScript, as opposed to the Blade engine. Now of course, the Blade engine is going to be involved, but when it comes to handling the output for our forms and the data inside of the forms, it's going to be through Vue. So we have an example of a single file component. If you go to resources, assets, js, components, there's a file called examplecomponent.vue. And if you open this up there's going to be two parts here. There is the template, and you can see that that's nothing more than just regular HTML, and then there's script. Now, if you aren't familiar with any component driven framework like Vue or React or anything like that, then this might seem a little, well, blasphemous. Because for many years we have beaten with a Bible of separating your concerns. No HTML and Java Script, no Java Script and HTML, and all of that stuff. Well, that's kind of been thrown out the window. Because when it comes to creating user interfaces, and especially user interfaces that are made up of individual components, it makes sense to mix that stuff together. So we have script and our HTML and we can even add style here. All in one file, and everything is nicely mixed together. Now, we can break this up in to multiple files. We can put our script inside of an external file, as well as our style. But for right now, it just makes sense to put everything in the single file. And if you have any experience with React, you're going to see some differences here. At least as far as the template is concerned, because we're using the actual HTML class attributes. We're not saying class name. Now, that's not to say that there aren't any special Vue-specific attributes that we can't be using here, because there are. But when it comes to just normal, everyday HTML, we have just normal, everyday HTML here. So we have this component, and by itself, it's just a file. What we need to do then is register the component with our application. And we do that inside of the entry point of our application, which is app.js. Now, you might think why is this our entry point? Well, let's go down to webpack.mix.js. And we are pulling in mix here, first of all, and then we're saying mix.js, and the first item here is app.js. Now, what this is actually doing is bundling all these files together, but because we are listing app.js, here, this is our entry point for all intents and purposes. So inside of app.js the first thing being done is require and then bootstrap. And then window.Vue equals require, and then they're passing in vue. Now, require is something that comes from Node. If you had Node packages, which is where the term node package manager comes from, then you would normally require them. However, with native JavaScript modules, what we can do now is say this, import Vue from 'vue'. And instead of saying require Vue, then we can just do that. So we can come in here and we can use new ecmascript script features here. So we are simply just changing the syntax to using the module syntax, import Vue from 'vue', and then we're saying window.Vue = Vue here. And that's great, but here on line 18 is where we are registering that component. Now, the first argument being passed is the name of the component that we would then use within our Blade vues. So this is simply example-component, and then the file for that component. So it is requiring that example component and it, of course, has the path there. So then, in order to use this within our application, all we have to do is just go to our Blade views and use that element. So if we go to views and then home and index, that is the index page here whenever you just go to local host at port 8,000. And this is index on home. So if we come in here, and if we simply say example-component, well then, the content of that component is going to be output right here. So if we go back and refresh the page, this is what we have, example component, I'm and example component. Now, because we are going to take our forms and convert them into Vue.js components, we're going to run into an issue when it comes to data. Because in some cases we're going to be passing data from the controller to the Vue, and that data needs to get into our Vue.js components. There's one of two solutions that we could use. The first is to use AJAX. And that would be great, but we would also have to refactor our backend. But, in this case, we're just adding some enhancements, we're not completely rewriting our application. So instead what we can do then is pass the data by using properties or, in the case of our markup, they look just like attributes. So if we wanted to add a message property to this example component, we could come in here and we could say message= and then Hello, Vue, or whatever you wanted to put in there. But this, of course, isn't enough, because the component itself doesn't recognize that there is a message property yet. So we need to go to our component and we need to add a property to our exports, and it's going to be simply called, props. This is an array, and each item in the array is the name of the property, so we are passing in some data with the property of message. So we are going to add that our props. And then in order to display that, this is going to look very similar to our Blade templates. In that we will have the double curly braces, and then the name of our property message. Now, if we go to the browser and refresh the page, we aren't going to see that updated. The reason being because we haven't compiled that change. Any change that we make, we're going to have to essentially recompile our code. So we need to do that from the command log. We'll say npm run dev. And then that's going to rebuild all of our JavaScript so that the next time that we reload the page, it's going to have that updated example component. Now, this takes just a few seconds. It's going to go through and bring in all the dependencies, compile and bundle everything. But then whenever it's done, thankfully we don't have any errors. If we did, then they would be listed here. Now whenever we refresh the page, we're going to see our message there. Now, this can be a little tedious because every little change that we make is going to force us to recompile our code. So we would have to come back and say mpm run dev, or we can say npm run watch. And this is going to watch all of our files and any time that there is a change, is going to automatically rebuild. There we go, we see that it build it and we can come back and see the same results. But if we modify that file, let's say that we don't wanna call this message, we just want to call this msg for short. So if we go and change that, whenever we go to the browser and we refresh the page, well, that is no longer there because we are passing the data as that message property as opposed to msg. But to me that doesn't make sense, so we'll just change that back to message and message, and there we go. So this is the basic idea that we are going to be using at least for the next few lessons. We're going to take our forms, convert them into these single page components so that we can start adding some interactivity. Things like client side validation and other wonderful things.