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:

<script setup lang="ts">
definePageMeta({
  path: '/',
})
</script>

<template>
  <h1>Welcome</h1>
</template>

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

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