so I have laravel project with sb-admin-2 and Vue.js
as you can see when I'm using #app element in blade view for the whole HTML page then the sb-admin-2 sidebar not collapsing.
***NOTE*** this code is NOT working -> sidebar inside #app
{{-- this #app is for optional pages that using vue.js --}}
<div id="app"> ***NOTICE*************
<div id="wrapper">
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) --> ***NOTICE****************
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
</nav>
<!-- End of Topbar -->
@yield('content')
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
</div>
{{-- end of #app element --}}
<!-- Bootstrap core JavaScript-->
<script src="{{ asset('js/admin/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('js/admin/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- Core plugin JavaScript-->
<script src="{{ asset('js/admin/vendor/jquery-easing/jquery.easing.min.js') }}"></script>
<!-- Custom scripts for all pages-->
<script src="{{ asset('js/admin/js/sb-admin-2.min.js') }}"></script>
<!-- Page level plugins -->
<script src="{{ asset('js/admin/vendor/chart.js/Chart.min.js') }}"></script>
<!-- vue.js -->
<script src="{{ asset('js/app.js') }}"></script>
but when I use it on lower level that's not include the sidebar toggler it's working again.
***NOTE*** this code is working -> sidebar is NOT inside #app
{{-- this #app is for optional pages that using vue.js --}}
<div id="wrapper">
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) --> ***NOTICE********************
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
</nav>
<!-- End of Topbar -->
<div id="app"> ***NOTICE***********************
@yield('content')
</div>
{{-- end of #app element --}}
</div>
<!-- End of Main Content -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Bootstrap core JavaScript-->
<script src="{{ asset('js/admin/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('js/admin/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- Core plugin JavaScript-->
<script src="{{ asset('js/admin/vendor/jquery-easing/jquery.easing.min.js') }}"></script>
<!-- Custom scripts for all pages-->
<script src="{{ asset('js/admin/js/sb-admin-2.min.js') }}"></script>
<!-- Page level plugins -->
<script src="{{ asset('js/admin/vendor/chart.js/Chart.min.js') }}"></script>
<!-- vue.js -->
<script src="{{ asset('js/app.js') }}"></script>
there are no errors no warning on loading the page or clicking the sidebar toggler.
when the sidebar toggler is inside the vue.js #app, jquery(sb-admin-2) doesn't know any click event on this button exists.
this is my laravel bootstrap.js file:
window._ = require('lodash');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
this is my laravel app.js source file:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('branches-component', require('./components/BranchesComponent.vue').default);
const app = new Vue({
el: '#app',
});
only when I remove vue.js from app.js then button works again.
I finally found the answer.
the problem was loading Vue javascript files after jquery and sb-admin-2 so the DOM wasn't rendered for jquery or something like that:
the correct way of including scripts was to import Vue first and then jquery, admin-sb-2, etc...
<!-- Vue.js should first-->
<script src="{{ asset('js/app.js') }}"></script>
<!-- jquery and admin-sb-2 , etc... -->
<script src="{{ asset('js/admin/vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('js/admin/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('js/admin/vendor/jquery-easing/jquery.easing.min.js') }}"></script>
<script src="{{ asset('js/admin/js/sb-admin-2.min.js') }}"></script>
<script src="{{ asset('js/admin/vendor/chart.js/Chart.min.js') }}"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.