Im lost. I dont know and I dont understand how can I correctly register and render ponent nested in other ponent. Run this example please, click on About link a look to console. There is warning about ponent registering.

var appLayout = {
  template: `
    <div id="app" class="container">
      <header>
        <slot name="header"></slot>
      </header>

      <slot></slot>

      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
}

var home = {
  template: `
    <main>
      <h3>Home</h3>
    </main>
  `
}

var about = {
  template: `
    <main>
      <nested-ponent></nested-ponent>
    </main>
  `
}

var nestedComponent = {
  template: `
    <main>
      <h3>About</h3>
    </main
  `
}

var routes = [
  {
    path: '/',
    ponent: home
  },
  {
    path: '/about',
    ponent: about
  }
]

var router = new VueRouter({
  routes
})

new Vue({
  template: '#app',
  router,
  ponents: {
    appLayout
  }
}).$mount('#app')

.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.4s;
}
.fade-enter-active {
  transition-delay: 0.2s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

<template id="app">
  <app-layout>
    <nav slot="header">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>

    <transition name="fade">
      <router-view></router-view>
    </transition>

    <p slot="footer">
      Copyright notice
    </p>
  </app-layout>
</template>

<script src=".4.1/vue.js"></script>
<script src=".7.0/vue-router.min.js"></script>

Im lost. I dont know and I dont understand how can I correctly register and render ponent nested in other ponent. Run this example please, click on About link a look to console. There is warning about ponent registering.

var appLayout = {
  template: `
    <div id="app" class="container">
      <header>
        <slot name="header"></slot>
      </header>

      <slot></slot>

      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
}

var home = {
  template: `
    <main>
      <h3>Home</h3>
    </main>
  `
}

var about = {
  template: `
    <main>
      <nested-ponent></nested-ponent>
    </main>
  `
}

var nestedComponent = {
  template: `
    <main>
      <h3>About</h3>
    </main
  `
}

var routes = [
  {
    path: '/',
    ponent: home
  },
  {
    path: '/about',
    ponent: about
  }
]

var router = new VueRouter({
  routes
})

new Vue({
  template: '#app',
  router,
  ponents: {
    appLayout
  }
}).$mount('#app')

.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.4s;
}
.fade-enter-active {
  transition-delay: 0.2s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

<template id="app">
  <app-layout>
    <nav slot="header">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>

    <transition name="fade">
      <router-view></router-view>
    </transition>

    <p slot="footer">
      Copyright notice
    </p>
  </app-layout>
</template>

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.4.1/vue.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>

• javascript
• vue.js
• vuejs2
• vue-ponent
• vue-router

• Here's a nice example of nested/recursive ponents vuejs/v2/examples/tree-view.html – frozen Commented Jul 24, 2017 at 21:21

1 Answer 1

When you use a ponent, without registering it globally, you need to tell explicitly list that ponent as one you will use.

var about = {
  template: `
    <main>
      <nested-ponent></nested-ponent>
    </main>
  `,
  ponents:{
    nestedComponent
  }
}

Two other little bugs in the code; nestedComponent needs to be defined before about, and there was a missing angle bracket at the end of your nestedComponent.

var appLayout = {
  template: `
    <div id="app" class="container">
      <header>
        <slot name="header"></slot>
      </header>

      <slot></slot>

      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
}

var home = {
  template: `
    <main>
      <h3>Home</h3>
    </main>
  `
}

var nestedComponent = {
  template: `
    <main>
      <h3>About</h3>
    </main>
  `
}

var about = {
  template: `
    <main>
      <nested-ponent></nested-ponent>
    </main>
  `,
  ponents:{
    nestedComponent
  }
}



var routes = [
  {
    path: '/',
    ponent: home
  },
  {
    path: '/about',
    ponent: about
  }
]

var router = new VueRouter({
  routes
})

new Vue({
  template: '#app',
  router,
  ponents: {
    appLayout
  }
}).$mount('#app')

.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.4s;
}
.fade-enter-active {
  transition-delay: 0.2s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

<template id="app">
  <app-layout>
    <nav slot="header">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>

    <transition name="fade">
      <router-view></router-view>
    </transition>

    <p slot="footer">
      Copyright notice
    </p>
  </app-layout>
</template>

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.4.1/vue.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>