Choosing different layout vue files depending on platform

[OrthoCube]

I would like to use different vue layout files depending on the platform used (desktop / mobile). I thought it might be possible by modifying routes.

component: () => {
    this.$q.platform.is.mobile ? import('layouts/MobileLayout.vue') : import('layouts/DesktopLayout.vue')
}

but it seems that $q is not accessible from the this instance from the routes. I was thinking that it’d be as simple as this but it seems it isn’t.

In the end, do I just have to use a single layout and just use v-if all over to choose what to display?

I found a post on this forum that is asking the same thing, and the answer just says that “you can use multiple layouts, you are not limited to using just one” which is true, if the path determines which layout to use (for example, www.mysite.com/mobile/posts compared to www.mysite.com/posts) but how do I use the same path but choose which layout to use depending on platform?

Thanks in advance.

[rstoenescu]

You’re using ES6 arrow function, so it’s natural “this” does not refer to the same thing as a normal function. So use normal function.

[OrthoCube]

@rstoenescu Unfortunately, it seems that this is undefined even when using normal functions.

component: function () {
  return this.$q.platform.is.mobile ? import('layouts/MobileLayout.vue') : import('layouts/DesktopLayout.vue')
},

[rstoenescu]

Are you on SSR or what build mode are you using? Need more details in order to help you.

[eason]

@orthocube

Maybe like this
`
import { Platform } from ‘quasar’

component: () => {
return Platform.is.mobile ? import(‘layouts/MobileLayout.vue’) : import(‘layouts/DesktopLayout.vue’)
}
`

[genyded]

Make the layout a Vue dynamic component then switch it based on the platform.

[OrthoCube]

@rstoenescu This is just the default SPA. this in the routes.js file does not seem to point to Vue’s this so I can’t access $q. I have found a way, by using one layout but with a couple of v-ifs, choosing which to display based on the platform, but maybe there’s a better way to this… I just thought.