How to Installing Plugins in Aurelia?

Aurelia - Interview Questions

Similar to features, you can install 3rd party plugins. The main difference is that a "feature" is provided internally by your application, while a plugin is installed from a 3rd party source through your package manager.

To use a plugin, you first install the package. For example jspm install my-plugin would use jspm to install the my-plugin package. Once the package is installed, you must configure it in your application. Here's some code that shows how that works.

Using a Plugin : ES Next

export function configure(aurelia) {
    aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .plugin('my-plugin', pluginConfiguration);
  
    aurelia.start().then(() => aurelia.setRoot());
  }

Using a Plugin : TypeScript

import {Aurelia} from 'aurelia-framework';
  
  export function configure(aurelia: Aurelia): void {
    aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .plugin('my-plugin', pluginConfiguration);
  
    aurelia.start().then(() => aurelia.setRoot());
  }

Simply provide the same name used during installation to the plugin API. Some plugins may require configuration (see the plugin's documentation for details). If so, pass the configuration object or configuration callback function as the second parameter of the plugin API.

While all plugins work in a similar manner, consider the real-world example of adding and configuring the dialog plugin by using a configuration callback. The configuration parameter in this case is a type of DialogConfiguration and the above code would become:

Using a Plugin : ES Next

export function configure(aurelia) {s
    aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .plugin('aurelia-dialog', config => {
        config.useDefaults();
        config.settings.lock = true;
        config.settings.centerHorizontalOnly = false;
        config.settings.startingZIndex = 5;
        config.settings.keyboard = true;
      });
  
    aurelia.start().then(() => aurelia.setRoot());
  }

Using a Plugin : TypeScript

export function configure(aurelia: Aurelia): void {
    aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .plugin('aurelia-dialog', config => {
        config.useDefaults();
        config.settings.lock = true;
        config.settings.centerHorizontalOnly = false;
        config.settings.startingZIndex = 5;
        config.settings.keyboard = true;
      });
  
      aurelia.start().then(() => aurelia.setRoot());
    }