title: Vuetify with Laravel
body: <p>I am working on a new <code>Laravel</code> Project, where I would like to use <a href="https://vuetifyjs.com/" rel="noreferrer">Vuetify</a>.</p>
  
  <p>I managed to configure and create the default layout.
  This is my master,blade.php layout file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="{{ config('app.locale') }}"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;!-- CSRF Token --&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;link href="{{ asset('css/vuetify.min.css') }}" rel="stylesheet"&gt;
  
      &lt;script&gt;
          window.Laravel = {!! json_encode([
              'csrfToken' =&gt; csrf_token(),
          ]) !!};
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;v-app id="app" top-toolbar footer v-cloak&gt;
          &lt;v-navigation-drawer persistent light :mini-variant.sync="mini" v-model="drawer"&gt;
              &lt;v-list class="pa-0"&gt;
                  &lt;v-list-item&gt;
                      &lt;v-list-tile avatar tag="div"&gt;
                          &lt;v-list-tile-avatar&gt;
                              &lt;img src="http://ma.twyn.com/bilder/tba.jpg" /&gt;
                          &lt;/v-list-tile-avatar&gt;
                          &lt;v-list-tile-content&gt;
                              &lt;v-list-tile-title&gt;Tamás Barta&lt;/v-list-tile-title&gt;
                          &lt;/v-list-tile-content&gt;
                          &lt;v-list-tile-action&gt;
                              &lt;v-btn icon @click.native.stop="mini = !mini"&gt;
                                  &lt;v-icon&gt;chevron_left&lt;/v-icon&gt;
                              &lt;/v-btn&gt;
                          &lt;/v-list-tile-action&gt;
                      &lt;/v-list-tile&gt;
                  &lt;/v-list-item&gt;
              &lt;/v-list&gt;
              &lt;v-list class="pt-0" dense&gt;
              &lt;v-divider&gt;&lt;/v-divider&gt;
              &lt;v-list-item v-for="item in items" :key="item"&gt;
                  &lt;v-list-tile&gt;
                      &lt;v-list-tile-action&gt;
                          &lt;v-icon&gt;@{{ item.icon }}&lt;/v-icon&gt;
                      &lt;/v-list-tile-action&gt;
                      &lt;v-list-tile-content&gt;
                          &lt;v-list-tile-title&gt;&lt;a href="/partners"&gt;@{{ item.title }}&lt;/a&gt;&lt;/v-list-tile-title&gt;
                      &lt;/v-list-tile-content&gt;
                  &lt;/v-list-tile&gt;
              &lt;/v-list-item&gt;
          &lt;/v-list&gt;
          &lt;/v-navigation-drawer&gt;
          &lt;v-toolbar fixed class="primary darken-4" light&gt;
              &lt;v-toolbar-side-icon light @click.native.stop="drawer = !drawer"&gt;&lt;/v-toolbar-side-icon&gt;
              &lt;v-toolbar-title&gt;PRM&lt;/v-toolbar-title&gt;
          &lt;/v-toolbar&gt;
          &lt;main&gt;
              &lt;v-container fluid&gt;
                  @yield('content')
              &lt;!--v-router--&gt;
              &lt;/v-container&gt;
          &lt;/main&gt;
      &lt;/v-app&gt;
  
      &lt;script src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt;
      &lt;script src="{{ asset('js/prm.js') }}"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>My question is how do i use this components correctly?</p>
  
  <p>Do I have to make component files, for each component im using?</p>
  
  <p>Do I only have one Vue instance for the main id #app?</p>
  
  <p>Sadly i could not find any examples or guidlines beside the vuetify page.
  I would be awesome if some one with experience could give me a push in the right direction</p>