One of the advantages to having components is that you can isolate everything that belongs to the component in a single place… and that include styles.
- [Instructor] One of the the advantages to having components is that you can isolate everything that belongs to the component into a single place, and that includes styles. Vue.js gives you a couple of tools that can help you build components that use styles within them. Components can have their own styles using the style tag. You can store any styles related to the current component here. That's a lot better than just including them in a big page style sheet, and that's because they will be loaded only when a component exists.
That makes your applications faster, more efficient, and easier to update. You don't have to dig through a huge style sheet, everything is stored directly in the component. You can also add a scoped attribute to your style definition and then the styles will work only for the code in the template, which actually makes it easier to write out your styles. Let's take a look at styles, but before we do that we're going to need to talk about a few of the changes to our template.
If you take a look at what's going on here you'll notice that this looks a little bit different than what we did in the previous video, and that's because I have a new index.html file with a bunch of code that includes the Bootstrap framework. We still have our script tag right here where we load our application but we're loading a couple of script tags before that. I'm assuming that you're working on this project and you want to sort of have an existing template on your website and you want to work with this.
That's why these tags are already here from a CDN instead of being bundled into my application. I can see if I scroll up that we still have the application tag, it's right here. It still has an ID of app, and the other thing you have to note is that up here where we have the style sheet for Bootstrap, right underneath, we have a new link tag that is linking to something called bundle.css. That's actually the CSS that overwrites our Bootstrap defaults, so whenever you work on a Bootstrap project, you may usually use your Bootstrap defaults right here and then you overwrite things with a CSS, so this is CSS that belongs to the rest of the page, not your components.
In order to get this working though, we also have to make a change into our main.js file. The change here is that I'm importing those styles in a style.css file, so you may notice that this actually is going to go in a folder called assets and it's called style.css, it's not called bundle and it's not in a builds folder like what we're calling here. So what's going on? Have to sort of go back and explain a little bit of what webpack is doing.
Webpack looks at something like this import and it's going to import that file into our project. We can use that file but whenever we build the final version of the project, it's going to output it to a different place. In our case, it's going to go in an app folder and then in a builds sub folder that we don't see quite yet because we haven't run a build command. If we take a look at index.html, that's where this page expects the file to be. I don't have to worry that we're actually calling it from a different place because webpack is going to manage all that for us.
Just remember that we're going to need an assets folder and we're going to need a style.css file, this is where all of your styles are going to go and if we take a look at that, you'll see that it's a bunch of overwrites for the Bootstrap default as well as some styles for our header and footer. All those styles are going to get processed by webpack, so let's take a look at the config file for webpack which is right here. You can see that the entry point is going to be this process/main.js, which is this main.js file that we've been working with, and then it's going to resolve that into a folder called app and then builds.
Actually, in this app folder, there's going to eventually be a folder called builds and that's where all the stuff is going to go. We don't really need to worry a lot about how all this is working because I've set everything up for you, however if you want to learn more about webpack, make sure you take a look at this course. Let's go ahead and take a look at what's happening in the background. If I pull up the terminal for this project, I'm in Visual Studio Code, which has a super nice built-in terminal, and we can use this menu to call it up right here.
You'll notice that I have my automation already running. You should have your automation running while you're working on this project, so if you don't, make sure that you watch the exercise files video. I'm going to stop this terminal running right now and I'm going to clear this out, just to get a blank screen, and I'm going to run the build command. Remember, there are two commands we can run. NPM run dev, which is what we normally run, and then we can run another one called NPM run build. It's a little bit different.
Let's take a look at what it does. It's actually generating a bunch of files. This bundle, the app.js, et cetera, et cetera, and it's putting them in this builds folder. That's why you have to refer to them in this index.html file as if they were in here. Let's go ahead and delete that folder, because we're not going to need it while we're running our project just locally. I'm going to delete and then let's run the other command. I'm going to go ahead and clear this out.
Back to the terminal, clear this, and do NPM run dev. Remember, you should be running that command at the beginning of every video. If we do that, then our application will run. You may have to reload it just in case, and so I'll do that, and now even though we don't have that bundle folder here in this app folder, it's going to load everything into memory. Webpack does a lot of other cool stuff and thankfully we don't have to worry about it.
Let's get into what we need to do to use custom styles within our components. We're looking at this app.view component right here, we've got, right now, a simple template as well as the script with all of our data. I'm going to actually move this script to the left a little bit. Looks like we have a little bit of breathing room there. I like to have my script text aligned to the left of the page. I'm going to add some styles to my template. I'll create one called main-app right here.
I'm going to delete this title, I don't really need that anymore. I'm also going to remove that from our list of variables right here because I'm not going to need it anymore. In here, in this UL, I'm going to add a class of appointment-list. I need to do one more thing, and that is to add an index to this unordered list. Vue.js is going to expect these items to pass along an index variable.
What I'm going to do is bind a variable that's going to pass along the key or the index for our list. That's going to be important because otherwise it's going to complain and you can see these red lines right here. I have a debugger on for Vue.js, so make sure you watch the previous videos on how to set up your application for working with Vue.js. What it's telling me is that I need to have the v-bind key directive here. I'm going to say v-bind, what I need to type in here is just the letter I.
This will be an index, and whenever you create an item, if you actually add parentheses right here, and use the letter I, you can actually pass along a variable that contains the index for each of the appointments. Vue.js is going to create the appointments and every element in the appointments is going to have an index, and so we can use that by using this d-bind directive here and pass that along to our files.
My command actually needs to be d-bind and the thing that I want to bind which is key and now you can see the red underlines are gone. There is a shortcut for that and that is just to use a semicolon with that d-bind. That would work in the same way. Most of the time you'll see me use this sort of notation in order to bind something to this element right here, which is the unordered list. Next up, I need to actually create a class for this appointment list.
That's really easy to do, we can just scroll down to the bottom and in addition to a script tag, we can also add a style tag. In the style tag, we can add our additional styles. We can say appointment list and then just create a style like we would in normal CSS. Let's go ahead and save that and we'll refresh our project. You can see the bullet points are gone, which means that this style has been assigned.
You can also use an attribute here called scoped. The scoped attribute will make sure that these styles that I'm putting in here will only apply to the chunk in our template. It's going to allow you to target things in here without having to call a parent style. You don't have to worry, for example, that if you create a style just for the LIs that anything outside this template is going to use that style because it'll be scoped only to elements within this template.
Sometimes I've found that using this scoped style or changing your style sheets is going to cause a problem with the caching of the files. If you see a problem, make sure that you try reloading the page just to make sure that any of those previous styles haven't been cached. Adding styles is pretty easy, all we have to do is add a style section. The nice thing is we can have those styles only apply to the current template.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering