- [Instructor] Let's make sure our installations
are working by modifying our App.vue file,
to use some of the things that we're bringing in.
So I'm going to get rid of this image,
'cause we're no longer going to need the image.
And what I'll do here is I'll add some Bootstrap classes
to make sure that Bootstrap is properly working.
So we'll add a container, and a margin top of five,
just to give the first text that I put in
a little bit of breathing room from the top.
So, container makes the content inside
responsive in Bootstrap, and it makes it adhere to
certain break points.
So I'm not using HelloWorld anymore,
so I'm going to type in an h-1 here,
I'll put in My Shop here,
and then a paragraph, and I'll just type in some text here.
Alright, so I'll add some classes here,
to make sure my animation is working.
So, animated, and then I'll say FadeInRight
to fade this in from the right,
using the animate.cs' library.
Then finally I'm going to use the font awesome component.
So I'm importing a component,
and the way that you do that is by using
a font awesome icon tag here.
So this is exactly how you would do a component in Vue.js
except that we're using the component that we installed
when we installed the Vue-Font Awesome version.
So this'll bring in the component,
and we're just using it right here.
Alright, so the icon that I want
is going to be
shopping cart.
So to get the name of the icons,
you want to go to the Font Awesome site and click on icons,
and you can take a look at all the icons that are available.
You want to definitely look in the Free library,
'cause that's the version that we're using.
And you can see the names are all right here.
You'll also want to take a look
at the Vue Font Awesome documentation
for how this library works,
because the way that you actually use the icons
is a little bit different,
and there's actually a lot of cool options you can see here.
Basically what we're doing is just using this component
and then passing along the icon that we want to use,
but there's a lot of other options here.
Alright so let's go back and finish this up.
So we're using the shopping cart,
and we need to go ahead and do some imports.
So the way that you use components,
you can see the example right here.
So importing HelloWorld,
even though we don't have that anymore.
So in here, I need to say
import FontAwesome icon from,
and here we're importing from the known modules folder,
so we'll just say fortawesome,
and we want actually to import
the Vue-fontawesome version, right,
'cause that's going to allow us
to use his component right here.
So once you do that, you do need to change this,
because we're using this FontAwesomeIcon component,
instead of HelloWorld.
Right, let's go ahead and save this.
So before I save, let me go ahead,
I need to make sure I add the curly braces right here.
And I'll save that.
And now we can pull up our terminal,
and run the npm run serve command.
This will start up our server again,
let's go ahead and close this out,
and refresh what's in here.
And you can see that Bootstrap is working,
my animation played, and I have an icon.
Let's go ahead and do one more thing before we get done.
We don't really need these styles anymore,
so let me get rid of them,
and we'll save that once again.
It's not going to really do much except
that centering will go away,
which isn't a big deal for my application,
but everything else should still be working.
If you refresh, you should see the animation,
and that means that everything
that we have installed is working great.