Hi,

You could throw them into a QLayout Header with the appropriate view (capital H).

You could also take a look at adding the positioning classes that suit your needs (fixed, fixed-top, etc.) to the element(s).

Okay… got it working with cookies–that’ll have to do for now.

I think this should work, but I’m getting the error

UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 4): TypeError: local.getItem is not a function

…and I don’t have the foggiest how to address it. Is it possibly because I’m using SSR? I don’t get that issue when running in SPA mode, but then, I don’t get any issues when running in SPA mode–my persistedstate / firebase properly loads before the page, so I don’t get re-directions on refresh.

Currently doing a SSR app with Quasar v1 CLI & Firebase for auth (via Vuex). I have Firebase loaded in boot. Auth flow (simplified): if logged in, user can access anything under “player” layout (multiple pages). If not logged in, user can only see /login. Redirection accomplished via Router.beforeEach nav guard in router’s index.js.

If just clicking links (router.push), everything works great. However, when reloading the page or trying to access an auth restricted page, it’ll bounce the logged-in user back to /login. From /login, clicking a nav link will work just fine again.

I think the problem is on reload/URL entry, the entire state/js is wiped clean. List below of the fixes I tried. Long story short, though, I noticed that Firebase’s initial onAuthStateChange requests were returning null until the page fully loaded, and then user identity would be properly loaded to the state & returned. No matter how early I tried to tuck the Firebase listener into the flow, I got the same results. I thought it was Firebase’s problem until I followed Tobias’ suggestions link here for persistent storage via localstorage / cookies, and while I could get them working, my store.state.user.user wouldn’t update until redirection to /login had already occurred. Before then, store.state.user.user returned null. After, it properly read from localStorage.

I’ve tried putting beforeCreated listeners on the relevant pages/layouts to get initial login state:

mainAuthLayout.vue

beforeCreate() {
  this.$auth.onAuthStateChanged(user => {
    if (user) {
      user.getIdToken().then(idToken => {
        this.$store.dispatch("user/setUser", idToken)
        this.$router.push("/home/main")
      })
    } else {
      this.$store.dispatch("user/setUser", null)
    }
  });
}

Didn’t work. I tried putting onAuthStateChange / getUser methods in the firebase boot file

boot/firebase.js

import firebase from "firebase/app"
import "firebase/auth"
import config from "./env.json"

export const fireApp = !firebase.apps.length ? firebase.initializeApp(config) : firebase.app() 

export const AUTH = fireApp.auth();

export default ({ store, Vue }) => {

  AUTH.onAuthStateChanged(user => {
    if (user) {
      user.getIdToken().then(idToken => {
        store.dispatch("user/setUser", idToken);
      });
    } else {
      store.dispatch("user/setUser", null);
    }
  });
  
  Vue.prototype.$auth = AUTH;
}

That also didn’t work. I tried a pre-fetch on App.vue (basically the same code), which also didn’t work. In all of this the same problem: redirection to /login before store / $auth ever recognized that the user was already logged in.

Incidentally:
router/index.js

Router.beforeEach((to, from, next) => {
  const currentUser = store.state.user.user
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !currentUser) next("/")
  else next()
})

There’s no problem if I put my redirect logic as a .then(this.$router.push) in the pages themselves, but that is somewhat inelegant as it flashes the pages before redirection. Alternatively I could redirect users to a loading screen for a pretty short period of time which then routes them to the proper page once auth/store has had a chance to kick in, but I’d like to avoid if possible.

Any help or directional feedback would be so welcome. Even just suggestions of where I could be looking / reading more. I’ve thrown 6 hours at this already, happy to throw more. Just wanted to see if any of you knowledgeable folks would be able to quickly spot something I was missing.

@rstoenescu said in ClosePopup Error in beta 1.0.0:

v-close-popup was added in quasar v1.0.0-beta.11.
While we are in v1 beta, it is paramount that you are running latest version as soon as it is released.

Turns out it was a silly mistake; this is exactly what was going on. Was on an earlier beta version. Thanks!

Should note: using the Quasar CLI.

Hi,

Beginner dev here. Running a vanilla Quasar SSR project. I’m trying to add v-close-popup to a dialogue button, but I can’t even get that far. The minute I add the ‘ClosePopup’ directive to the directives list in quasar.conf.js (as below):

  directives: [
    'ClosePopup',
    'Ripple'
  ],

…running quasar dev -m ssr in the CLI will throw up an error (as below):

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Unknown import from Quasar: ClosePopup

Remove the single ‘ClosePopup’ directive, and the app runs fine.

Not sure if this is a bug or my inexperience showing in failing to catch a silly mistake. Any help appreciated.

PS: confirmed I still get the same error running dev mode as SPA