How to Add jQuery UI Plugin to a Laravel App using Laravel-mix

After some hours of battle trying to include the jQuery UI plugin in my Laravel app using both CDN and downloaded jQuery UI files to no avail, I finally discovered a way around it after a series of researches and I felt it’s worth writing about it.

Requirements:

Most of the requirements are already shipped with any Laravel project, however, you’d need to install npm if you have not done so.

Intro

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice -official jQuery UI site.

Now, let’s move into the main business.

Step 1: set up your webpack.mix.js configuration

Check if your webpack.mix.js already contains the codes below, if not copy the code and to it.

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

Step 2: Install jQuery UI

Next up is to install the jQuery UI into your app. Run the command below in your terminal. Ensure that you are in the root folder of your app.

npm install jquery-ui --save-dev

Step 3: Add your desired Widget

Now you need to specify the widget you want to use. For example, assuming you’d want to use datepicker widget, open your resources/assets/js/app.js and add the following lines of code.

// resources/assets/js/app.js

import $ from 'jquery';
window.$ = window.jQuery = $;

import 'jquery-ui/ui/widgets/datepicker.js';
//add as many widget as you may need

Step 4: Load the jQuery UI CSS

To load the jQuery UI CSS, add the following lines of code in the resources/asssets/css/app.scss.

// resources/assets/sass/app.scss

@import '~jquery-ui/themes/base/all.css';

Step 5: Activate the plugin

Assuming the class of the element you want to add the datepicker widget is .datepicker, then add the following line of code to your resources/assets/js/app.js

// resources/assets/js/app.js
$('.datepicker').datepicker();
/ e.g <input type="text" class="datepicker" />

Finally, you need to build the assets using webpack. Run the command below to convert the resources/assets/js/app.js and resources/assets/css/app.scss to public/js/app.js and public/css/app.css respectively.

npm run dev

Conclusion

Adding the jQuery UI plugin to your Laravel app using the conventional CDN or downloading it and linking as usual will end up conflicting with the existing app.js and your app may not see the plugin.

This article was inspired by a post from Jeffrey Way on Github. I hope it helps.