Aurelia - Plugins

When you start building your app, most of the time you will want to use some additional plugins. This tutorial will explain how to use plugins in Aurelia framework.

Standard Plugins

In our last chapter we showed you how to use default configuration in Aurelia framework. If you are using default configuration, standard set of plugins will be available.

Standard Plugins

• defaultBindingLanguage() − This plugin that offers an easy way to connect view-model with view. You already saw one way data-binding syntax (${someValue}). Even though you could use some other binding language, it is recommended practice to use default binding language.
• defaultResources() − Default resourses gives us some primitive constructs like if, repeat, compose etc. You can even build these constructs on your own, but since they are so commonly used, Aurelia already created it inside this library.
• Router() − Most of the applications use some kind of routing. That is why Router is a part of the standard plugins. You can check more about routing in one of our next chapters.
• History() − History plugin is usually used together with router.
• eventAggregator() − This plugin is used for cross component communication. It handles publishing and subscribing to messages or channels inside your app.

Official Plugins

These plugins aren't part of the default configuration but are frequently used.

Official Plugins

• fetch() − Fetch plugin is used for handling HTTP requests. You can use some other AJAX library if you want.
• animatorCSS() − This plugin offers a way of handling CSS animations.
• animator-velocity() − Instead of CSS animations you can use Velocity animation library. This plugins enables to use Velocity inside Aurelia apps.
• dialog() − Dialog plugin offers highly customizable modal window.
• i18n() − This is the plugin for internalization and localization.
• ui-virtualization() − Virtualization is useful library for handling large performance heavy UI tasks.
• validation() − Use this plugin when you need to validate your data.

All plugins explained above are officially maintained by the Aurelia Core Team at the moment of writing this tutorial. There will be some other useful plugins added in the future. Example below is showing how to configure your app to use plugins.

Installing Plugins

If, for example, we want to use animator-css and animator-velocity, we need to install it first.

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-css

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-velocity

In our last chapter we showed you how to use manual configuration. We can add our plugins in main.js file.

main.js

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator()
   .plugin('aurelia-animatorCSS')
   .plugin('aurelia-animator-velocity')

   aurelia.start().then(() => aurelia.setRoot());
}