Javascript is required
1 min read

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

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:

1<script setup lang="ts">
3  path: '/',
8  <h1>Welcome</h1>

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

1├─ components
2  └── blog
3  └── home
4├─ pages
5  └── blog
6  └── home

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

I will never share any of your personal data. You can unsubscribe at any time.