Ich versuche eine Website mit Laravel 5.4, Laravel Mix, VueJS und Materialise-css zu bauen.Materialize-css + Laravel + VueJS - wo man Modale, Seitennavigation etc. initialisiert
VueJS und jQuery werden mit Laravel geliefert, also gibt es dort nichts zu tun. Alle erstellten Komponenten funktionieren so, wie sie funktionieren sollten.
Ich habe Materialise-css über npm gemäß den Anweisungen auf der website installiert.
Aber jetzt bekomme ich einen Fehler, wenn ich versuche, ein Sitenav zu implementieren, das auf Knopf-klicken sollte. Andere Materialien wie Toasts, Collapsibles funktionieren gut.
Hier ist mein bootstrap.js der jQuery, Materialise-css etc lädt:
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
require('materialize-css');
import 'materialize-css/js/materialize.js';
import 'materialize-css/bin/materialize.js';
window.Vue = require('vue');
window.axios = require('axios');
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};
Und das ist mein adminarea.js, die das Zeug alles, was ich für meinen Admin-Bereich benötigen enthält:
require('./bootstrap');
Vue.component('example', require('./Vue/components/Example.vue'));
Vue.component('admindashboard', require('./Vue/components/Admindashboard.vue'));
Vue.component('test', require('./Vue/components/Test.vue'));
Vue.component('adminnav', require('./Vue/components/Adminnav.vue'));
const app = new Vue({
el: '#app',
data: {
title: 'Admindashboard'
},
methods: {},
mounted() {
console.log('Da bin ich!');
Materialize.toast('I am a toast!', 4000);
}
});
Meine Adminnav-Komponente:
<template>
<div>
<ul id="slide-out" class="side-nav">
<li><div class="userView">
<div class="background">
<img src="">
</div>
<a href="#!user"><img class="circle" src=""></a>
<a href="#!name"><span class="white-text name">John Doe</span></a>
<a href="#!email"><span class="white-text email">[email protected]</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<a href="#" data-activates="slide-out" class="btn" v-on:click="openSidenav">Sidenav</a>
</div>
</template>
<script>
export default {
mounted() {
console.log('Mainnav mounted');
},
methods: {
openSidenav(){
$('.button-collapse').sideNav('show');
}
}
}
</script>
Und die html-Datei:
<body>
<div id="app">
<adminnav></adminnav>
@yield('content')
</div>
<script src="{{ asset('assets/js/adminarea.js') }}"></script>
</body>
jQuery selbst funktioniert auch. Ich weiß nicht, wo ich die Materiellextras-Komponenten initialisieren soll. Irgendwelche Ideen?
Danke!