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:

To use in a ts file:

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