javascriptnuxt.jsnuxt3.js

Nested pages in Nuxt 3

I have structute like

/pages/
      section/
             index.vue
             out[id].vue

index.vue has side menu with ids. How to render out[id].vue inside index ?

Like Nuxt nested pages but in Nuxt3.

Can I nest not child page?

Solution

  • Works with

    /pages/
      section.vue
      section/
             index.vue
             out[id].vue

    In section.vue specify a new NuxtLayout instance :

    <template>
  <div>
    <NuxtLayout>
      <NuxtLink to="section/">index</NuxtLink>
      <NuxtLink to="section/out1">out1</NuxtLink>
      <NuxtLink to="section/out2">out2</NuxtLink>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

    Disable the parent layout (ie app.vue) if you need replace outer layout:

    <script setup>
    definePageMeta({ layout: false })
</script>