NuxtN
Nuxt•2y ago
Gregor

nuxtpage: child page inside parent page

Hi, I have this page structure

app.vue
layouts/
--default.vue
pages/
--categories
----[category].vue
----index.vue

my problem is that i can't render the [category].vue inside the <nuxtPage /> from index.vue from the same folder... it just replaces the whole page, instead rendering the subcategories inside the nuxtPage...

What I'm doing wrong?

//layouts/default.vue
<template>
  <div>
      <slot />
  </div>
</template>

//app.vue
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

//categories/index.vue
<template>
  <div class="flex">
    <div class="w-full">
      Categories
      <uLink to="/categories/cat1">Cat1</uLink>
      <uLink to="/categories/cat2">Cat2</uLink>
      <uLink to="/categories/cat3">Cat3</uLink>
    </div>
    <div>
      <NuxtPage :page-key="(route) => route.fullPath" />
    </div>
  </div>
</template>

//categories/[category].vue
<script setup>
  const { category } = useRoute().params;
</script>
<template>
  <div class="w-full">Sub Assortment {{ category }}</div>
</template>
Was this page helpful?