# Integrating jQuery plugins with Aurelia

**URL:** <https://discourse.aurelia.io/t/integrating-jquery-plugins-with-aurelia/1177>\
**Category:** Uncategorized\
**Created:** [May 1, 2018, 4:58am UTC](https://discourse.aurelia.io/t/integrating-jquery-plugins-with-aurelia/1177 "2018-05-01T04:58:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![gordon-matt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/gordon-matt/32/752_2.png) [@gordon-matt](https://discourse.aurelia.io/u/gordon-matt)\
**Post date:** [May 1, 2018, 4:58am UTC](https://discourse.aurelia.io/t/integrating-jquery-plugins-with-aurelia/1177/1 "2018-05-01T04:58:14Z")

</div>

How do I use jquery plugins with Aurelia? In particular, I am trying to use [Notify.js](https://notifyjs.jpillora.com/).

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?

---

<div class="post-metadata">

**Author:** ![mabouchalkha](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mabouchalkha/32/47_2.png) [@mabouchalkha](https://discourse.aurelia.io/u/mabouchalkha)\
**Post date:** [May 1, 2018, 9:27am UTC](https://discourse.aurelia.io/t/integrating-jquery-plugins-with-aurelia/1177/2 "2018-05-01T09:27:43Z")

</div>

try this

```auto
import * as notify from 'notifyjs-browser'
```

---

<div class="post-metadata">

**Author:** ![gordon-matt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/gordon-matt/32/752_2.png) [@gordon-matt](https://discourse.aurelia.io/u/gordon-matt)\
**Post date:** [May 1, 2018, 9:43am UTC](https://discourse.aurelia.io/t/integrating-jquery-plugins-with-aurelia/1177/3 "2018-05-01T09:43:58Z")

</div>

Thanks, but it also gives the same error

---

<div class="post-metadata">

**Author:** ![gordon-matt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/gordon-matt/32/752_2.png) [@gordon-matt](https://discourse.aurelia.io/u/gordon-matt)\
**Post date:** [May 1, 2018, 11:34pm UTC](https://discourse.aurelia.io/t/integrating-jquery-plugins-with-aurelia/1177/4 "2018-05-01T23:34:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dnkm](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dnkm/32/594_2.png) [@dnkm](https://discourse.aurelia.io/u/dnkm)\
**Post date:** [May 2, 2018, 10:10am UTC](https://discourse.aurelia.io/t/integrating-jquery-plugins-with-aurelia/1177/5 "2018-05-02T10:10:45Z")

</div>

Hi,

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

```auto
          {
            "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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![gordon-matt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/gordon-matt/32/752_2.png) [@gordon-matt](https://discourse.aurelia.io/u/gordon-matt)\
**Post date:** [May 3, 2018, 1:01am UTC](https://discourse.aurelia.io/t/integrating-jquery-plugins-with-aurelia/1177/6 "2018-05-03T01:01:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![gordon-matt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/gordon-matt/32/752_2.png) [@gordon-matt](https://discourse.aurelia.io/u/gordon-matt)\
**Post date:** [May 3, 2018, 6:47am UTC](https://discourse.aurelia.io/t/integrating-jquery-plugins-with-aurelia/1177/7 "2018-05-03T06:47:55Z")

</div>

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](https://github.com/SpoonX/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.

---

<div class="post-metadata">

**Author:** ![Kukks](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/kukks/32/361_2.png) [@Kukks](https://discourse.aurelia.io/u/Kukks)\
**Post date:** [May 3, 2018, 6:52am UTC](https://discourse.aurelia.io/t/integrating-jquery-plugins-with-aurelia/1177/8 "2018-05-03T06:52:05Z")

</div>

> [@dnkm](#):
>
> import { } from ‘notifyjs-browser’;

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

What’s the error you got?