JQueryUI at Ember upgrade

Question

After upgrade and dismissing Bower as recommended: Is there a way to include JQueryUI into an Ember project without using Bower? My project depends heavily of JQueryUI dialogs.

$ ember -v
ember-cli: 3.3.0  
node: 8.11.3  
os: linux x64  

Do I have to reintroduce Bower into my project? Like in this old Using jquery in Ember-cli advice?

Answer 1

does this solve your use case?:

ember install ember-auto-import
npm install jquery-ui

and then wherever you need to use it:

import { stuff } from 'jquery-ui';

Answer 2

Including external js through npm package is always suggested. Above answer shows how to do it.

Sometime the developer won't maintain the package. In that case, you have to include it manually to get the latest js for your app.

If you want to include it manually (not depending on the npm package), here is the way to add external js in your application

1) Download the latest stable jquery-ui from their official site.

2) Extract it. Include jquery-ui.js file in your app/vendor/jquery-ui.js

(Where vendor is the home for external js)

3) Once added import the js in ember-cli-build.js file

app.import('vendor/jquery-ui.js');

4) Restart the ember app.

Answer 3

I was able to get it to work by adding "jquery-ui": "^1.13.2", to my package.json file.

Inside ember-cli-build.js I added the following

  // jQuery UI
  app.import({
    development: 'node_modules/jquery-ui/dist/jquery-ui.js',
    production: 'node_modules/jquery-ui/dist/jquery-ui.min.js',
  });

  // jQuery UI CSS
  app.import({
    development: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.css',
    production: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.min.css',
  });