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

Shivamyadav's avatar

Breaking the js in vue with inertia and laravel.

Breaking the vanilla js when using the it with vue and inertia vue. (While using in the .vue file).

<!DOCTYPE html>
<html lang="en">

<!-- Mirrored from spaceraceit.com/html/bankco/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 26 Sep 2025 17:12:12 GMT -->
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>BanCo - Dashboard</title>
    <link rel="stylesheet" href="{{ asset('assets/css/slick.css')}}" />
    <link rel="stylesheet" href="{{ asset('assets/css/aos.css')}}" />
    <link rel="stylesheet" href="{{ asset('assets/css/output.css')}}" />
    <link rel="stylesheet" href="{{ asset('assets/css/style.css')}}" />
    @vite('resources/js/app.js')
    @inertiaHead
</head>
<body>
    <!-- layout start -->
   @inertia

    <!-- layout end -->
    <!--scripts -->
    <script src="{{ asset('assets/js/jquery-3.6.0.min.js')}}"></script>
    <script src="{{ asset('assets/js/aos.js')}}"></script>
    <script src="{{ asset('assets/js/slick.min.js')}}"></script>
</body>

</html>

When i am using this approach it is breaking just working the css.

But when i put my .vue code inside the app.blade again seems everything is woking fine.

1 like
3 replies
vincent15000's avatar

Why do you need to use jQuery if you are using VueJS ? According to me, it's not a good idea.

Furthermore I would load the different assets --- aos, slick, ... --- via @vite().

Shivamyadav's avatar

Due to the admin template was build in vanilla ja and jquery

1 like
JussiMannisto's avatar

That's unlikely to work. If your jQuery/vanilla JS code modifies DOM elements directly, that bypasses Vue logic, and the changes will be overwritten whenever Vue re-renders that section of the page. That's because Vue uses a virtual DOM, which is one of the features that makes Vue (and React) so fast.

1 like

Please or to participate in this conversation.