Layouts vs componants



  • Hi I am new to quasar and I am currently working through the recommended Vuejs course to get an understanding of how quasar works. I am wondering if anyone can explain the difference between layouts and components and if you would recommend using one over the other or as a combination?

    Just looking for the best way to structure pages and use code efficiently without repeating code.

    Thanks in advance.



  • You’ll end up using both. Layouts are more presentation and components are chunks within the presentation. You’re taking Max’s course on Udemy? I used the final project (before the bonus material) as my first conversion to Quasar. So all of the components I created for that project were moved over to Quasar, but shuffled around to accommodate Layouts. I recommend trying to do the same yourself, then we could compare notes if that will help. I’m brand new to all of this myself so can’t claim to know much.



  • @rconstantine A layout is just a Vue component. The name layout is just used to indicate just that. It;s thing like a common menu/navigation, maybe a footer and so on that are used on multiple ‘pages’ that house other components. Just like any other components, Layouts are reusable (typically via routes) and you can have as many different ones as you want.

    Route: /
    Layout: Default (common menu, footer, etc)
    Child: Home ‘page’

    Route: /users/profile
    Layout: Default (common menu, footer, etc)
    Child: Profile ‘page’

    Route: /admin/users
    Layout: Admin (common menu, footer, etc - different from Default layout)
    Child: UserList ‘page’

    Route: /admin/permissions
    Layout: Admin (common menu, footer, etc - different from Default layout)
    Child: Permissions ‘page’

    In the above for the different routes, you don’t need to repeat the menus, footer etc on every page. It would actually really look more like:

    {
      path: '/',
      component: () => import('layouts/Default'),
      children: [
        { path: '', component: () => import('pages/Home') },
        { path: 'users/profile', component: () => import('pages/Profile') }
      ]
    },
    {
      path: '/',
      component: () => import('layouts/Admin'),
      children: [
        { path: '', component: () => import('pages/UserList') },
        { path: 'grid', component: () => import('pages/Permissions') },
      ]
    }
    

    That’s a very simplistic example, but hopefully you get the idea. Layouts are intended to be reused on multiple ‘pages’ to maximize component (menu, footer, etc) reuse. Any other ‘components’ can be reused as well, but typically less frequently and sometimes not consistently across pages. To answer your question, you should use BOTH - as that is the whole point 😉