How to get slot to work inside a Quasar Layout - vuejs2

Question

So I have a basic layout :
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated class="bg-secondary text-white">
<q-toolbar >
<slot name="toolbar"></slot>
</q-toolbar>
</q-header>
<q-page-container >
<router-view ></router-view>
</q-page-container>
</q-layout>
</template>
And a basic router:
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [
{ path: '', component: () => import('pages/Index.vue') }
]
}
]
and Index.vue:
<template>
<q-page>
<template v-slot:default> CONTENT SHOWS</template>
<template v-slot:toolbar> CONTENT DOESN'T SHOW</template>
</q-page>
</template>
What do I do wrong? How can I get the slot up the router?

Answer 1

Simple answer: there is no way to accomplish that using slots.
You are seeing CONTENT SHOW because q-page has the default slot, but there is no definition for the toolbar slot there. Remember, slots get passed to their direct parents, this is a Vue fundamental rule. Your practice moved me to the age of master pages.
Using Name Views is the proper solution -- should move your toolbars into separate components and define them in routes.
Another solution, check the current route and render a proper toolbar:
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated class="bg-secondary text-white">
<q-toolbar>
<template v-if="$route.name === 'Index'">
<div>Toolbar for Index Page </div>
</template>
<template v-else-if="$route.fullPath.startsWith('/nested')">
<div>Toolbar for Index2 Page </div>
</template>
<template v-else>
<div>Toolbar for Default Pages </div>
</template>
</q-toolbar>
</q-header>
<q-page-container>
<router-view></router-view>
</q-page-container>
</q-layout>
</template>
Of course, moving these v-if logics into a separate component is a better practice.

Answer 2

It's been a long time since the original post, but maybe it can help someone else. Use names in router-view.
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated class="bg-secondary text-white">
<q-toolbar >
<router-view name="toolbar"></router-view>
</q-toolbar>
</q-header>
<q-page-container >
<router-view></router-view>
</q-page-container>
</q-layout>
</template>
Then, the route setup can contains something like this
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [{
path: '',
components : {
default: () => import('pages/Index.vue'),
toolbar: () => import('some another page or component.vue')
}
}]
}
]