Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

anonymouse703's avatar

Some effects from JS Theme is not working in Vue component

In my previous thread has confusions so I re-write the thread for clarification.

If I create pure laravel project it is working but if I create Laravel 10 - Vue project some effect is not working

So my questions are:

  1. Where to put my the Theme Assets in Laravel 10 - Vue project? (Professional way) in app.js? bootstrap.js? vite.cofig? or in the app.blade.php?

As of now I import the assets in the app.blade.php and there is no error in console but some effects are not woking example toggle side menu, dropdown menu, dark mode, modal open and others that has JS initialization

current setup

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title inertia>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <link href="{{ asset('dist/favicon.png') }}" rel="shortcut icon">
    <link href="{{ asset('dist/apple-touch-icon.png') }}" rel="apple-touch-icon">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
    <link href="{{ asset('dist/bower_components/select2/dist/css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('dist/bower_components/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">
    <link href="{{ asset('dist/bower_components/dropzone/dist/dropzone.css') }}" rel="stylesheet">
    <link href="{{ asset('dist/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') }}"
        rel="stylesheet">
    <link href="{{ asset('dist/bower_components/fullcalendar/dist/fullcalendar.min.css') }}" rel="stylesheet">
    <link href="{{ asset('dist/bower_components/perfect-scrollbar/css/perfect-scrollbar.min.css') }}" rel="stylesheet">
    <link href="{{ asset('dist/bower_components/slick-carousel/slick/slick.css') }}" rel="stylesheet">
    <link href="{{ asset('dist/css/main.css?version=4.5.0') }}" rel="stylesheet">

    <!-- Scripts -->
    @routes
    @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
    @inertiaHead
</head>

<body class="menu-position-side menu-side-left full-screen with-content-panel">
    @inertia
    <script src="{{ asset('dist/bower_components/jquery/dist/jquery.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/popper.js/dist/umd/popper.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/moment/moment.js') }}"></script>
    <script src="{{ asset('dist/bower_components/chart.js/dist/Chart.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/select2/dist/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/jquery-bar-rating/dist/jquery.barrating.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/ckeditor/ckeditor.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap-validator/dist/validator.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('dist/bower_components/ion.rangeSlider/js/ion.rangeSlider.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/dropzone/dist/dropzone.js') }}"></script>
    <script src="{{ asset('dist/bower_components/editable-table/mindmup-editabletable.js') }}"></script>
    <script src="{{ asset('dist/bower_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/fullcalendar/dist/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/tether/dist/js/tether.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/slick-carousel/slick/slick.min.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap/js/dist/util.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap/js/dist/alert.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap/js/dist/button.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap/js/dist/carousel.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap/js/dist/collapse.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap/js/dist/dropdown.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap/js/dist/modal.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap/js/dist/tab.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap/js/dist/tooltip.js') }}"></script>
    <script src="{{ asset('dist/bower_components/bootstrap/js/dist/popover.js') }}"></script>
    <script src="{{ asset('dist/js/demo_customizer.js?version=4.5.0') }}"></script>
    <script src="{{ asset('dist/js/main.js?version=4.5.0') }}"></script>

    <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-XXXXXXXX-9', 'auto');
        ga('send', 'pageview');
    </script>

</body>

</html>

One sample in the main.js is mobile menu trigger

in the MobileMenu Component I have this

  <div class="mobile-menu-trigger" @click="toggleMobileMenu">
      <div class="os-icon os-icon-hamburger-menu-1"></div>
  </div>

As I check the main.js the trigger is this

function os_init_sub_menus() {
    // INIT MENU TO ACTIVATE ON HOVER
    var menu_timer;
    $('.menu-activated-on-hover').on('mouseenter', 'ul.main-menu > li.has-sub-menu', function () {
        var $elem = $(this);
        clearTimeout(menu_timer);
        $elem.closest('ul').addClass('has-active').find('> li').removeClass('active');
        $elem.addClass('active');
    });
    $('.menu-activated-on-hover').on('mouseleave', 'ul.main-menu > li.has-sub-menu', function () {
        var $elem = $(this);
        menu_timer = setTimeout(function () {
            $elem.removeClass('active').closest('ul').removeClass('has-active');
        }, 30);
    }); // INIT MENU TO ACTIVATE ON CLICK

    $('.menu-activated-on-click').on('click', 'li.has-sub-menu > a', function (event) {
        var $elem = $(this).closest('li');

        if ($elem.hasClass('active')) {
            $elem.removeClass('active');
        } else {
            $elem.closest('ul').find('li.active').removeClass('active');
            $elem.addClass('active');
        }

        return false;
    });
}


    $('.mobile-menu-trigger').on('click', function () {
        $('.menu-mobile .menu-and-user').slideToggle(200, 'swing');
        return false;
    });
    os_init_sub_menus();

I have other JS init in the main.js

Main javascript functions to init most of the elements

#1. CHAT APP #2. CALENDAR INIT #3. FORM VALIDATION #4. DATE RANGE PICKER #5. DATATABLES #6. EDITABLE TABLES #7. FORM STEPS FUNCTIONALITY #8. SELECT 2 ACTIVATION #9. CKEDITOR ACTIVATION #10. CHARTJS CHARTS http://www.chartjs.org/ #11. MENU RELATED STUFF #12. CONTENT SIDE PANEL TOGGLER #13. EMAIL APP #14. FULL CHAT APP #15. CRM PIPELINE #16. OUR OWN CUSTOM DROPDOWNS #17. BOOTSTRAP RELATED JS ACTIVATIONS #18. TODO Application #19. Fancy Selector #20. SUPPORT SERVICE #21. Onboarding Screens Modal #22. Colors Toggler #23. Auto Suggest Search #24. Element Actions

so how I can make it working in Laravel-Vue?

Question 2 : Should I transfer the init in the vue components?

For structure clarification this is my structure in the AuthenticatedLayout.vue

<script setup>
import { ref } from 'vue';
import { Link } from '@inertiajs/vue3';
import Search from '../Pages/Partials/Search.vue';
import Mobile from '../Pages/Partials/Mobile.vue';
import Menu from '../Pages/Partials/Menu.vue';
import Topbar from '../Pages/Partials/Topbar.vue';
import Breadcrumb from '../Pages/Partials/Breadcrumb.vue';
import Sidebar from '../Pages/Partials/Sidebar.vue';

</script>

<template>
    <div>
        <div class="all-wrapper with-side-panel solid-bg-all">
            <Search />
            <div class="layout-w">
                <Mobile />
                <Menu />
                <div class="content-w">
                    <Topbar />
                    <Breadcrumb />
                    <div class="content-panel-toggler">
                        <i class="os-icon os-icon-grid-squares-22"></i><span>Sidebar</span>
                    </div>
                    <div class="content-i">
                        <div class="content-box">
                            <slot />
                        </div>
                        <Sidebar />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
0 likes
0 replies

Please or to participate in this conversation.