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.
Most of the requirements are already shipped with any Laravel project, however, you’d need to install npm if you have not done so.
Now, let’s move into the main business.
Step 1: set up your
Check if your
webpack.mix.js already contains the codes below, if not copy the code and to it.
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.
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
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$('.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
npm run dev
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.