- [Instructor] Let's take a look at
what it would take to import
one of the components we created earlier
on our coat Pen project,
into this new project.
This will show you the difference
between building things using the build tools
and using specific components just in a regular page.
So, here's the component,
in the Vue JS project
and I'm just going to select just that component.
So, let me go ahead and close this tab up,
and I'll just copy this right here
and then I'll switch over to my project.
And I want to add a new folder,
if it's not there already.
Sometimes when you download things
from GitHub, the folder is empty,
it's just going to get rid of it,
so you may have to recreate that one.
And then we're going to create a new file
called Price.vue for our new component.
And, a component normally consists of a template section,
as well as at least a script section.
And sometimes we have CSS,
but for this one, we don't really have that.
So I'm just going to paste everything into my template section.
And what I want to grab is really just
this template part right here.
So we'll cut that from our template element,
and we'll just paste it right there.
And that's all we need for that part.
The rest of this is just javascript.
And we have an empty function here.
So we don't really need that.
So we're just going to grab the props,
and everything until before the template.
So I'll cut that out.
And I'll put that in my script section.
And then I can get rid of all this right here.
So this is a pretty simple component,
that just let's us do pricing.
And, it accepts a value
as well as precision and conversion.
But it only needs a value.
So we're going to go into App.vue,
and in order to bring this in,
we're going to need another import statement.
So, in this case, we're just going to import the price element.
We don't need to use the curly braces
if we're importing whatever is in default.
It's only if you have multiple components
in here that you would need to specify
with the curly braces, which component you are importing.
So we'll just say import Price from,
and then the location of the file.
So this is in components, and then Price.vue.
And in addition to that, we're going to need
to put that in the component section.
So we'll say import price into this components.
And then, we should just be able to use price
it needs to be like a tag at least with a value.
And for right now, I'm just going to type in a number here.
Then we will close it.
And let's go ahead and save that.
And you should see the price appear right here.
And that's pretty much all you need to do.
You create a separate file, and then you import them.
You put the template in the template section,
the scripts in the script section,
and make sure that you also register them
as a component in the parent component, as well.