G
@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
