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>

@JSONK I’ve removed all my previous suggestions as It was getting confusing, my original suggestion for using a button does what you need It to do. I just got tag & type mixed up.

<q-btn type="a" href="https://quasar.dev/">Quasar</q-btn>

<q-btn type="a" href="https://quasar.dev/">Quasar</q-btn>

@JSONK I’ve removed all my previous suggestions as It was getting confusing, my original suggestion for using a button does what you need It to do. I just got tag & type mixed up.

<q-btn type="a" href="https://quasar.dev/">Quasar</q-btn>

<q-btn type="a" href="https://quasar.dev/">Quasar</q-btn>

@Marin-Vartan Is there any reason not to install It separately outside src-capacitor?

So In node_modules -> @quasar -> app -> lib -> capacitor -> capacitor-config.js, there Is a function called __handleSSLonIOS() that resolves the file “node_modules/@capacitor/ios/ios/Capacitor/Capacitor/CAPBridgeViewController.swift” however on @capacitor 2.4.0, the path Is “node_modules/@capacitor/ios/Capacitor/Capacitor/CAPBridgeViewController.swift”

Current quasar version is 1.12.13

Can anyone help with the below error?

Disabling HTTPS In quasar.conf hides the terminal error but I’m just stuck on the splashscreen (I think It’s loading scrips via https).

Below works fine with PWA mode, and initially worked without any issues when running dev on IOS with capacitor. Quasar creates an external dev server when I run quasar dev -m capacitor -T ios which when I open, does not show any SSL errors.

devServer: {
  https: {
    key: fs.readFileSync('ssl/server.key'),
    cert: fs.readFileSync('ssl/server.crt'),
  },
  port: 8080,
  open: true // opens browser window automatically
},

In Xcode, I get the following errors:

️ WebView failed provisional navigation
️ Error: The certificate for this server is invalid. You might be connecting to a server that is pretending to be “192.168.1.117” which could put your confidential information at risk.

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>