In simple terms, a nested page is a page within a page. We use nested pages in situations when we need to add a separate branch or section out of a page, showcasing the organization of webpages and highlighting the relationships between them.
For example, in the URL
idorenyinudoh is a nested page in
author is a nested page in
idorenyinudoh is an author in the
Nuxt.js implements nested pages in a very intuitive way. The
pages directory in a Nuxt.js app contains the routes for that app. Nuxt.js will automatically read the
.ts files in the
pages directory and set up the router configuration.
Other directories in the
pages directory also store files for their nested pages within the pages of their respective directory names, following the structure below:
pages directory directory #1 page #1 page #2 directory #2 filenames (nested pages)
Despite this helpful structure, there are several common problems that arise when adding nested pages to your Nuxt.js application. In this article, we’ll explore building nested pages in Nuxt.js, solving a few of these issues with simple solutions. Let’s get started!
Create a root-level page
Before we can create a nested page, we first have to create a root-level page, which is the parent page that will contain other nested pages. In our example from before,
blog.logrocket.com is the root-level page.
To create a root-level page, create a
.vue file in the root of the
pages directory and name it whatever you want. In the following structure, the content of
author.vue renders on the
/author page, and the content in
index.vue renders on the
homepage (/). Note that
index.vue is always for the homepage:
pages/ author.vue index.vue
To create a nested page, we first need to create a new directory in the
pages directory. We’ll name it after the page we want to store our nested page in. For example, if we want to create a page for
/author/idorenyinudoh, we’ll create an
author directory containing an
pages/ author/ idorenyinudoh.vue author.vue index.vue
Therefore, when we navigate to
/author/idorenyinudoh, the content of
idorenyinudoh.vue will be loaded on the browser.
For the content of
idorenyinudoh.vue to be displayed on
/author/idorenyinudoh, there must be a
<NuxtChild> element present in
author.vue, and the
/author/idorenyinudoh page should be linked to
A deeply-nested page is really just a page inside a nested page. If
a/b/c were a page,
a would be the root-level page,
b the nested page, and
c the deeply-nested page.
Implementing a deeply-nested page in your Nuxt.js app is similar to creating a nested page. Let’s explain this with a modified version of our example. Say we want to create a page called
Move the content of
idorenyinudoh.vue to an
index.vue file in a directory called
idorenyinudoh, create a file called
this-article.vue. Include the content below in that file:
pages author idorenyinudoh this-article.vue index.vue index.vue index.vue
Now that we’re familiar with nested, root-level, and deeply-nested pages in Nuxt.js, let’s review some common problems that developers run into with each.
Nuxt.js nested page isn’t rendering
Sometimes, although we place the correct files in their respective directories, they might not display. Usually, the problem occurs when Nuxt.js doesn’t know where to render the content of the nested page.
After we create the necessary files and directories, we need to include a
<NuxtChild> component for the content of the nested page. We also must ensure that the nested page is linked with a
<NuxtLink> component. Let’s explore this in more depth with an example.
Suppose we’re using the following directory structure:
pages author idorenyinudoh.vue author.vue index.vue
author.vue file is as follows:
<template> <h1>Authors</h1> <p>Our authors mean a lot to us. Without them, we wouldn't be where we are today. If you check them out, we will appreciate that gesture. Thank you very much.</p> <NuxtLink to="/author/idorenyinudoh">Check out Idorenyin Udoh</NuxtLink> <NuxtChild /> </template>
The content of the nested page
https://blog.logrocket.com/author/idorenyinudoh will be rendered inside the
<NuxtChild> component. The
<NuxtLink> component triggers its rendering.
However, with this approach, the content of
https://blog.logrocket.com/author will always be present in the nested page,
https://blog.logrocket.com/author/idorenyinudoh. Let’s see how we can fix this problem.
Parent page’s content is present in the nested page
The content of a parent page is sometimes unintentionally present in the nested page. The
<NuxtChild> component is present in the parent page, but so is the other content present on the parent page.
To solve the problem, we want to avoid rendering the nested page’s content in the parent page. However, if we omit the
<NuxtChild> component, the nested page’s content will not be visible anywhere.
Let’s try the following steps:
- Create an
index.vuefile in the directory of the nested page
- Move the content of the parent
.vuefile to the newly created
- Get rid of the parent
Earlier, we mentioned that
index.vue is always designated for the homepage. The
index.vue file in the
author directory will be for the homepage of the
Implementing this approach for our example, we’ll have the following:
pages author index.vue idorenyinudoh.vue index.vue
Now, when we navigate to
idorenyinudoh.vue will be loaded. The content of
author/index.vue, which we can find on
/author, will not be present. We also no longer need to include the
<NuxtChild> component anywhere.
Deeply-nested page isn’t rendering
When creating a deeply-nested page, we may run into the same issue as before when the nested page doesn’t render. After implementing the directory structure above, if you don’t see a page where you expect to see it, cross-check that the necessary
<NuxtChild> components are in place.
In this article, we discussed how to create, configure, and troubleshoot nested pages in Nuxt.js. If you come across any unexpected outcome relating to pages in your Nuxt.js app, first, you should confirm that the necessary
<NuxtChild> components are present.
The concepts we covered are also applicable to dynamic pages in Nuxt.js. The only difference is the underscore before the directory or the
.vue file name. I hope you found this tutorial useful.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js
LogRocket: Full visibility into your web and mobile apps
LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.