Quasar: Can't use a plugin from router

[CristalT]

Can't call a plugin function from router. I tested the same function calling from a component and works fine. So the quasar.conf.js file is correctly configured. Besides, I created the plugin from quasar-cli
What can I do to achive it plugin works at router?

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const Router = new VueRouter({
  mode: process.env.VUE_ROUTER_MODE,
  base: process.env.VUE_ROUTER_BASE,
  scrollBehavior: () => ({ y: 0 }),
  routes
})

Router.beforeEach((to, from, next) => {
  let currentUser = this.$auth.currentUser // cannot get currentUser of undefined
  let requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('home')
  else next()
})

export default Router

plugins/firebase.js

import * as firebase from 'firebase'

export default ({ app, router, Vue }) => {

  const config = {
    apiKey: '...',
    authDomain: '...',
    databaseURL: '...',
    projectId: '...',
    storageBucket: '...',
    messagingSenderId: '...'
  }

  const fireApp = firebase.initializeApp(config)

  const AUTH = fireApp.auth()

  Vue.prototype.$auth = AUTH

}

[rstoenescu]

Hi, This has nothing to do with Quasar. How hooks work is Vue-Router business entirely. Check documentation page on what this refers to inside these hooks. https://router.vuejs.org/en/advanced/navigation-guards.html

[CristalT]

The problem is not the navigation guard. What I mean is that I can't get this.$auth exported on the firebase.js plugin, even if I would like to use it out of Vue-Router's navigation guard. I followed the guide http://quasar-framework.org/guide/app-plugins.html even I tried the axios example of it, and not working.

[rstoenescu]

import * as firebase from 'firebase'
const config = {
  apiKey: '...',
  authDomain: '...',
  databaseURL: '...',
  projectId: '...',
  storageBucket: '...',
  messagingSenderId: '...'
}

const fireApp = firebase.initializeApp(config)

export const AUTH = fireApp.auth()

export default ({ app, router, Vue }) => {
  Vue.prototype.$auth = AUTH
}

...then import { AUTH } from 'plugins/firebase' where you use it outside of Vue files.

Again, this has nothing to do with Quasar...

[tecfu]

@rstoenescu Totally unrelated, but thanks for documenting anyway!