[Solved] How to dynamically change layout in router base on platform

[folami]

How do I achieve this…

const router = [
  {
     path: '/someroute'
     component:  () => Platform.is.mobile ? import('layouts/mainLayout.vue') : import('layouts/mobileView.vue')
   ...
  }
]

Thanks

[Pratik Patel]

Try this code.

import { Platform } from 'quasar'

let custom_page;
if(Platform.is.mobile){
  custom_page ="mobileView.vue"
}
else{
    custom_page ="mainLayout.vue"
}

In route DIct .

{ path: '/', name: "/", component: () => import('layouts/' + custom_page)},

[folami]

@Pratik-Patel, I have thought about this but my app is in SSR mode and Platform Plugin needs to parse ssrContext during ssr rendering which is only available in boot file plugins and prefetch but not in router

function (ssrContext) {
  const platform = process.env.SERVER
    ? Platform.parseSSR(ssrContext)
    : Platform // otherwise we're on client

  // platform is equivalent to the global import as in non-SSR builds
}

[tof06]

@folami As far as I know, ssrContext is available in router :

//src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './routes'

Vue.use(VueRouter)

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation
 */

export default function({ store, ssrContext }) {
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,

    // Leave these as is and change from quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })
return Router
}

So, maybe you can make your routes array a function that return an array depending on what you want ?

[folami]

@tof06 please I would like to see an example of this

[tof06]

@folami
Well, I was thinking to something like this :

// src/router/routes.js
import { Platform } from 'quasar'
const routes = (ssrContext) => {
  const platform = process.env.SERVER ? Platform.parseSSR(ssrContext) : Platform
  return [
    { 
      path: '/',
      component: () => import('layouts/' + (platform.is.mobile ? 'mobileView.vue' : 'mainLayout.vue'))
      // ...
    }, // ...
  ]
}
export default routes

//src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

export default function ({ store, ssrContext}) {
  const Router = new VueRouter({
    routes: routes(ssrContext),
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })
  return router
}

Note that I didn’t test anything. I don’t know if it works, but, IMHO, it should

[folami]

@tof06 thanks, I will try it and let you know if it works

[folami]

@tof06 Sorry for late response, it works thanks so much