- [Instructor] When working Vue.js,
it's a good idea to install a couple of additional tools.
Number one is the Vue.js Developer Tools Chrome extension,
which you can get from this URL.
And it's going to give you the ability to debug
Vue.js projects a little bit better.
Now in addition to that, if you're using
Visual Studio Code, you want to download
this Vetur set of extensions.
It's going to enhance your Visual Studio Code
and give you a number of additional features
like Syntax highlighting, linting,
as well as the Emmet tool, which will help you type things
a little bit faster.
We're also going to install a few additional modules
into our application.
Number one, I'm going to use Bootstrap as the framework,
so that we can build things a lot quicker
than having to worry about CSS.
And in addition to that, you also want to install
something called Lodash, which is a utility
for working with arrays and objects.
Now because Bootstrap doesn't come with any icons,
I'm also going to install the Font Awesome library.
And to do that, because it is a bunch of different commands
that could take a long time to type,
I've created this page for you, where you can copy the code
right here, and then past that into your terminal.
So let's switch over into Visual Studio Code.
I've already got the Vue developer tools.
If I go to inspect right here, you'll notice
that at the very end of my tabs,
I have the Vue tool right here,
and it is already detecting that
I have a Vue application in this project.
So you can see that it gives you some additional subtabs
that we'll be using throughout this course.
Now, in addition to that, we're going to pull up a terminal.
So you can do this in your Mac terminal,
or get Bash on a PC, but I'm going to use
the convenient terminal right here.
And I'll just paste that series of commands,
and it's going to perform all the installations that I need.
So it's installing Bootstrap, as well as jQuery
and Popper.js, which are dependencies for Bootstrap,
and also Lodash.
Now it actually placed all of that
into my package.json file, so that those installations
can travel with the project.
You can see them right here.
Now that means that in my node modules folder,
I now have a Bootstrap subfolder
with all of the information that I need.
And I'm going to be using the SAS version of Bootstrap.
So once I've done those installations,
I'm going to go into my folder
and just make sure that all of that has come in properly.
So I'll go into App.Vue,
and I'm not going to use this hello world component anymore.
Let's go ahead and make this a lot bigger.
Let me get rid of this, and also this import right here,
'cause I'm not using the default component
which is right here, that Vue.js installs for you.
And so I don't need this one, at least not right now.
So just to make sure I have created my application properly,
what I'll do is I'm going to add a class of container here,
and then I'm going to just create some Emmet code.
So this means create a paragraph
and add some lorem ipsum code in there.
It's just sort of a bunch of Greek style code, I guess.
And I'm going to save that.
And in addition to that, what I'll do is,
in my style sheet, I can type in the import command
like I would on any SAS project.
Notice that there is a lang equals SCSS,
which means that, because of the way
that I installed the project, I can use SAS in here.
So I'll do an import,
and I'm going to look in the node modules
for the Bootstrap folder, and look for the SCSS folder,
and go ahead and import Bootstrap.
So that should load up the project.
And now let's take a look at our project,
and you can see that Bootstrap has been imported,
and it's importing the Bootstrap great.
I can tell because if I make this bigger,
you can see that there's a little bit of space
and the paragraph is sort of adjusting to the grid.
So let's go ahead and make sure we also got
our Font Awesome.
That's a little bit of a more complex installation.
So whenever you want to bring in a library
that you want to use in a lot of your subcomponents,
you need to do it in the entry point.
And the entry point is this main.js file right here,
which calls, as you can tell, the app, right,
that looks for an html element with an ID of app.
So that is actually coming from App.Vue.
We're importing that here as well as the Vue library,
and then we're creating our application.
And if you take a look at the public folder,
this is where our html document is.
And in here, there's a div with an ID of app.
So all of our application code is going to go right there.
And so public is where we put things
that we want to send to the server.
And so our index.html file goes in there.
We can actually put in additional code if we want to,
in that index.html file.
And then there's a source folder
where most of my files live.
And in there, we can see the main.js,
as well as a components folder.
I'm going to leave that there,
even though I'm not going to use this component.
If I delete this HelloWorld.Vue,
then Git would delete the components folder as well.
Assets is another place where you can put things
that you can import into Vue.js
but you don't want to be public.
So here you can see that we've got a logo
which our template uses.
And if we wanted to, we can add additional things in there.
So now what I need to do is go into, again, main.js,
and import our icons.
So to do that, we're going to need to import
the library from our component,
which is called fortawesome/FontAwesome-svg-core.
So it's this one right here.
So we want to use svg icons in our application,
and that's what we're importing.
And then what you do is you import any of the icons
that you want to use in your project from that library.
So I'm going to import a few of them.
I just need three.
Play, as well as pause, as well as trash.
And I'm going to import that from the library.
So fortawesome and free solid svg icons.
All right, finally I'm going to go ahead
and add to the library object that I imported earlier
the icons that I want to use in my project.
So I'll use faPlay,
as well as pause, and trash.
So now this means that I can use these icons
in my application.
So now to bring in my icons into this component,
I need to do another import here.
And this is going to import the Vue component
that lets me bring in the Font Awesome icons.
So I'll say FontAwesomeIcon here
from fortawesome,
and I'm going to import the Vue version of the component.
So in addition to importing the icons themselves,
you have to bring in a component
that we can use in our project.
Now that means that whenever you bring in a component,
you have to register it.
That is done through the components object here.
So we will make sure that we bring that in.
And once we have that, then we can use this
as we would any sort of html tag.
So here I'll put in Font Awesome icon.
And do notice that when you use the name of the component,
it has this sort of camel case, with capital F, capital A.
When you're using the component in your html,
it has these dashes in the name.
And to use these icons, all you have to do
is put in the tag and then specify
which icon you want to use.
So we'll use the trash icon.
Let's go ahead and save that.
And you should be able to see this trash can right here.
Because we've added these icons into our main.js file,
they'll be available to any one of the subcomponents
that we create, and we can use them by, again,
importing the Vue version of the component
and registering the component here,
and then using the tag like we've done.