Integrating jQuery plugins with Aurelia

1

How do I use jquery plugins with Aurelia? In particular, I am trying to use Notify.js.

It’s in my package.json under jspm -> dependencies as follows:

"notifyjs-browser": "npm:notifyjs-browser@^0.4.2"

And I have tried to import it as follows:

import { notify } from 'notifyjs-browser';

And use it like so:

$.notify("Test 123", "error");

However, I get this error message:

$.notify is not a function

I assume I will have the same issue with any jQuery plugins in Aurelia. How do I solve this?

2

try this

import * as notify from 'notifyjs-browser'
3

Thanks, but it also gives the same error

4

Nobody can answer this? I’ve been “Googling” like crazy trying to find an answer and got nothing so far… but surely this is a very common scenario, right? Someone here must have the answer.

5

Hi,

I got this to work by adding notifyjs-browser using npm, then adding this to the aurelia.json:

          {
            "name": "notifyjs-browser",
            "path": "../node_modules/notifyjs-browser/dist",
            "main": "notify",
            "deps": [
              "jquery"
            ]
          },

Then I had to import from notifyjs-browser where I wanted to use it like this:

import { } from 'notifyjs-browser';

export class App {
 
 notifyButtonClicked() {
    $.notify('This is a notification!');
  }

}

I’m sure there is probably a better/neater way, but it worked for me. Hope it helps.

6

I appreciate the response, but I was confused by your aurelia.json file and then realized it’s for a new build system. I am still using JSPM. I tried simply using import { } from 'notifyjs-browser'; but that doesn’t work. I will either try to get it working with JSPM or perhaps I need to migrate to the Aurelia CLI.

7

I couldn’t get Notify.js to work under a JSPM setup, so I decided to find something else instead. I opted for the aurelia-notification plugin and that’s working fine. I would still love to know what the issue is getting it to work under JSPM, because there are likely to be other libraries with the same problem. So if anyone has the answer, please do share.

8

Did you try just import 'notifyjs-browser'; in the app entry point (main.js/ts usually)?

What’s the error you got?