When I use '/js/app.js' for vuejs on my Laravel view my Bootstrap template min.js doesn't load

126 Views Asked by At

When I put <script src="{{ asset('js/app.js') }}" defer></script>, my Bootstrap template doesn't load, but if I comment it out, it works fine.

I get this error on 2 Bootstrap templates I've used. I'm trying to figure out why putting <script src="{{ asset('js/app.js') }}" defer></script> in my template breaks it.

Here is my app.blade.php:

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

<head>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>R&D LoungeApp</title>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Favicon icon -->
    <link rel="icon" href="{{ asset('assets/images/logo_r&d.png') }}" type="image/x-icon">

    @yield('css')
    <!-- vendor css -->
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">


</head>

<body class="">
    <div class="loader"></div>
    <div id="app">
        
        @include('base.navbar')
       
        @include('base.header')
      
        <div class="pcoded-main-container">
            @yield('content')
            @yield('vuejs')
        </div>

        <!-- Required Js -->
        <script src="assets/js/vendor-all.min.js"></script>
        <script src="assets/js/plugins/bootstrap.min.js"></script>
        <script src="assets/js/pcoded.min.js"></script>
        <script src="assets/js/menu-setting.min.js"></script>


        @yield('javascript')
      
    </div>
    <!-- Footer -->
    @include('base.footer')

    <!-- Scripts VueJS-->
    <script src="{{ mix('js/app.js') }}"></script> 
</body>

</html>
0

There are 0 best solutions below