I am working on a new Laravel project where I would like to use Vuetify .
I was able to configure and create a default layout. This is my wizard, blade.php layout file:
<!DOCTYPE html> <html lang="{{ config('app.locale') }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link href="{{ asset('css/vuetify.min.css') }}" rel="stylesheet"> <script> window.Laravel = {!! json_encode([ 'csrfToken' => csrf_token(), ]) !!}; </script> </head> <body> <v-app id="app" top-toolbar footer v-cloak> <v-navigation-drawer persistent light :mini-variant.sync="mini" v-model="drawer"> <v-list class="pa-0"> <v-list-item> <v-list-tile avatar tag="div"> <v-list-tile-avatar> <img src="http://ma.twyn.com/bilder/tba.jpg" /> </v-list-tile-avatar> <v-list-tile-content> <v-list-tile-title>Tamás Barta</v-list-tile-title> </v-list-tile-content> <v-list-tile-action> <v-btn icon @click.native.stop="mini = !mini"> <v-icon>chevron_left</v-icon> </v-btn> </v-list-tile-action> </v-list-tile> </v-list-item> </v-list> <v-list class="pt-0" dense> <v-divider></v-divider> <v-list-item v-for="item in items" :key="item"> <v-list-tile> <v-list-tile-action> <v-icon>@{{ item.icon }}</v-icon> </v-list-tile-action> <v-list-tile-content> <v-list-tile-title><a href="/partners">@{{ item.title }}</a></v-list-tile-title> </v-list-tile-content> </v-list-tile> </v-list-item> </v-list> </v-navigation-drawer> <v-toolbar fixed class="primary darken-4" light> <v-toolbar-side-icon light @click.native.stop="drawer = !drawer"></v-toolbar-side-icon> <v-toolbar-title>PRM</v-toolbar-title> </v-toolbar> <main> <v-container fluid> @yield('content') </v-container> </main> </v-app> <script src="{{ asset('js/app.js') }}"></script> <script src="{{ asset('js/prm.js') }}"></script> </body> </html>
My question is: how to use these components correctly?
Do I need to create component files for every im component using?
Do I have only one Vue instance for the main id #app?
Unfortunately, I could not find any examples or directions next to the vuetify page. I would be cool if someone with experience could give me a push in the right direction
source share