Using Quasar Ajax Bar within every component

App.vue

src/App.vue

<template>
  <div id="q-app">
    <q-ajax-bar ref="bar" size="2px" :delay="delay" />
    <router-view v-on:startAjaxBar="onStartAjaxBar" v-on:stopAjaxBar="onStopAjaxBar" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => {
    return {
      delay: 0
    }
  },
  methods: {
    onStartAjaxBar () {
      this.$refs.bar.start()
    },
    onStopAjaxBar () {
      this.$refs.bar.stop()
    }
  },
  mounted () {}
}
</script>

<style>
</style>

auth.vue

layouts/auth.vue

<template>
  <q-layout>
    <div class="row items-center justify-center" v-bind:class="{ 'window-height': alignContentMiddle }">
      <div class="col-sm-12 col-md-4">
        <q-tabs color="primary" align="justify">
          <q-route-tab name="login-content" default slot="title" icon="mdi-login-variant" label="Login" to="/auth/login" exact />
          <q-route-tab name="register-content" slot="title" icon="mdi-account-plus" label="Register" to="/auth/register" exact />
          <q-route-tab name="lost-password-content" slot="title" icon="mdi-textbox-password" label="Lost Password" to="/auth/lost-password" exact />

          <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
              <router-view v-on:startAjaxBar="onStartAjaxBar" v-on:stopAjaxBar="onStopAjaxBar" />
          </transition>
        </q-tabs>
      </div>
    </div>
  </q-layout>
</template>

<script>
export default {
  name: 'Auth Layout',
  data () {
    return {
      alignContentMiddle: this.$q.platform.is.desktop || this.$q.platform.is.ipad
    }
  },
  methods: {
    onStartAjaxBar () {
      this.$emit('startAjaxBar')
    },
    onStopAjaxBar () {
      this.$emit('stopAjaxBar')
    }
  },
  mounted () {
    let self = this
    this.$router.beforeEach((to, from, next) => {
      self.$emit('startAjaxBar')
      next()
    })
    this.$emit('stopAjaxBar')
  }
}
</script>

<style>
</style>

login.vue

pages/auth/login.vue

<template>
  <q-tab-pane name="login-content">
    <p class="caption">Login form message</p>

    <div>
      Login Form
    </div>
  </q-tab-pane>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {}
  },
  computed: {},
  mounted () {
    this.$emit('stopAjaxBar')
  },
  methods: {
    submit () {}
  }
}
</script>

<style>
</style>

routes.js

router/routes.js

export default [
  {
    path: '/',
    component: () => import('layouts/default'),
    children: [
      { path: '', component: () => import('pages/index') },
      { path: 'restricted', component: () => import('pages/restricted'), meta: { auth: true } }
    ]
  },

  {
    path: '/auth',
    component: () => import('layouts/auth'),
    children: [
      { path: 'login', component: () => import('pages/auth/login') },
      { path: 'register', component: () => import('pages/auth/register') },
      { path: 'lost-password', component: () => import('pages/auth/lost-password') }
    ]
  },

  {
    path: '*',
    component: () => import('pages/404')
  }
]