Blinking tab bar

[Jams]

Hello,

I made a tab bar for the bottom of one of my app’s layouts. Here’s the code:

<template>
  <q-layout>
    <q-page-container>
      <q-layout-header>
        <q-toolbar color="tertiary">
        </q-toolbar>
      </q-layout-header>
      <transition name="fade">
      <router-view />
      </transition>
      <q-layout-footer>
        <q-tabs color = "tertiary">
          <q-route-tab to = "../rides/" default slot="title" name="tab-1" icon="home" />
          <q-route-tab to = "../profile/" slot="title" icon="person" />
          <q-route-tab to = "../settings/" slot="title" icon="settings" />
          <q-route-tab to = "../create/" slot="title" icon="library_add" />
        </q-tabs>
      </q-layout-footer>
    </q-page-container>
  </q-layout>
</template>

Though a tab bar does appear at the bottom of the app and I can successfully navigate to and from four pages of my app, whenever I select a tab the entire tab bar will “blink” by disappearing and reappearing very fast. If I could get more information on why this happens, that would be very helpful.

If I’m leaving out any important information, let me know
Thanks

[Jams]

<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script>
<template>
  <q-layout>
    <q-page-container>
      <q-layout-header>
        <q-toolbar color="tertiary">
        </q-toolbar>
      </q-layout-header>
      <transition name="fade">
      <router-view />
      </transition>
        <q-tabs position = "bottom" color = "tertiary">
          <q-route-tab to = "../rides/" default slot="title" name="tab-1" icon="home" />
          <q-route-tab to = "../profile/" slot="title" icon="person" />
          <q-route-tab to = "../settings/" slot="title" icon="settings" />
          <q-route-tab to = "../create/" slot="title" icon="library_add" />
        </q-tabs>
    </q-page-container>
  </q-layout>
</template>

Here’s an alternative I tried, where instead of placing the tabs at the bottom of the app using the <q-layout-footer> tag I added a position = “bottom” property to the <q-tabs> tag. It seems to get rid of the blinking issue, but now I have to scroll down to be able to see the tabs.

[rstoenescu]

@Jams I suggest you re-read the Layout section (with all its pages) in docs. Also look at the source code for Play examples. You’ve missed a couple of important things, like the “view” QLayout prop. Also, placing QPageContainer right under the QLayout works, but it’s not quite efficient (in your specific case). I recommend wrapping only <transition> with its <router-view>.