Vuetify mit Laravel
Arbeite ich an einem neuen Laravel
Projekt, wo ich gerne verwenden möchte Vuetify.
Konnte ich konfigurieren und erstellen Sie das Standard-layout.
Dies ist mein Meister,blade.php layout-Datei:
<!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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link href="{{ asset('css/app.css') }}" >
<link href="{{ asset('css/vuetify.min.css') }}" >
<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-router-->
</v-container>
</main>
</v-app>
<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/prm.js') }}"></script>
</body>
</html>
Meine Frage ist, wie verwende ich diese Komponenten richtig?
Muss ich machen Komponente Dateien für jede Komponente im Einsatz?
Tun, ich habe nur eine Vue-Instanz für die Haupt-id #app?
Leider konnte ich nicht finden keine Vorbilder oder Richtlinien neben der vuetify Seite.
Ich wäre fantastisch, wenn jemand mit Erfahrung könnte mir einen Stoß in die richtige Richtung
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es mehrere Möglichkeiten, wie Sie gehen über die Verwendung von Vue (w/Vuetify) in Laravel. Sie können es verwenden, innen-blade-templates, so lange, wie Sie Ihre javascript-Datei ist die Montage an der DOM-Komponenten/Vue verwendet innerhalb dieser Bindung wird gut funktionieren.
Können Sie auch die Laravel/Vue boilerplate werden kann, setup, https://laravel.com/docs/5.4/frontend , und erstellen Sie alle Ihre Anmerkungen mit Vue template-Dateien.