N
Nuxt•6mo 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>
//layouts/default.vue
<template>
  <div>
      <slot />
  </div>
</template>
//app.vue
<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </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/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>
//categories/[category].vue
<script setup>
  const { category } = useRoute().params;
</script>
<template>
  <div class="w-full">Sub Assortment {{ category }}</div>
</template>
8 Replies
JonathanDoerfler
JonathanDoerfler•6mo ago
What you're trying to achieve is a "wrapper layout" around the [category].vue page, am I right?
Gregor
GregorOP•6mo ago
yes correct. so I have the main layout with the sidebar and then the categories sidebar
No description
Gregor
GregorOP•6mo ago
url should be domain.com/categories and if I select a category domain.com/categories/cat1 I also tried to create a second layout 
//layouts/categories.vue
<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <uLink to="/categories/cat1">Cat1</uLink>
      <uLink to="/categories/cat2">Cat2</uLink>
      <uLink to="/categories/cat3">Cat3</uLink>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>
//layouts/categories.vue
<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <uLink to="/categories/cat1">Cat1</uLink>
      <uLink to="/categories/cat2">Cat2</uLink>
      <uLink to="/categories/cat3">Cat3</uLink>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>
//categories/index.vue
<template>
  <nuxt-layout name="categories" :page-key="(route) => route.fullPath">
    <NuxtPage />
  </nuxt-layout>
</template>
//categories/index.vue
<template>
  <nuxt-layout name="categories" :page-key="(route) => route.fullPath">
    <NuxtPage />
  </nuxt-layout>
</template>
Josh Donnell
Josh Donnell•6mo ago
I'm pretty sure for this you need to create a categories.vue file in pages rather than running it off an index file in the sub folder then it should work for you
JonathanDoerfler
JonathanDoerfler•6mo ago
What @Josh Donnell says + you don't need <Nuxt Page /> within a page or a layout. 
// app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
// app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
// layouts/categories.vue
<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <uLink to="/categories/cat1">Cat1</uLink>
      <uLink to="/categories/cat2">Cat2</uLink>
      <uLink to="/categories/cat3">Cat3</uLink>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>
// layouts/categories.vue
<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <uLink to="/categories/cat1">Cat1</uLink>
      <uLink to="/categories/cat2">Cat2</uLink>
      <uLink to="/categories/cat3">Cat3</uLink>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>
// pages/categories.vue
<template>
  <div>Have a look at all our categories</div>
</template>
// pages/categories.vue
<template>
  <div>Have a look at all our categories</div>
</template>
// pages/categories/[categoryid].vue
<script setup>
  definePageMeta({ layout: 'categories' });
  const { categoryid } = useRoute().params;
  /* checking the validity of the ID, getting data from a store and so on */
  const allCategories = new Map();
  allCategories.set('cat1', { name: 'Category 1' });
  allCategories.set('cat2', { name: 'Category 2' });
  allCategories.set('cat3', { name: 'Category 3' });
</script>
<template>
  <div class="w-full">Sub Assortment {{ allCategories.get(categoryid).name }}</div>
</template>
// pages/categories/[categoryid].vue
<script setup>
  definePageMeta({ layout: 'categories' });
  const { categoryid } = useRoute().params;
  /* checking the validity of the ID, getting data from a store and so on */
  const allCategories = new Map();
  allCategories.set('cat1', { name: 'Category 1' });
  allCategories.set('cat2', { name: 'Category 2' });
  allCategories.set('cat3', { name: 'Category 3' });
</script>
<template>
  <div class="w-full">Sub Assortment {{ allCategories.get(categoryid).name }}</div>
</template>
localhostess
localhostess•6mo ago
Without using a new layout, what worked for me was: pages/categories.vue: 
<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <nuxt-link to="/categories/cat1">Cat1</nuxt-link>
      <nuxt-link to="/categories/cat2">Cat2</nuxt-link>
      <nuxt-link to="/categories/cat3">Cat3</nuxt-link>
    </div>
    <div>
      <NuxtPage />
    </div>
  </div>
</template>
<template>
  <div class="flex">
    <div class="w-full">
      Assortment
      <nuxt-link to="/categories/cat1">Cat1</nuxt-link>
      <nuxt-link to="/categories/cat2">Cat2</nuxt-link>
      <nuxt-link to="/categories/cat3">Cat3</nuxt-link>
    </div>
    <div>
      <NuxtPage />
    </div>
  </div>
</template>
pages/categories/index.vue: 
<template>
  <div>Categories index content</div>
</template>
<template>
  <div>Categories index content</div>
</template>
pages/categories/[category].vue: 
<script setup>
const {category} = useRoute().params;
</script>
<template>
  <div>Sub Assortment {{ category }}</div>
</template>
<script setup>
const {category} = useRoute().params;
</script>
<template>
  <div>Sub Assortment {{ category }}</div>
</template>
and no app.vue file
Josh Donnell
Josh Donnell•6mo ago
@Gregor Here is a very simple example for you. https://stackblitz.com/edit/github-zmwvyh?file=pages%2Fcategories%2F%5Bid%5D.vue
Josh Donnell
StackBlitz
Nuxt - Starter - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
Gregor
GregorOP•6mo ago
thank you all, works brilliant now 🙂 placing the categories/index.vue outside the folder and rename it to categories.vue solved my problem
Want results from more Discord servers?
Add your server