CODEWITHSUNDEEP
jquery-uinpmlaravel-mix
Džuris
Džuris

Reputation: 2234

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

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.

Upvotes: 0

Views: 4015

Answers (1)

MindTooth
MindTooth

Reputation: 5130

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.

Upvotes: 5

Related Questions