How to use jquery-ui with npm (laravel-mix)?

Question

I have npm installed the jquery-ui. It's all split into components there and it seems pretty hard to use them in my javascript files that I compile using laravel-mix.

This is how I managed to invoke draggable to a set of elements:

require('jquery-ui/themes/base/draggable.css');
var jQuery = require('jquery');
var draggable = require('jquery-ui/ui/widgets/draggable');

var draggableOptions = {
    revert: 'invalid',
    // other options...
    cursor: 'move'
};

$('.resource').each(function(index, resource) {
    new draggable(draggableOptions, $(resource));
});

// The documented approach didn't work because there was no function 'draggable'
// $('.resource').draggable(draggableOptions);

Now I am trying to use the jquery-ui effects like bounce or shake and I can't manage to import and/or invoke them in any way either like documented or like above. And all in all I have the feeling that I'm doing it all wrong and it should be easier.

MindTooth · Accepted Answer · 2018-06-11 17:44:41Z

5

Been at this my self today, and I've come to this sort of solution.

Edit you /resources/assets/js/app.js and add the following:

import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui/ui/widgets/autocomplete.js';
import 'jquery-ui/ui/widgets/sortable.js';

As you can see, you need to add the widgets that you intend to include.

Source: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/jquery-ui.md

I hope that it might help you on the way.

answered Jun 11, 2018 at 17:44

MindTooth

5,2484 gold badges23 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use jquery-ui with npm (laravel-mix)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related