- In this video, we will be creating
our first view components.
Eventually it will be used to display
all of the messages in our message board application,
but before we begin,
let's go ahead and delete all of the demo content
so that it doesn't interfere with our own components.
Let's begin by deleting the HelloWorld.vue file.
Then let's go to our App.vue file,
and on line nine we can see it has an import
for HellowWorld.
We no longer have that,
so we'll need to change it to our own component.
First let's create that component.
So, I'll go back to components,
create a new file, and I'll call it Messages.vue.
Then, back in our App.vue,
instead of HelloWorld on line nine,
we'll switch that to Messages,
and we'll specify Messages.vue.
And on line 14, instead of HelloWorld,
again we'll specify messages.
Now, finally, since we don't have
our HelloWorld component any longer,
let's delete line four.
And, we'll also delete line three,
since we don't need to show the vue logo.
Let's save that.
Now, if we take a look at our browser,
we should see an empty screen.
That's because we removed all of the demo content.
Let's go to our Messages.vue component,
and simply type in test.
We'll save that, and we might expect to see test
written in our browser,
but we're not.
So, let's go back here,
and in order to show html text inside a vue component,
we need to wrap that with a template element.
And we can see we're still getting an error,
so if we hover over we can see the error shows us
that the template root requires
an element rather than texts,
so we simply need to wrap this with div.
And using Control, Shift, F,
I was able to auto format it in visual studio code,
so I'll save this, then let's go back to our browser.
And, we're still not seeing anything.
So, back in our code,
we need to take a look at App.vue.
Previously, we had reference to the HelloWorld component
that was being displayed.
We deleted that, and we're not actually referencing
our new messages component,
so let's add that below line two.
We'll add in a new element with the name Messages,
and we'll close it off.
And, you can see that this references
the component on line 13.
Let's save that, and then take a look at our browser again.
Now, we can see the test text we have in our new component,
and that's the basics of showing
one component inside another.
In our app component, we're referencing
our new component messages,
and then we're displaying it
through an html element on line three.
We'll continue to see this throughout the course,
so if it doesn't make too much sense right now,
you don't need to worry about it.
So, now that we have our new component running,
let's go ahead and create a message list,
to display some placeholder messages.
So, instead of just having test,
let's delete that on line two.
I'll hit enter, and let's add a title for our messages.
So, I'll start with an h4 for our header,
and I'll call it Messages.
And below that, let's add a list.
So, I'll use an html ul element,
then I'll close it off,
and inside here we'll add the list item,
with li, and I'll hard code First,
and I'll add another called Second,
and close it off.
Let's save that, and see what it looks like.
And, it's not looking that great,
so let's go back to our code
and in our App.vue,
we can see that there's a style section
between line 18 and 27,
and that came with a default project.
So, we don't need that.
I'm going to delete it,
and we'll save that.
And, now we can see that it's no longer centered,
and the list items are beside their bullet points.
So, now that we have the basic structure
of our first component,
let's take a look at how to show actual data,
instead of a hard coded list as we have
with first and second.
We'll take a look at that in the next video.