How to use JQuery-UI with Aurelia

Question

I started a new Aurelia app using the Aurelia CLI.

I installed JQuery and configured aurelia.json using the instructions at the Aurelia documentation:

http:/

Answer 1

The jquery-ui package doesn't include a "built" version of jquery-ui as far as I can tell. I finally got this working by using the jquery-ui-dist package, which includes the default jquery-ui.js and jquery-ui.css files.

npm install jquery-ui-dist --save

Now add it aurelia.json in dependencies for vendor-bundle:

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

Notice we are loading jquery first. The "main" attribute tells it that it should load jquery-ui.js from that directory. The "deps" attribute tells it that it is dependent on jquery. Finally the "resources" attribute includes the default jquery-ui.css.

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

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

To use in a ts file:

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

Answer 2

I'm using Aurelia 1.0.X, after updating I needed these two imports for using any jQuery-UI widget, in this case draggable. It also works when importing 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"