Adding jQuery, Bootstrap 4 and additional jQuery plugins to Laravel 5.5

It seems jQuery has been becoming less and less relevant in the front end world as Laravel 5.5 makes adding jQuery, Bootstrap 4 and it’s plugins a bit obscure with little to no documentation on how to compile them with Laravel Mix. The solution I found is the easiest way to maintain Bootstrap 4, jQuery and jQuery plugins on your Laravel 5.5 application.

package.json

Open up your package.json and add the following lines inside your devDependencies section. Bootstrap 4 is brand new, there will be frequent updates. Replace the version number with the latest version.
Note: Popper.js is required for the new Bootstrap 4.

"bootstrap": "^4.1.1",
"popper.js": "^1.11.0"

Then run npm to install the package.

npm install

bootstrap.js

I am only loading up Bootstrap 4 and nothing else. So if you’re using Vue.js keep the imports there.

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */
try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = Popper;
    require('bootstrap');
} catch (e) {}

webpack.mix.js

We need to define autoload for the jQuery and Popper.js.

 mix.autoload({
        jquery: ['$', 'window.jQuery', 'jQuery'],
        'popper.js/dist/umd/popper.js': ['Popper']
    })
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/style.scss', 'public/css')
    .version()

app.js

Your app.js file is where you will be adding third party plugins.

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
// Register $ global var for jQuery
import $ from 'jquery';
window.$ = window.jQuery = $;
// Import jQuery Plugins
import 'jquery-ui/ui/widgets/datepicker.js';

Run and compile

Now that it’s all set up, we just need to compile all the files (I am running development mode here for non-minifed pre-production code).

npm run dev

That’s it!

You should now have app.js in your public folder ready to be linked in your front end.

Justin Mathew

A front end web developer specializing in HTML/CSS, JS, PHP & MySQL with over 10 years experience in the web development field.