vuejs application with different layouts (e.g. login layout, page layout, signup etc.)

Question

I generated a project using vue-cli. I see project has one App.vue which is kinda main layout of the app - if I'm not mistaken. Here I put my basic HTML layout and <router-view></router-view>. Now the issue is that I need completely different layout for login (different wrappers , body has different classes) but I can't change it since App.vue has template which is kinda "fixed" as a layout. How to approach this issue? Is there recommended way?

Should I create new component that represents layout so in that case my App.vue template would only have <router-view></router-view> and then LoginLayout.vue would be included into it?

Answer 1

I think I found a solution. The approach has App.vue containing only <router-view></router-view> and then including different components that represent layout (if needed, containing <router-view> and subroutes). I found a project using it in that way here.

I think it keeps things more clean and organised. IMHO, hiding all elements which define layout structure (all the divs) would be too messy - especially for bigger apps.

Answer 2

A nice solution for this is using slots

First create your "layout component"

src/components/layouts/basic.vue

<template>   <div class="basic-layout">     <header>[Company logo]</header>     <hr>      <slot/>      <hr>     <footer>       Made with ❤ at Acme     </footer>   </div> </template> 

Then use it in another component:

<template>   <layout-basic>     <p>Hello world!</p>   </layout-basic> </template>  <script>   import LayoutBasic from '@/components/layouts/basic'   export default {     components: {       LayoutBasic     }   } </script> 

"Hello world" will appear where the <slot/> tag is.

You can also have multiple slots with names, see the complete docs.