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!
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 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>
.
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.
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.
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:
index.vue
file in the directory of the nested page.vue
file to the newly created index.vue
file.vue
fileEarlier, 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.
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.
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.
Install LogRocket via npm or script tag. LogRocket.init()
must be called client-side, not
server-side
$ npm i --save logrocket // Code: import LogRocket from 'logrocket'; LogRocket.init('app/id');
// Add to your HTML: <script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script> <script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowThe useReducer React Hook is a good alternative to tools like Redux, Recoil, or MobX.
Node.js v22.5.0 introduced a native SQLite module, which is is similar to what other JavaScript runtimes like Deno and Bun already have.
Understanding and supporting pinch, text, and browser zoom significantly enhances the user experience. Let’s explore a few ways to do so.
Playwright is a popular framework for automating and testing web applications across multiple browsers in JavaScript, Python, Java, and C#. […]