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

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">
2definePageMeta({
3  path: '/',
4})
5</script>
6
7<template>
8  <h1>Welcome</h1>
9</template>

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