Nuxt 3: How Can I Share a Layout for the Root Path Without Using Page Metadata?

Below is an explanation along with some guidance on how to achieve your desired structure in Nuxt 3.

---

Why Your Attempt Didn’t Work

In Nuxt 3 the file-based routing system treats a file like /pages/index.vue as a full page for the / path rather than as a “parent component” or layout for its child routes. Unlike Vue Router where you can specify a parent route with children, Nuxt 3 expects you to separate the notion of a page’s content from the overall layout.

---

Recommended Approach: Use Nuxt Layouts

The Nuxt 3 way of sharing a common layout (or parent view) across multiple pages is to use the layouts mechanism. For your use case you can do one of the following:

1. Default Layout
   If most of your pages (like /, /about, and /privacy) should share the same layout, you can put the layout in layouts/default.vue so that it’s applied automatically without further configuration.

2. Named Layout With Page Metadata
   For cases where you need multiple different layouts (e.g. one for your website and one for your admin), create a layout file for each in your layouts/ directory (e.g. layouts/website.vue and layouts/admin.vue). Then, on pages that should use a specific layout, add:

   VUECopied
   <script setup lang="ts">
   definePageMeta({
     layout: 'website'
   })
   </script>

   This way, pages like /about and /privacy will use the website layout without duplicating routing logic.

---

Alternative: Nested Folders for Nested Routes

Nuxt 3 supports nested routing by using directories, but note that this pattern is more about grouping pages rather than defining a layout container in the Vue Router sense. For example, you could do this for your admin section:

pages/
└── admin/
    ├── +layout.vue     // AdminLayout component
    ├── dashboard/
    │   └── +page.vue   // Dashboard page component

For the root section (website), if you try to group pages under a directory, you’d have to change your URL structure (e.g. /website/about instead of /about). Since you want the root URL / to serve as your website section, the best and recommended approach is to use the layouts system described above.

---

Summary

• Nuxt 3 File-Based Routing: A file like /pages/index.vue is treated as a page for / and not as a parent layout container with child routes.
• Use Nuxt Layouts: To share UI across pages in the root section, create a default or named layout in the layouts/ folder and apply it via definePageMeta if needed.
• Nested Routes: While you can nest routes with directories (and even use nested layouts with +layout.vue files), doing so for the root section would force a URL change.

In short, the recommended solution is to use Nuxt layouts (and page metadata to select a layout when needed) rather than trying to replicate Vue Router’s nested routes for the root path.

---

This approach is aligned with how Nuxt 3 is designed to work, enabling you to maintain clear separation between your page components and layout components.