I am completely lost. I am struggling to figure out how to properly register and render a component nested within another component. Can someone please run this example, click on the About link, and take a look at the console? There seems to be a warning about component 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-component></nested-component>
</main>
`
}
var nestedComponent = {
template: `
<main>
<h3>About</h3>
</main
`
}
var routes = [
{
path: '/',
component: home
},
{
path: '/about',
component: about
}
]
var router = new VueRouter({
routes
})
new Vue({
template: '#app',
router,
components: {
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.com/ajax/libs/vue/2.4.1/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>