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://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6

I then npm installed Jquery-ui.

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

In the Aurelia documentation this example is given on how to reference a module:

"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 an actual Jquery-ui.js file ( if it does I couldn't find it).

Thank you

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"