- [Instructor] Now we will create a new vue component
that will allow us to submit a new message
from our frontend to the backend.
So we'll begin by creating a simple form,
which will allow us to type in our message.
So let's go over to our frontend project
and under the components folder we'll create a new file.
We'll call it
NewMessage.vue.
And to save some time I'll go
over to our Messages component,
copy that, and paste it into NewMessage.
Now let's head over to the Vuetify website
and go back to Documentation.
And then let's look at the UI Components
and scroll down to Form,
and that will be under Inputs and controls
and then Forms.
And we can see an example with
First name, Last name, and E-mail.
So let's take a look at that source code.
Let's go ahead and copy everything
from within the template elements.
And then let's paste it over our existing div
between line two and line 11.
Notice that I didn't keep the original div.
I'm going to backtrack a little bit and explain why.
Within the original div we have several elements.
We have the header on line three
and then we have the list between line four and line 10.
So that's actually two elements within our div.
If I try to get rid of the div
and just have those two elements,
you can see we're getting the error that the root template
requires exactly one element.
And so that's why we need to wrap all of our elements,
if it's more than one, within a div.
I'm going to paste the form code back in,
and if I collapse the form we can see it's just one element.
And so that's working without the div.
And so the takeaway is that you can only have
one element within your template.
Now let's modify this form by removing some of the code
that we don't need.
So we don't actually have a valid model.
I'm going to get rid of that.
And I've just done a quick auto format within code.
Then I'll change the First name field
to have our message body instead of First name.
So I'll change the label from First name to Message.
Then I'll get rid of everything else above it
between line seven and line nine
since we won't need it for now.
And we'll leave required since the user must
type something in the message in order to submit a message.
And then I'll get rid of the other fields
since we don't need them for this purpose.
So I'll select everything between line 12 and line 24
and delete that.
Let's save that.
And now in order to test our NewMessage component
we're going to need to display it somewhere.
So let's open up our app component.
And just like we are displaying our Messages component,
let's display our NewMessage component above that.
So first let's import it.
So I've copied and pasted line 14 below,
and I'll change Messages to NewMessage.
And same for the location.
Now let's add it to the components list on line 20.
And then finally, let's display it,
and I'll copy and paste line eight
and change that to NewMessage.
And I'll actually move our NewMessage component
so that it displays above our messages.
Let's save that and give it a try.
So now we can see we have an input.
And we can type in our message.
Next we'll need a button in order to submit the message.
So let's look at adding that.
If we go back to the form examples
and we scroll down, we'll see an example with a button.
Let's take a look at that code.
So let's scroll down until we see the button.
And it's as simple as that.
So I'll go ahead and copy this line.
And then let's go back into our NewMessage component,
and then let's paste it below the container element.
So below line 12 I'll paste in our button.
And we don't yet have a submit function.
So I'm going to remove that for now.
And eslint will give us a warning.
We'll ignore that for now.
Let's save that and take a look.
And we can see our button now.
Our NewMessage component is a bit
too close to our Messages component,
so let's go back to the frontend project,
and in our app component let's just add a break
in between them.
And that's a bit better.
So we've added some vertical structure.
Now let's add a bit of horizontal structure.
So I'd like to center both of these components
and add some space to the left and to the right of them.
So let's go over to the Vuetify website
and under the Documentation we'll
take a look at Framework options,
and then let's look at Grid.
And here under Usage we can see an example of Vuetify grids.
And we can see that there's various sizes
and certain sizes work together with v-flex
managing how each grid component gets displayed
depending on the screen type and size.
So let's go back to our code and make use of this.
And we can see from our form example
that what we copied had a container, a layout,
and then a v-flex.
And what we're going to do is wrap the entire form
with another v-flex.
So above line two I'll add a v-flex
and close it off
on line 16.
Then let's specify a size with sm for small
and then eight.
Let's save that and take a look.
And now we can see it's no longer
the entire size of the screen.
And when we resize our screen,
the v-flex auto resizes.
Now let's look at how to create an offset
to make this centered.
So beside the size I'll add offset
and specify sm for small.
And I'll provide a value of one
just to see what it looks like.
We can see there's a bit of an offset,
but it's not quite centered.
Let's try plugging in four to see what happens.
So once again there's a lot of offset this time
and it's not centered.
So we'll put in a value of two.
And that's looking better.
Then finally, I'll wrap the entire component in a card.
So below our v-flex and above our form,
I'll use v-card.
And I'll close it off.
And so that's looking good,
but I'd like a little bit of space
between the toolbar and the card.
So in our app component above NewMessages
I'll add another break.
That's looking pretty good.
Let's do the same thing for our Messages component.
So I'll copy the v-flex and the v-card,
open up the messages component,
and let's replace our div with that.
And then let's close off both.
Save that and let's take a look.
That's looking pretty good.
But I don't quite like how this title is looking.
So instead of a header like we have on line four,
let's replace that with a toolbar.
So I'll use v-toolbar,
and I'll specify the color dark.
Let's close it off.
And then within that we'll set a title.
And I'll type in Messages and let's close it off.
Let's take a look at that.
And that looks a lot better.
But maybe we should add a toolbar title
for our NewMessage component also.
Let's go back, we'll copy line four through six
from our Message component.
And in our NewMessage component,
below the v-card on line three,
I'll paste that in
and change the title to NewMessage.
Let's take a look.
So that's looking a lot better.
And if we resize our screen we can see it auto adjusts.
So now the layout of our new component is complete.
Next let's look at how we can get the value
from our New Message field and display it in our console
when we hit the submit button.