Nuxt3 and Nested Child Routes: How to do it in pages root?

Question

I do not understand how to create nested child routes in Nuxt3.

I have a parent file:

pages/index.vue

<template>
  <div>
    <h1>The home page</h1>
    <AppFilter @picked-status="(e) => (status = e)" />
    <NuxtPage />
  </div>
</template>

<script setup>
const status = ref('one');
</script>

and then children like so:

pages/one/index.vue, pages/two/index.vue, and pages/three/index.vue.

<template>
  <h1>Child one</h1>
</template>

The parent file contains radio button navigation that when pressed, should show the relevant child component below. If "Child One" is pressed, I expect to see the pages/one.index.vue component load below the navigation.

but, this does not work...

Perhaps there is a better way to structure the app for my use-case?

Here's my code with a minimally reproduction stackblitz editor here: https://stackblitz.com/edit/nuxt-starter-dmx5zu?file=pages/index.vue

Thank you for any help!

Answer 1

There is just one <NuxtPage /> tag in app.vue. pages/index.vue is responsible for displaying home page "/" and only home page. Nesting child components according to routes is not a good idea IMO. If you want to have different Layouts/navigation, according on what route you are, use layouts folder.

This is my opinion. There might be a way to stack components depending on how many routes you have, but I doubt that.

Well, it's not stupid to have one root component nested to everyone in the application. You can use middleware to check the route user want to go before any component will be created, send that information to app.vue to pick correct layout. Or if there are just 1-3 routes, you can hardcode it inside those routes. I'm not sure, but I think if there will be a default layout in app.vue nested route will override it.