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

Fouts

That module reference syntax is for a single file module, but jQuery UI has multiple files. You'll probably need to use main to define main module file, in addition to name and path. Scroll a bit down in Aurelia doc sample you have posted, and you'll find samples for using main under "A CommonJS Package" and "A Legacy Library". – Bod

I know but it still doesn't answer the question of exactly how to do it – Fouts

I tried to install this today also and wasn't able to get it to work. I'd be interested in the solution. – Disembowel

I'm stuck on this too. I had jquery-ui working with jspm, but haven't gotten in to work with cli yet. Help appreciated. – Polypropylene

Aurelia newbie here but see my answer below and see if it helps... – Femmine

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';

Femmine

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"

Northeastward

Answer 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';
export class Index
{
  constructor(){
    require('../../../../../static/assets/js/jquery-ui');
  }
}

Syndactyl