Using Quasar Ajax Bar within every component

<template>
<div id="q-app">
<q-ajax-bar />
<router-view />
</div>
</template>
<template>
<div id="q-app">
<q-ajax-bar :delay="delay" />
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
data: () => {
return {
delay: 0
}
},
methods: {},
mounted () {}
}
</script>
<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 () {
console.log('started')
this.$refs.bar.start()
},
onStopAjaxBar () {
console.log('stopped')
this.$refs.bar.stop()
}
},

mounted () {}
}
</script>
export default [
{
path: '/',
component: () => import('layouts/default'),
children: [
{ path: '', component: () => import('pages/index') }
]
},

{
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')
}
]
<template>
<q-layout>
<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 />
<router-view />
</q-tabs>
</q-layout>
</template>
<script>
export default {
name: 'Auth Layout',
data () {
return {}
},
methods: {},
mounted () {
let self = this
this.$router.beforeEach((to, from, next) => {
self.$emit('startAjaxBar')
next()
})
this.$emit('stopAjaxBar')
}

}
</script>
<template>
<q-tab-pane name="login-content">
<h3>Login Screen</h3>

<div style="max-width: 90vw;">
<p class="caption">
This is where the login form should placed
</p>
</div>
</q-tab-pane>
</template>

<script>
export default {
name: 'Login Component',
mounted () {
this.$emit('stopAjaxBar')
}

}
</script>
<template>
<q-layout>
<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 />
<router-view v-on:startAjaxBar="onStartAjaxBar" v-on:stopAjaxBar="onStopAjaxBar" />
</q-tabs>
</q-layout>
</template>

<script>
export default {
name: 'Auth Layout',
data () {
return {}
},
methods: {
onStartAjaxBar () {
console.log('started sent')
this.$emit('startAjaxBar')
},
onStopAjaxBar () {
console.log('stopped sent')
this.$emit('stopAjaxBar')
}

},
mounted () {
let self = this
this.$router.beforeEach((to, from, next) => {
self.$emit('startAjaxBar')
next()
})
this.$emit('stopAjaxBar')
}
}
</scrip>

--

--

--

Full-Stack Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Google Colab tips: using both %%writefile magic and %%javascript magic in the same cell

Best React Component Libraries in 2019

Interactive Bar Chart with D3.js and React

Handling State in React: Four Immutable Approaches to Consider

Apollo Client 2.0: Beyond GraphQL APIs

The Business Value of (& Precautions for)React Native

Sculpture “Balls in the sky”

Writing multiple Vue components in a single file

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Onur Köse

Onur Köse

Full-Stack Developer

More from Medium

[cvs-plugin] VSCode extension to help you get over CVS.

A Walkthrough for fetching API

How to Implement Camera Access from Web Browsers in 5 Minutes

How to delete all node modules in a folder and Free up HD space!