How to use jQuery-UI with Aurelia

Question

I started a new Aurelia application using the Aurelia CLI.

I installed jQuery and configured aurelia.json using the instructions in the Aurelia documentation:

http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6

Then I installed npm jQuery-ui.

Now I need to know how to configure audelia.json to recognize jquery-ui.

The Aurelia documentation provides an example of using a module reference:

"dependencies": [ { "name": "library-name", "path": "../node_modules/library-name/dist/library-name" } ] 

The problem is that unlike when you download jquery-ui directly, the JQuery-ui module does not have the actual Jquery-ui.js file (if it could not find it).

thanks

Answer 1

The jquery-ui package does not contain a built-in version of jquery-ui, as far as I can tell. I finally got this working using jquery-ui-dist package which includes jquery-ui.js and jquery-ui.css files by default.

 npm install jquery-ui-dist --save 

Now add aurelia.json depending on the provider:

  "dependencies": [ "aurelia-binding", ... "jquery", { "name": "jquery-ui-dist", "path": "../node_modules/jquery-ui-dist", "main": "jquery-ui", "deps": ["jquery"], "resources": [ "jquery-ui.css" ] }, ] 

Note that loading jquery first. The "main" attribute reports that it should load jquery-ui.js from this directory. The deps attribute indicates that it is dependent on jquery. Finally, the "resources" attribute includes jquery-ui.css by default.

Now in app.html be sure to specify the css file:

 <require from="jquery-ui-dist/jquery-ui.css"></require> 

For use in the ts file:

 import * as $ from 'jquery'; import 'jquery-ui-dist'; 

Answer 2

I use Aurelia 1.0.X, after the update I need these two imports to use any jQuery-UI widget, in this case draggable. It also works when importing a slider or resizable.

 import $ from 'jquery'; import {draggable} from 'jquery-ui'; 

In my package.json, my jspm dependencies are as follows:

 "jquery": "npm: jquery@ ^3.2.1", "jquery-ui": "github:components/ jqueryui@ ^1.12.1"