update MainLayout.vue element in Quasar dynamically

Question

I'm using Quasar Framework in which I'm trying to update an element on the MainLayout.vue layout component based on whether the user is logged in or not. I'm unable to get the login icon/button to change once I login to the site via a Login.vue component. I tried using provide/inject in the boot file to check if the user is logged in but it only updates after I refresh the whole page.

How do I get the login/logout q-btn to update dynamically based on the user login event from the Login.vue component?

Please let me know if I need to provide additional information.

MainLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
         <q-toolbar-title>
          <q-btn flat @click="$router.push('/')">
            Homepage
          </q-btn>
        </q-toolbar-title>
        <q-space />
        <q-btn v-if="!userLoggedIn" icon="login" @click="router.push('/login')" />
        <q-btn v-if="userLoggedIn" icon="logout" @click="logout" />
      </q-toolbar>
    </q-header>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { inject, ref } from "vue";

const userId = inject("userId", false);
const userLoggedIn = ref(userId);
</script>

Login.vue (only showing login related code)

import { inject, ref } from "vue";

const updateUserId = inject("updateLoginStatus");

const email = ref();
const password = ref();

const signInExistingUser = () => {
  signInWithEmailAndPassword(auth, email.value, password.value)
    .then(() => {
      updateUserId(auth.currentUser.uid);
      router.push("/");
    })
    .catch((error) => {
      $q.notify({
         // deal with error
      });
    });
};

boot.js

export default boot(async ({ app, router }) => {
  const user = await getCurrentUser();
  let userLoggedIn = ref(false);
  const uid = ref(false);
  if (user) {
    userLoggedIn.value = true;
    uid.value = user.uid;
  }

  const updateLoginStatus = (updatedUserId) => {
    uid.value = updatedUserId;
    userLoggedIn.value = !userLoggedIn.value;
    console.log(userLoggedIn.value);
    return userLoggedIn.value;
  };

  app.provide("updateLoginStatus", updateLoginStatus);
  app.provide("userId", uid.value);
});

Answer 1

I know this is a old thread. But I came across this and after I tried several methods, I found one that might be better.

On the MainLayout.vue, import onUpdated from vue. When you are redirected back from the login page, the onUPdated function will be triggered. You can add your logic there.

(I'm using Quasar 2)