CODEWITHSUNDEEP
vue.jsnuxt.js
Eggon
Eggon

Reputation: 2356

Nuxt root page (parent) is not rendered for child route despite using <nuxt-child> in the parent

I have a simple setup of files:

Pages structure:

./pages/index.vue     // root page to be displayed for '/'
./pages/child.vue     // sub-page to be displayed inside index.vue for '/child'

index.vue:

<template>
  <div>
    <p>This is parent</p>
    <some-component-from-components></some-component-from-components>
    <nuxt-child />
   </div>
</template>

child.vue:

<template>
  <div>
    <p>This is Child</p>
  </div>
</template>

I expect that for '/' route the index.vue will be displayed and for '/child' route index.vue with embedded child.vue in the <nuxt-child /> placeholder. '/' route works as expected, however for '/child' just child.vue is displayed.

Why? Does <nuxt-child /> not work with root page or is there some other problem?

Upvotes: 3

Views: 1335

Answers (1)

kissu
kissu

Reputation: 46676

You need to nest the child component inside of the index directory if you want that kind of behavior. Here, you do have both at the same level, hence why you cannot nest one into the other.

More info here: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-nuxtchild-component

More details about the structure of your routes: https://nuxtjs.org/docs/2.x/features/file-system-routing#nested-routes

Upvotes: 2

Related Questions