Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

Sign up to access "Getting Started with Nuxt 3" right now.

Already a member? Sign in to continue

Playing

03. Creating pages

Transcript

00:00

If you've built out a Vue project before, you're probably used to pulling in Vue Router and defining out your pages that link up to components. In Nuxt, that is completely different. Nuxt has a philosophy of convention over configuration.

00:15

So to create pages, we just go ahead and create components which are then automatically registered as roots within our app. Now, like I said before, we could just start to build stuff out in app.vue, but really we want to think of this as the entry point to our application,

00:32

much like you'd find in a standard Vue project, where you would bind app.vue to a component on the page and have that as the kind of central point. So what we're going to do is just create out inside of our project

00:44

in the root directory, a pages folder. Again, if you're coming from Nuxt 2, this will have already been created for you when you set up a new Nuxt project. But with Nuxt 3 and this particular starter, this doesn't exist.

00:57

So we have to create it ourselves. Now, let's go and create an index.vue file inside of here, which is going to serve as our homepage. Now that we've done that, that's technically created out a route for us

01:09

that points to the homepage, e.g. just a forward slash, and automatically hooks this up to index.vue, which is the file we're working in. So we're going to go ahead and create out a template in here.

01:19

We're going to give this a div wrapper, and we're going to say that this is the homepage now. Now, at the moment, nothing would have happened. You'll see that we've got a 404 there when we try to load that,

01:28

and it hasn't really hooked it up. That's because we're still using this Nuxt welcome component over in app.vue. So remember, this is the root of our project. And again, if you've set up a view router or view router inside of a project before,

01:43

you're probably used to doing something like router view inside of your main app file. Now, we don't do that within Nuxt. Instead, we use Nuxt page. And this is a component in itself, which is already registered for us.

01:56

So we can just go ahead and define that in here. So the difference now is we have a Nuxt page component inside of our main app.vue entry, and this will actually register the route to index.vue. You can see here that now we're on the homepage.

02:10

This is registering out that component. So pretty much everything is automatically done for us. This is one of the benefits of working with Nuxt, with that convention over configuration.

02:21

We've not had to set view router up ourselves. We've just created a file, and that's automatically been registered as a route. And as we go on in the series, we'll look at how to include parameters and link up to pages as well.

02:34

So let's just look at creating another page. What happens if we wanted a forward slash about page? Well, at the moment, of course, that doesn't exist. So we see a 404.

02:43

What we need to do is just create an about.vue file inside of pages and go ahead and fill it in with what we need. So let's just go ahead and create a outer wrapper here and just write about. If we come over to the browser now and give this a refresh,

02:56

sure enough, there is our about page. So we've got our index page named index.vue and our about.vue, which is now hooking up to about. So that's pretty much how we would go ahead and create pages.

03:08

Now, what about sub pages? Let's delete this about.vue component. And inside of pages, let's create out a to-dos folder. So now what we're doing is technically diving into sub-directories, e.g. sub-routes.

03:22

So if I create index.vue out in to-dos folder, technically now this page is going to be rendered for slash to-dos. And then inside of here, what we can eventually do is create files to create a to-do or any other pages that we want to see.

03:38

Let's take a look at an example. So you can see that about is now not working. Let's go over and hit the to-dos page here. Now, if this happens, this might just be because NUX 3 is in beta, the time of recording.

03:51

You might need to go ahead and just cancel off npm run dev and rerun this. Let's go back over and give that a refresh. There we go. We have to-dos.

03:58

Now, if we wanted to create a to-dos slash create file, how would we do that? Well, inside of to-dos, just simply go ahead and create a create.vue file. Now, if you're new to NUX completely, this might take a little bit of time to get used to. So let's just say to-do create.

04:15

And let's see what happens. So again, we might just need to cancel off npm run dev and rerun it. So let's go over, give that a refresh. And there we go.

04:23

We have a to-dos index and a to-dos slash create. You can do this as much as you want. So you could technically create a create folder and then have a file inside of that. So you can just continue to chain this as much as you need.

04:38

So there we go. We have the basics of creating pages down. And we can see how we can nest these to create the URLs that we would normally create or the routes that we would normally create within projects.

Episode summary

In this episode, we dive into how pages work in Nuxt and see just how different it is from a regular Vue project. Instead of setting up Vue Router and manually mapping routes to components, Nuxt handles routing for you automatically with its convention-over-configuration approach.

We start by creating a pages folder (which you may have to do yourself in Nuxt 3), and then see how simply adding .vue files inside this folder instantly registers new routes in the app. For example, adding index.vue makes it your homepage, while adding about.vue sets up an /about route—no extra code needed!

Next, we look at nested pages. By creating subfolders (like pages/todos/index.vue), we’re able to easily generate routes like /todos and even deeper ones (e.g., pages/todos/create.vue gives you /todos/create).

We also cover a little debugging—sometimes you have to restart your dev server when adding or removing pages, especially with Nuxt 3 in its early days.

Overall, you'll see how painless and quick it is to set up static and nested pages, and get a feel for how Nuxt’s auto-routing fills in for what you'd usually do with Vue Router.

Episode discussion

No comments, yet. Be the first!