Javascript is required
Michael Hoffmann LogoMichael Hoffmann

Nuxt Tip: Move Homepage to Sub-Folder in Nuxt 3

Michael Hoffmann - Senior Frontend Developer (Freelancer)
Michael Hoffmann
May 18, 2023
1 min read
Nuxt Tip: Move Homepage to Sub-Folder in Nuxt 3 Image

Nuxt 3 provides a file-based routing to create routes within your web application using Vue Router under the hood. Nuxt will automatically create a route for every page in your ~/pages/ directory.

By default, your homepage is defined in the pages/index.vue file will be mapped to the / route of your application.

You can move the homepage to a sub-folder by using the path property in the page's definePageMeta compiler macro:

<script setup lang="ts">
  path: '/',


This can become useful if you use the same folders for your components and pages:

├─ components
└── blog
└── home
├─ pages
└── blog
└── home

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter:

New Vue & Nuxt tips delivered to your inbox:
I will never share any of your personal data.