I would recommend having a second router view, one for all of your main pages and the transition for all child pages of a main page e.g.

<router-view/>
<router-view name="popup" v-if="$route.meta.popup"/> // Add your css transition or use a dialog

Routes

{
  path: '/home/',
  component: () => import('layouts/default.vue'),
  children: [
    {
      path: '',
      component: () => import('pages/Home/index.vue'),
      name: 'home',
      meta: {
        popup: false,
      },
    },
    {
      path: 'about',
      name: 'about.popup',
      components: {
        default: () => import('pages/Home/index.vue'),
        popup: () => import('pages/About/index.vue')
      },
      meta: {
        popup: true,
      },
    },
  ]
},

https://codepen.io/jadedRepublic/pen/xxGGNpg?editable=true&editors=101 not ideal but It works

@Tinny I made a sandbox as an example, sorry I don’t visit this forum often

@Tinny I’m fairly certain that’s how the layout Is intended anyway In Quasar, I personally make page specific changes to my layout header using $route.name, you can change what Is visible and what Isn’t like this:

<template>
 <q-header>
    <component :is="component.name" v-for="(component, index) in components" :key="index" v-if="$route.name == component.route"/>
</q-header>
</template>

<script>
export default {
   data () {
      return {
      components: [
        {
          name: 'AboutActions',
          route: 'about',
        },
        {
          name: 'ContactActions',
          route: 'contact'
        },
        {
          name: 'ShopActions',
          route: 'shop',
        },
      ]
      }
    },
    components: {
      AboutActions: () => import("./Includes/About"),
      ContactActions: () => import("./Includes/Contact"),
      ShopActions: () => import("./Includes/Shop"),
    },
   }
</script>

Did you add to your plugins In Quasar.conf? plugins: [‘Loading’]

@qyloxe said in Sharing my social sharing dialog component:

https://quasar.dev/quasar-utils/other-utils#Copy-to-Clipboard

Does copy to clipboard have support for all platforms? I’ve been using Capacitor since It’s already in my project but didn’t realise Quasar supports It

@Tinny I’m fairly certain that’s how the layout Is intended anyway In Quasar, I personally make page specific changes to my layout header using $route.name, you can change what Is visible and what Isn’t like this:

<template>
 <q-header>
    <component :is="component.name" v-for="(component, index) in components" :key="index" v-if="$route.name == component.route"/>
</q-header>
</template>

<script>
export default {
   data () {
      return {
      components: [
        {
          name: 'AboutActions',
          route: 'about',
        },
        {
          name: 'ContactActions',
          route: 'contact'
        },
        {
          name: 'ShopActions',
          route: 'shop',
        },
      ]
      }
    },
    components: {
      AboutActions: () => import("./Includes/About"),
      ContactActions: () => import("./Includes/Contact"),
      ShopActions: () => import("./Includes/Shop"),
    },
   }
</script>

@Tinny I made a sandbox as an example, sorry I don’t visit this forum often

Btw I would recommend using localforage, here Is an example:

import localforage from 'localforage'

  export default {
    methods: {
      apilogin (login) {
        return new Promise((resolve, reject) => {
          var response = {
            data: {
                token: 'Token',
                loggedIn: 'loggedIn',
                name: 'Name',
                image: 'Image',
                id: 'ID',
                employeeid: 'Employeeid'
            }
          }
          resolve(response)
        })
      },
      login () {
        return this.apilogin({ email: 'john@doe.com', password: 'doe123' }).then((response) => {
          return localforage.setItem('token', response.data).then(() => {
            return localforage.getItem('token').then((token) => {
              
              commit("setUserDetails", token);
              this.router.push({ name: 'index' });

            }).catch((e) => console.log('Failed to get storage tokens: ' + e.toString()))
          }).catch((e) => console.log('Failed to set storage tokens: ' + e.toString()))
        })
      }
    }
  }

this.$router.push({ name: ‘index’ }); does that give you an error?

import { firebaseAuth, firebaseDb } from "boot/firebase";
import { axiosInstance } from "boot/axios";

const state = {
  TOKEN: null,
  loggedIn: false,
  userDetails: {},
  loading_login: false,
  currentPage: {
    title: "",
    IsActive: false
  },

  CONFIGSYS: {
    COMPANY_ID: 0
  }
};

export default state <-- Add this at the bottom

Are you doing anything else with your router like a beforeeach?

I would recommend having a second router view, one for all of your main pages and the transition for all child pages of a main page e.g.

<router-view/>
<router-view name="popup" v-if="$route.meta.popup"/> // Add your css transition or use a dialog

Routes

{
  path: '/home/',
  component: () => import('layouts/default.vue'),
  children: [
    {
      path: '',
      component: () => import('pages/Home/index.vue'),
      name: 'home',
      meta: {
        popup: false,
      },
    },
    {
      path: 'about',
      name: 'about.popup',
      components: {
        default: () => import('pages/Home/index.vue'),
        popup: () => import('pages/About/index.vue')
      },
      meta: {
        popup: true,
      },
    },
  ]
},

@ramsesmoreno Is It showing 2 different splash screens by any chance? I vague remember getting the same error, I just tried a fresh install of Quasar and It work as expected without changing anything