- [instructor] Let's take a look at some of the differences
between the global and the application API
by moving our components into Vue JS.
Now here's where you can find the Code Pen code.
It's actually sitting all in a single file.
It's just easier to grab this way.
So I'm going to switch over to my application
and I'll start off by Creating a few files
for my components.
So I'm going to Create the Currency component
and it's typical to capitalize components
with the first letter being capital like that.
And then I'm going to make another one.
This is going to be called CustomAlert
and then let's make another one called Product
and I'll take the rest of the code.
And I'm going to just put it in this homepage
and replace what's in there.
Now let's go into the Currency component
and we'll go into our code here
and we'll look for the Currency component.
Let's see that one is right here.
Pretty simple code.
So I'm just going to copy almost everything in here.
I don't really need the beginning part
and also this closing part right here.
So we'll just grab the main part.
And then in Visual Studio Code, if you want to
you can type in the vue tag like this
and then hit tab
and it's going to give you a template.
So let's go ahead and paste my code and my props.
So I need to grab the props,
put that in export default
and then my methods are going to go in that section as well.
There's already a comma right here
and my template doesn't need the actual template keyword
because I have template tags.
And it's going to look like that.
We'll get rid of some of these extra spaces.
Now sometimes I find that visual Studio Code
doesn't quite understand my templates.
And so in that case, if you Click right here
if you have the status bar
you can switch it to Vue
and then html, the html version.
And it's like a little bit better.
I think it saves things a little bit better.
So you can try that.
Just make sure you're looking at your status bar
which you can find
by going to Vue appearance
and select show status bar
or you can hide it if you don't want to see it.
I usually like to keep it hidden,
but just to show you
that sometimes you do have to force it
into that format.
We probably will need to do that with these as well.
So let's move on into the CustomAlert Component.
We'll switch back over here.
That one is not the product.
This CustomAlert Component is right here.
I'll just grab all this
and I'll type in Vue tab.
And I'll just leave my little status bar
and switch this over to Vue html.
Oops didn't mean that one.
That's the one that I'm looking for.
All right.
So we'll paste everything here in the template.
And the only thing that needs to stay in the template
is of course the templates we'll put that there.
And these props and methods are going to go
in this export default section.
Let's go ahead and save it.
It is going to reformat it quite a bit.
We don't have a style sheet in here
so we can get rid of the style tag.
And so that's looking pretty good.
We have another Component called Product.
This one's a little bit longer
but it's pretty much the same thing.
Just grab all this,
let's see product.
And we'll just go ahead
and make sure that that it's Vue html
All right.
We'll type in Vue
You know that's weird.
It doesn't want to give you the shortcuts in this moment
and let's just go ahead and switch it back to Vue here.
And then we can probably use our Vue little shortcut
then we'll switch it back to Vue html on a minute.
All right.
So I'm going to grab all the template
paste it in the template section
and then grab the props
and the emit statement and put it in export default.
This one also doesn't have a style sheet
so we can get rid of that.
All right.
And let's go ahead and make that switch,
ALL right.
So now when I saved it, it reformat it
and we going to to leave Hello word alone for now.
And I'm going to go into Home Vue.
This might not be happening on your machine.
Sometimes the machines get a little confused.
So let's go ahead and grab the rest of the project
that is kind of in this main component.
I don't need to mount the App.
So all I need to do is grab all the sort of main contents.
So I'm going to grab everything, not the ending part
but everything in here,
let's see this.
This is the script section.
So we'll grab all this and Copy it.
I think our template is just sort of sitting up here.
So let's go over here
and this one does have a name.
So I'm going to add a comma here
and paste this, save it.
And we'll switch back over here
and we'll grab our template.
We don't need this diff with the ID of App.
If you remember in our page structure,
it already has a dip with an idea of App
and actually the index that html file.
So we don't need that last one.
Let's go ahead and grab that switch back over here.
And we'll just add this to our template, save that.
And there's a few more things that we're going to have to do
to our project to make it work.
And that's because I have created these
different view components
but this file doesn't know anything about them any more
because they're not all in a single file.
So to fix that, I need to actually add another section
in my script called Components.
Now, usually I like to have it somewhere up here
so we'll do it before Created.
So here we'll say Components
and Components will be an object.
And the Components that we want to use
are just the names of the files
that we're using Custom Alert
and the other one is Product.
Okay. Now, in addition to naming them
I actually need to import them
cause it doesn't know that they exist anywhere.
So I have to actually issue some export statement
right after my script file.
So I can say import, and then the current object from
and then I have to put in a little quotes here
at Component and then the name of the Component.
So this add sign, make sure you add slash right here
this add sign is a shortcut to the Source folder.
So then you can go to components
and then whichever Component you want.
And then let's see
we going to need three these,
and I'll give it a little space.
Then the next one is called CustomAlert.
I see a little bit nicer.
I think if you do the import first
because then when you do the Components,
it's going to know about the components
that you already imported.
And then we'll do the product component
and we'll save that.
And we also need to change the way that the data is written.
So this works fine for the html Components
but when you're writing it in this format
you have to actually put in the function name.
Same thing return, and then all of the other stuff
but you just have to call the data kind of in this format.
And then also we'll need to fix the icon
because I was using sort of the regular font awesome icon.
So I'm going to look for the I tag
and there it is.
And I have to now use my New Component
which I guess I should have maybe called it just I
and then actually here you say Shopping-Cart
and we can just use sort of the single thing notation.
And actually it's not class
it's icon here.
And one more thing that I'm going to fix is online 68.
I don't think I'm really using index right now.
So I'm going to take off just for item
and filter products.
And that looks pretty good to me.
Let's take a look at what's going on
and looks like I have an error right here.
This is actually a good place to look
at what the errors look like in UJS.
And this is actually
one of the things that it gives you
is this overlay on top of your application,
which looks like it's mostly working
but it's complaining about something specifically in a file.
And it's telling me that it's the product that you filed.
And it's saying that I need to rename my Custom Event name.
So I'll go back into the product.
And it's saying that
it wants this add to cart to be in kebab case.
Other than that
the application looks to be working pretty well
pretty much what we had on code pen.
And you learned a little bit
about the differences between the two formats.
This format is very much template script
and then there's usually a style
which we haven't used here,
but you can see that
most of the stuff that you do on Code Pen
can be easily brought.
So you may be able to see a lot of examples
on Code Pen of little problems that people have solved.
And now you know how to modify those to work
in the App style.