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

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”


  • 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:

    <slot name="content"/>

import TabBar from '@/components/page/TabBar';
import HeaderSection from '@/components/page/HeaderSection';

export default {
  name: 'IonVuePage',
  components: {

TabBar component:

  <!-- Listen to before and after tab change events -->


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

        <ion-tab-button tab="home">
          <ion-icon name="home"/>

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


Home component:

    <ion-content slot="content">

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

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



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

export default {
  name: 'App',


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


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