Michael Hoffmann LogoMichael Hoffmann
·
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

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:

home/index.vue
<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:

bash
├─ components │ └── blog │ └── home ├─ pages │ └── blog │ └── 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.

Vue Tip: Chaining Event Modifiers

By chaining multiple event modifiers together, you can create sophisticated event handling scenarios with ease.

Vue Tip: Debug Watcher

You can debug watchers by passing a third options object with onTrack and onTrigger callbacks.