title: Laravel vue with two different layout
body: <p>I that possible to have different layout in laravel vue components?</p>
  
  <p>If we use blades all we need is to change <code>@extends('layouts.app')</code> to <code>@extends('layouts.custom')</code> and then you have different design, but how it's working in vuejs?</p>
  
  <h1>Code</h1>
  
  <p>This is my <code>App.vue</code> file which is in charge of rendering template of all pages</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
            //navbar
          &lt;/nav&gt;
          &lt;el-container&gt;
              &lt;el-header&gt;Header&lt;/el-header&gt;
  
              &lt;el-container&gt;
                  &lt;el-aside width="200px"&gt;
                      &lt;h5&gt;{{site_name}}&lt;/h5&gt;
                  &lt;/el-aside&gt;
  
                  &lt;el-main&gt;
                      &lt;a class="sr-only sr-only-focusable" href="#content"&gt;Skip to main content&lt;/a&gt;
                      &lt;div&gt;
                          &lt;transition name="fade"&gt;\
                              //router which renders all components in this part
                              &lt;router-view id="content" :key="$route.fullPath"&gt;&lt;/router-view&gt;
                          &lt;/transition&gt;
                      &lt;/div&gt;
                  &lt;/el-main&gt;
              &lt;/el-container&gt;
  
              &lt;el-footer&gt;Footer&lt;/el-footer&gt;
          &lt;/el-container&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>and here is my layout blade file:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="{{ str_replace('_', '-', app()-&gt;getLocale()) }}"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
          &lt;meta name="csrf-token" content="{{ csrf_token() }}" /&gt;
  
          &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  
          &lt;link href="{{ asset('css/app.css') }}" rel="stylesheet" /&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="app"&gt;&lt;/div&gt;
  
          &lt;script src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt;
          &lt;script&gt;
              window.default_locale = "{{ config('app.locale') }}";
              window.fallback_locale = "{{ config('app.fallback_locale') }}";
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>Basically that <code>aside</code> part in <code>app.vue</code> i only need to show in admin part not front-end (for users)</p>
  </blockquote>
  
  <p>Any idea?</p>