javascriptlaravel-8bootstrap-5popper.js

How to include Bootstrap 5 JS file (bootstrap.bundle.js) to laravel 8?


I've installed Bootstrap v5.1.0 to my Laravel 8 project using npm. How do I include bootstrap.bundle.js at my public/app.js?

I have installed popperjs and added this code to my resources/js/bootstrap.js

try {
        window.Popper = require('@popperjs/core');

        require('bootstrap');
    } catch (e) {
}

My webpack.mix.js code:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/app.scss', 'public/css')
    .sourceMaps();

And I have added CSS & JS on my template like this:

{{-- Styles --}}
<link rel="stylesheet" href="{{asset('css/app.css')}}">

{{-- Script --}}
<script src="{{asset('js/app.js')}}"></script>

The public/js.app.js (generated from mix) has a lot of codes (see picture below), But still bootstrap JS codes(ex: Popovers) not working.

Bootstrap.bundle.js not working

How can I properly include Bootstrap JS files in my project?


Solution

  • Okay, I found the solution. It was a silly mistake. Bootstrap 5 requires additional JavaScript code for popovers to work. I'm writing this answer for (if) anyone come here from googling. Here is the link of Popover codes. Bootstrap Documentation

    And all the codes I found on public/js.app.js (generated from mix) was created on development environment (npm run dev). When I run npm run prod (Production) it get rids of these codes and also minifies the output.

    Thank you. Have a good day.