- [Instructor] Let's work on customizing our Vue components
in our application.
So to do that,
I'm going to clean things up,
I'm not going to need this logo here in the assets folder,
so I'm going to get rid of the whole assets folder,
and then I don't really need this component here
because I'm not going to use it for right now.
So let's go ahead and delete that,
and in addition to that
we need to go into this App.vue,
I'm not using this HelloWorld subcomponent anymore,
and I'm not importing it,
so I'll get rid of this import statement,
and I'm not using it in this components section here either.
So we can actually probably get rid of components,
let's go ahead and do that,
and we are not going to be using these styles either
so we'll get rid of that as well.
And let's get rid of this call to the image,
and we'll clean up the HTML here a little bit.
We're going to test
that at least one of our installed modules
is working properly,
we'll start with Bootstrap,
so let's go ahead and just type in
headline level 4 here,
and we'll put in Title,
for right now that's all we need,
so now all you got is a title right here,
I want to show you that to bring in data into a component,
you can put in a data attribute
in this configuration object.
So the way that Vue.js works
is by giving you this configuration object,
and the way that this data element works
is in a couple of different ways,
if you're using script based Vue
then you could just create an object here,
and add name and value pairs and pass along data directly,
if you're using components
you have to do it a little bit differently,
this needs to be a function
and the function needs to return something.
So we're going to create a title field,
and type in Appointment List right here,
and then we can use message interpolation
to output that title.
So as you can see
that's kind of the basic way to get some sort of item
printed out in Vue.js.
Now, I don't like that this app is named app here
because this is really the main component,
there's another thing in the main.js file
that targets an element
with an ID of app,
so I think this is a little bit confusing,
I'm just going to rename this one main-app
and in this name section
I'm going to actually call it with camel case.
Which is perfectly fine.
So if we save it, it should still do the same thing.
And now, I want to bring in one of my libraries,
I know that I imported Bootstrap,
and I do that in the main.js file
because I want this to be available to all my components,
so I'm going to import,
the way you import Bootstrap
is just by typing in this import statement,
so where is Bootstrap coming from?
It's actually in the node modules,
if you look in there,
scroll down,
you can see that here's Bootstrap,
and Vue.js is smart enough to get whatever it needs
from Bootstrap,
just by using this import statement.
Which is pretty cool.
And this is actually importing
just the JavaScript part of Bootstrap.
So we also need to import the CSS
and for that we'll use a separate import statement,
now here we need to specify a location of the CSS file,
so I know that if you look at this Bootstrap folder,
there's a folder called dist,
and there's a subfolder called css,
and here's all the different versions of the Bootstrap CSS.
The one that I'm going to use is this one called bootstrap.css.
So I'll need to type all that in here.
Okay, the CSS,
and we'll import Bootstrap CSS in here,
let's go ahead and save this
and as soon as I do that you can see
that the style of this text is now the Bootstrap style.
And let's go ahead and go into App.vue,
and add a class here of container,
that's going to make our application responsive
and now you can see
that it adheres to the Bootstrap breakpoints.
Super cool.
Not a lot of work,
and we were able to just import the library
and clean things up
in our folder,
to make sure we don't have anything extraneous in here.
That's a great start.