I’m using a ‘common’ headerBar.vue as a component that I import in each page.vue component separately.
The advantage is that I can set up the common stuff in the headerbar and override it in a page.vue whenever needed.
Also, gui design/placement remains consistent in all pages.
Maybe this is a way out for you? I’m still on 0.13 but I suppose this will also work in 0.14
HeaderBar.vue
<template>
<div class="toolbar">
<!-- DEFAULT MENU BUTTON THAT OPENS LEFT DRAWER -->
<slot name="btn1left">
<button class="hide-on-drawer-visible"
style="width:30px; padding:0;"
@click="openLeftSideBar()">
<i>menu</i>
</button>
</slot>
<!-- BUTTON 2 LEFT -->
<slot name="btn2left"></slot>
<!-- TITLE -->
<q-toolbar-title>
<div class="toolbarTitle">
<slot name="title"></slot>
</div>
<div class="toolbarSubTitle">
<slot name="subTitle"></slot>
</div>
</q-toolbar-title>
<!-- BUTTON 5 RIGHT WITH A DEFAULT method-->
<slot name="btn5right">
<button-circular size="small" icon="settings"
:onClick="openCollectionList"></button-circular>
</slot>
<slot name="btn4right"></slot>
<slot name="btn3right"></slot>
<slot name="btn2right"></slot>
<!-- BUTTON 1 RIGHT WITH A DEFAULT login.vue button component-->
<slot name="btn1right">
<login></login>
</slot>
</div>
</template>
Page.vue
<template>
<q-layout>
<header-bar slot="header">
<div slot="btn1left>
<!-- OVERRIDE LEFT DRAWER BUTTON WITH SOMETHING ELSE -->
<button @click="doSomethingElseHere()> myLocalButton</button>
</div>
<div slot="title"> {{t.skills}}</div>
<div slot="subTitle">{{subTitle}}</div>
<div slot="btn4right"></div>
...
<script>
import HeaderBar from '../common/HeaderBar.vue'
...
export default {
components : {
HeaderBar,
...