Troubleshooting nested pages in Nuxt.js

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 https://blog.logrocket.com/author/idorenyinudoh/, idorenyinudoh is a nested page in author, and author is a nested page in blog.logrocket.com. idorenyinudoh is an author in the author section.

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 .vue, .js, or .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

Nested pages

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 idorenyinudoh.vue file:

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 <NuxtLink>.

Deeply-nested pages

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 /author/idorenyinudoh/this-article.

Move the content of idorenyinudoh.vue to an index.vue file in a directory called idorenyinudoh. In 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

Our 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:

1. Create an index.vue file in the directory of the nested page
2. Move the content of the parent .vue file to the newly created index.vue file
3. Get rid of the parent .vue file

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 author page, https://blog.logrocket.com/author.

Implementing this approach for our example, we’ll have the following:

pages
  author
    index.vue
    idorenyinudoh.vue
  index.vue

Now, when we navigate to /author/idorenyinudoh, 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 <NuxtLink> and <NuxtChild> components are in place.

Conclusion

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 <NuxtLink> and <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.