Ionic 4 + vue.js / ion-button not clickable when using ion-tabs

Ionic Framework
1

I am using in my package.json:

  • @ionic/core: “^4.0.3”,
  • @ionic/vue: “0.0.4”,
  • vue: “^2.6.10”,
  • vue-router: “^3.0.6”

furthermore:

  • I’m using the IonVueRouter from @ionic/vue

I’ve wrote an IonVuePage component, which has two other components, the HeaderSection (<ion-toolbar>), and the TabBar (<ion-tabs>). Between those components I’ve added a Tag, to add other components inside of this default layout.
However, If I am using a simple ion-button inside a new component (e.g. Home component), which is inside the <slot/> Tag of the IonVuePage component it is not clickable until:

  1. I Wrap it inside of a <ion-buttons> Tag, or
  2. I remove the TabBar component of the IonVuePage component.

What could explain that behaviour?

Do I have my mistake in combining of <ion-tabs> and IonVueRouter? Can I use both?

I’ve noticed, that the

where the TabBar is placed in is overlying:
borwser screenshot
If I set the height of the diff to 10%, then the button is clickable, but unfortunately the TabBar is not visible anymore.

Here’s my code:

IonVuePage component:

<template>
  <ion-page
    class="ion-page"
    main>
    <header-section
      :title="title"
      :show-back-button="showBackButton"/>
    <slot name="content"/>
    <tab-bar/>
  </ion-page>
</template>

<script>
import TabBar from '@/components/page/TabBar';
import HeaderSection from '@/components/page/HeaderSection';

export default {
  name: 'IonVuePage',
  components: {
    TabBar,
    HeaderSection,
  },
...

TabBar component:

<template>
  <!-- Listen to before and after tab change events -->
  <ion-tabs
    @IonTabsWillChange="beforeTabChange"
    @IonTabsDidChange="afterTabChange">

    <ion-tab
      tab="home"/>
    <ion-tab
      tab="request"/>

    <template slot="bottom">
      <ion-tab-bar >

        <ion-tab-button tab="home">
          <ion-icon name="home"/>
          <ion-label>Schedule</ion-label>
          <ion-badge>6</ion-badge>
        </ion-tab-button>

        <!-- Provide a custom route to navigate to -->
        <ion-tab-button tab="request">
          <ion-icon name="contacts"/>
          <ion-label>Request</ion-label>
        </ion-tab-button>

      </ion-tab-bar>
    </template>
  </ion-tabs>
</template>

Home component:

<template>
  <ion-vue-page
    :title="welcometext"
    :show-back-button="true">
    <ion-content slot="content">

      <ion-button @click="changeToRequest">change to request page!</ion-button>

      <ion-buttons>
        <ion-button
          fill="solid"
          @click="showModal">show modal! </ion-button>
      </ion-buttons>

    </ion-content>
  </ion-vue-page>
</template>
  },
...

App.vue:

<template>
  <div id="app">
    <ion-app>
      <ion-vue-router />
    </ion-app>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

router.js:

import Vue from 'vue';
import { IonicVueRouter } from '@ionic/vue';
import Home from '@/views/Home';

Vue.use(IonicVueRouter);

export default new IonicVueRouter({
  mode: 'history', // for not having the # in the URL
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'Home',
      component: Home,
    },
    {
      path: '/request',
      name: 'Requet',
      component: () => import('@/views/TestRequest'),
    },
  ],
});

I appreciate any kind of help or advise.
Kind regards