When you create larger apps, it's a good idea to break the functionality into pieces called modules. It makes the application easier to create and maintain.
By far, the most popular tool in use today for this, is called Webpack. Now how it works is a little outside the scope of this course, but if you want to learn how to use Webpack, make sure you take a look at this course. In addition to working with build tools, you'll also need some code to start up the application. This is sometimes called Bootstrapping the application. The code for that is similar to the code we've already used in the previous video. Working with Modules means working with separate files, so you'll need to use Import statements to pull one file into another one.
Let's take a look at how that code works. Here we have some sample code of how we get the information to start working with Vue.js. So this right here would replace what we did earlier when we included a script file that downloaded the code for the library, and this right here takes the code for our component, and imports it into our Bootstrap Code. In the next couple of lines we create the Vue model, just like we did before, and then we pass along a configuration object.
But this one's a little bit different. Although we still target the ID that we create in our HTML, we now have this slightly different render method. Now this is going to get passed, a function that is going to load the application that you imported with this import statement, so that's what this app is right here. This age is just the name of the method, and it doesn't really matter what it is, but we're using the letter H, because that's sort of common with UJS, and if you don't recognize this, this is an ES6 arrow function.
You can totally write this as a function if you want to, but most of the time you're going to see it written in this manner. Once you create this Bootstrap Code, you won't have to worry about working with this file again. Something to note here is that this Bootstrap Code doesn't have any data. It doesn't need it, because all of the data is going to be inside your component. In this case it's going to be in the app component, because we only have the Bootstrap Code, and then another file for the main component.
And as I mentioned before at the render property, it's going to get passed that function that loads the application from this import statement right here. Another thing to note is that this statement is written in a format called CommonJS. You may see a slightly different format when you look at different examples on the Web. That format is called AMD, it's just written in a slightly different way. But they do the same things. Now Our Module is going to look something like this.
When you use a module, you create a template tag, so this is the separate file that's going to hold our application, and it's going to have this template tag, and inside that template tag we're going to have all the HTML that we're going to be using in here. One thing to make sure here is that you have to have a single component inside this main template tag. So you can have a div here, and then say a paragraph, or anything else. Everything has to be inside this main component, and it doesn't have to be a div, it can be whatever you want, but it has to be a single item.
So remember, you're going to use a template with a single element inside. Because this is a Module, it needs to export some information back to the main application, and we do that in a script tag right here. Now notice that we don't need to specify an element to target. Before, we had an element with an ID, and then we matched that into our HTML, and that's because by default, a module is going to assume that you just want to use this template right here.
So we'll use a source tag, and in here I'm going to use "builds/app.js. Now this file is going to come from our automation that we're running with Webpack. So you won't need to worry about where this file is. It's going to be automatically generated by Webpack. You'll see it if you actually use the terminal to run in production mode. Alright, so let's go ahead and Save that. Our application might break, and if it doesn't it's probably because I haven't reloaded it yet, but yours might break if you start saving things.
So next up, we need to create something in this process folder. We already have this main.js file, but we're going to need an additional application called App.vue, so let's go ahead and do that. We'll create a new file here. It's going to be called App.vue, and here is where our main application is going to go. And so we're going to have a template, and that template is going to have, as I mentioned, a single div.
And in here we're going to Paste our template from our HTML file. I have a template, as well as some scripts here so, I'll Paste it and then I'll Cut out this Script part, because I'm going to need it a little bit further down on the page. So in here we have our div with the ID of App, remember we don't need that any more, because this template is going to be automatically what's used on this page. And then we have our template, which looks just fine.
We don't really have to make any changes to what we've already done. Now let's go ahead and come down here, and Paste our Script. So this is our script. Our script is going to create this appointments variable, and that's okay, it still has all that data. But this part of the application right here is going to be different, because we're using a module, so we need to do things a little bit differently. I'll go ahead and start right here, and I'm going to say export default, and I don't need to create this variable here, and I'm not going to need the element to target any more.
And I'm not even going to need this data attribute written like this. So I'm just going to go ahead and delete this whole thing, and start typing here. So here, we'll say data is going to be an object with a return statement, and that itself is going to be an object that returns these two items. So this is now going to exist in our template. These are kind of the variable proxies that are going to be available to my template.
Alright, so finally we have to worry about this main.js file, and for that we'll come over here. And here we actually need to perform a couple of import statements. First we'll go ahead and import the Vue object from the Vue library, so this is how we load in the actual framework. It's going to be loaded from the node modules folder. And then I'm going to import the application object from my App.vue file that I just created.
After I do that, then I can create my variable for the Vue model, just like I did before with a new Vue, and then pass it along a configuration object. And then here, I need to still target the application, which has an ID of App. And then I need to use my little render function to actually render the application. So this will be ES6, and this is an arrow function, and this is going to call up the app that we're importing right here, that is what gets exported from our app, that Vue file.
So if I Save that, and I reload my page, you should see the application work just like before. So, though this seems like a little bit of extra work, working with modules is going to make it easier to build more complex applications, and it's going to make your life better in the long run.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering