Multiple Layouts

  • Hello, I’m experimenting with Quasar to build an authenticated app. The basic idea is to have the initial login screen (available to everyone, no header / footer) followed by some number of authenticated screens (header / nav / footer).

    I have two layouts, one with nothing (i.e. for the login screen) and a second that would then be applied to all authenticated screens.

    The problem is I can’t figure out how to switch between them. Any guidance on how I would apply the ‘blank’ layout to the login view and the ‘default’ layout to all others?


  • Admin


    This is a matter of routes structure (/src/routes.js). Example:

        path: '/login',
        component: load('loginLayout'), // /src/loginLayout.vue
        children: [
          {path: 'about', component: load('test-layout/about')},
          {path: 'layout', redirect: '/test-layout/about'},
          {path: 'toolbar', component: load('test-layout/toolbar')},
          {path: 'tabs', component: load('test-layout/tabs')},
          {path: 'drawer', component: load('test-layout/drawer')}
        path: '/app',
        component: load('secondLayout'), // /src/secondLayout.vue
        children: [
          {path: 'a', component: load('web-tests/a')},
          {path: 'b', component: load('web-tests/b')},
          {path: 'c', component: load('web-tests/c')}

    In this case /login/about (along all siblings) uses loginLayout while /app/a (along its siblings) uses secondLayout.

    Read more about nested Vue routes.

  • Perfect, that is what I needed (I was down that path but aborted at some point). Thanks @rstoenescu, I will follow-up with any other details that might help others.

Log in to reply