侧边栏不会在 vue.js #app 元素内折叠 (sb-admin-2)

Question

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.

Answer 1

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>