Layouts vs componants

[e_1991]

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.

[rconstantine]

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.

[genyded]

@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

[potatoheadgear]

@genyded but where the .vue SFC created under the components folder come into play in this situation? Where and how are they used and referenced? Is it possible to create an entire app without using the components section at all and rather doing everything in SFCs in the /pages folder?

[s.molinari]

@potatoheadgear - A component is a component. It doesn’t matter if it is located in the root, /layouts, /pages or the /components folders. Wherever you place the .vue file within the /src folder (or in sub-folders), you can import it anywhere else in your application. That’s because, since it is a .vue file, Vue knows what to do with it in its compilation process.

So, having said that, the only reason there are /pages, /layouts and /components folders is for organizational purposes. Everything in those folders is Vue SFCs. They naturally also have different purposes, despite them all being .vue components, and the folders depict those purposes. Nothing more, nothing less.

Scott

[Max]

@s-molinari well said!