- [Instructor] Vue comes with a lot
of useful stuff out of the box.
So far, we haven't needed to look
for third-party components.
But there are quite a lot of them out there,
so, let's see how they work.
Down here in my post-status messages component,
I have this loader, which is just a big block of HTML.
We could extract this into its own component,
and I think that makes it a good candidate
for our purpose here.
Swapping it out for an entirely new third-party component.
We're going to use this one, called Vue simple spinner.
Not every component is going to include documentation
for working with them without Vue CLI,
or some other JavaScript bundler.
So, depending on your setup, you
may have to do a little searching to find one that's easy
to install by hand as we're doing here.
Just make sure Vue comes first,
and that all your components appear
before the scripts that use them.
This component is already available in the exercise files.
I'm switching back to my editor.
I have a simple spinner snippet.
Say that three times fast.
Ready to paste into our index dot HTML.
So, let's copy this.
I'm going to jump down to the bottom
of the file with command down arrow.
Here's Vue,
and here's our custom script.
So, I'm going to paste the component HTML in between them.
And just like the other ones, I'm
referencing the component online first,
and then I'm using an offline fallback,
if we can't get that one.
And notice that I've used Window dot Vue dot component,
and loaded the component name here
to check for its existence.
When you define components, they're available globally
through the Vue object.
So, this is a good way to see if you've
defined a component properly.
Okay, we can save this.
And now that it's installed, I can use it in my templates.
So, we'll go back to hotel dot js.
I'm going to get rid of all this stuff.
And instead, we're going to use Vue simple spinner.
Instead of typing it all out, I'll copy and paste this.
And I need to make sure that the v else is here as well.
There, okay, we'll save that,
and switch back to the browser.
And I'll reload and see what happens.
There we go.
We have our new loader.
Looks a little different.
I'll maybe increase the delay on our API call here.
Scroll down and change this to a five again.
Let's go with three. And I'll be able to see what's
happening a little more easily.
Reload again, yeah, now you can see it.
So, this is a different loader than we were using before.
Let's take a look at the documentation
for what options are available.
So, if we scroll down a little bit,
we can see different ways to use the file.
And now, we have some examples
of some changes that we can make.
Here all the options, and the types,
that they're expected to be.
There's a balancing act with third-party code.
It may be overkill for what you need,
too large to be worth the download for your users,
but if it's reasonably popular, and well-thought out,
or hopefully both, almost any thing you
want to do with it, someone else has probably
tried and configured in some way.
So, in this case, we have options for color, size,
width of the spinner line, and more.
We can also add a message.
So, let's start by adding a little loader message.
Here it is.
And that prop is called message with a text to display.
So, let's say that we are loading with an ellipse.
And maybe let's make the line a little larger.
Please line-size.
Defaults to three so let's bump that up a little.
Bumped up to five.
Alright, I'll try refreshing,
and everything looks like it works.
That text is a little hard to read, but it does work.
I'm going to open up my developer tools for a second
because right now, Vue is warning me that I've
passed an invalid prop.
It's expecting a number and got a string.
And it says right here that it's
expecting line-size to be a number.
So, what's the problem here?
The problem is that when I pass in a prop this way,
this is called a static prop,
and it's always going to be a string.
This is fine for my message which
is supposed to be a string, but my line-size
is supposed to be a number.
The way to fix this is by using bind,
so, that whatever is in these quote marks
is interpreted as an expression instead of a string.
If you've looked at react props before,
they kind of act the same way where you're
using quote marks versus curly braces on your props.
But, in Vue, when we add the colon like this,
that forces this to be interpreted as an expression.
So, in that case, this will be passed in as the number five
instead of the string five.
So, I'll save this, switch back
to the browser, and reload.
The warning goes away.
Everything still works which is nice.
But we have now warnings.
So, the last thing I want to do is make that text white.
So, here are my line colors, text foreground color,
that's what I want to change.
So, my text foreground color, this
will go through as a string.
And I'll set it to white.
Reload one more time, there, that looks good.
So, now, you've seen how
to integrate a third-party component.
As long as the documentation is fairly good, it's easy.