Original subtitles

Let's simplify this project as much as possible to make it easy for us to practice the basics of Vue

three on the Composition API.

First of all, I just wanted to change the title, which appears in the top, which currently says Beat

Up.

So I'm going to jump to index dot HTML and change the text in this title tag to view composition API

basics.

Save that and we see that update instantly.

I'm going to close that and now let's simplify our pages or our views.

Currently, we just have two pages of views, the home view and the about view.

Let's simplify the home view first.

So I'm going to go to source on views and hope you don't view.

It's going to stop this message appearing by choosing Don't Show Again and I'll just close that.

And sometimes I'm going to be hiding the sidebar here.

If you want to hide it, you can go to view an appearance, toggle this show sidebar, or you can use

the keyboard shortcut.

So we're just going to hide that for now.

I'm going to remove this script.

I'm going to remove everything inside the template tags and just add a depth with a class of home.

Inside that I'll add a one heading.

I just put the text home in there, save that we can see that's updated that I'm going to copy this

code and jump to about view view in the same folder.

I'll just paste over everything in here and I'll change the class to about change the text in the heading

to about as well save that we now have two really simple views.

Now let's get rid of all this stuff at the top and that's it.

Our view component, which is update view and source update view.

So I'm going to open that up, hide the sidebar, and I'm actually going to hide the terminal as well.

We don't need to see the terminal most of the time.

All I really want in our layout is this navigation here so that we can get to our pages.

And that's this knop element here with these two routes link components.

So I'm going to copy this now element and both of these routes are links and then I'm going to select

the whole of this header.

I just paste those over that.

Fix the indentation.

We do need to make sure we leave this root to view component because they allow us to display our actual

views, whole view and our about view.

I'll save that.

This is looking nice and simple and I'm going to remove the script section.

Save that and I'm going to remove some of these styles, but not all of them, because some of them

look quite pretty.

Or if we drag this out, we can see that beyond a certain resolution, everything gets moved around.

So I'm just going to remove these tiles which are doing that.

So if we scroll down this style section, we can see this media query here with the minute set to one,

two, four pixels.

I was going to collapse up by clicking this little arrow next to that and then select all of that media

query.

I'll just delete that and save it.

And now if we increase the width of the browser should just stay the same, which is we don't need any

of the components in the components folder now.

So I'm going to jump to source and components.

I'm going to select everything in this components folder by clicking on the first item, holding down

shift and clicking the bottom, and then right click delete.

Get rid of those and we see this error.

But if we just reload the page, then the error disappears.

And we now have a super simple app that we can use to get started learning the basics of Vue three and

the Composition API.

So let's get started learning the basics.