- [Instructor] In this video,
we'll be using a material design component framework
called Vuetify.
Head over to vuetifyjs.com.
We'll select the Get Started button
and if we scroll down a bit,
you can see that it follows the same instructions
as we had with the Vue CLI.
So after installing the Vue CLI, which we've done,
that instructs to create a new project,
which we have also done,
and in the last step is to add Vuetify.
So let's copy that command
and then go back to our project and code
and then I'll open the terminal
and create a new window, since our first window
is being used to host the project
and then I'll paste that in.
And I'll select a default
and then back on the website, we can scroll down
and we'll see how to set up Vuetify
with our existing project.
So we'll need to open up our index.js, or main.js
and type in the following.
So we can see, we have a main.js, we'll open that up.
So let's copy the last two lines from the example
and then after the third line,
we'll go ahead and paste those in.
if there's any errors in our browser.
As we can see, there's no errors,
but we've lost our existing web app
and Vuetify has taken over.
So we'll need to make some modifications.
If we go back to our App.vue
we can see that it has modified
what we had already set up.
So unfortunately, we'll have to delete that.
So once again, let's go ahead and delete
the Hello World component
and then let's delete everything
inside our v-toolbar element.
So that's between line three and line 16.
And we'll save this for later
because we will have a toolbar
as we progress through the course.
And then let's go ahead and modify line 14 like before.
So I'll change that to Messages
and our components on line 19
and then finally, line eight.
And that should be it.
Let's take a look.
So now we can see the empty toolbar is being displayed.
Our messages list is also being displayed.
And we're not getting any errors, so that's good.
Let's continue by using the Vuetify version of the list
to make it look a bit better.
So let's go back to the Vuetify website,
then let's go to Documentation
and scroll down to the UI Components section.
Then we'll be looking for a list item.
Let's select that
and then let's look at the source code.
In here, we can see a lot of extra code
besides the v-list that we would like to focus on.
We'll ignore it for now
and gradually implement that extra UI functionality
as we progress.
So let's continue by looking at a simpler example.
We'll scroll down
and we'll start with this example.
So let's scroll down,
and we can see the v-list located here.
Let's copy that
all the way down to the closing v-list element
and let's go back to our code
inside our Messages.vue component
and right below the header, we'll paste that in.
And I'll add some spaces
just to separate the old code from the new code.
This is similar to our ul element
that contains all the list items.
and tiles have actions, content and avatars
and several other things that we don't need
to worry about for now,
so we won't be using the avatar, and I'll take that out.
We also won't be using the action,
so I'll take that out also.
Then we need to modify line six so that we have a v-for
just like we had on line 18.
So I'm going to copy that
and paste it over line six.
Now let's get rid of everything
Then finally, we'll display our message as a title.
So on line seven, we'll change the v-text
from item.title as it was in the Vuetify example
to message.
Now let's get rid of our old code
between line 12 and line 14.
Let's save that and give it a try
and now we can see we have a more modern version of a list
but we can't do much with it yet.
If we compare it to the example,
we can see that when we hover over,
we get this highlight effect.
Let's go look at the source code to see
how we can achieve that.
If we scroll back down,
we can see that there's an @click directive
and it's not doing anything for now,
but it does give us that functionality,
so let's copy it and we'll go back to our code
and then on line five, beside the v-for,
let's paste that in.
And so, this tells vue that when we click
on one of those list items, we want something to happen,
but in this case, we're not specifying anything.
And so it's simply just for the visual effect.
So if we scroll over,
we can see we're getting that highlight effect.
And so, we were able to convert our message list
over to a more modern-looking Vuetify message list.
The last thing I'd like to do
is convert our header
to a more modern-looking Vuetify header.
Let's go back to the Vuetify website
and scroll up and then under Framework Options,
we can look at styles and things.
Then under that, let's select Typography
and we can start with something simple such as
display-1, which specifies as good for h4.
And we can see it shown here just below.
So I'll copy this
and then back in our code, on line three,
within the h4 element,
I'll specify class and then paste in display-1.
Let's save that and take a look.
And so now we can see in our application,
it's using a more modern font and size.
The UI will still need a bit of tweaking,
and we'll go ahead and make those modifications
as we progress through the course,
but for now, we were able to get Vuetify installed
and our Messages list converted over
to using Vuetify components.
So now that we have our front-end component and UI set up
displaying placeholder messages,
let's take a look at how to get actual messages
from the backend shown.
We'll take a look at that next.