How To Use Jquery-ui With Aurelia

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#/d

Solution 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:

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

To use in a ts file:

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

Solution 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"

Solution 3:

Add of copy of jquery-ui.js to your static folder and add this line to your constructor to the class you intend to use jquery-ui, Please note : it should reference to the location of your jquery-ui file

import { $ } from'jquery';
exportclassIndex
{
  constructor(){
    require('../../../../../static/assets/js/jquery-ui');
  }
}