Skip to content
An Aurelia loader for using any module directly from a view template
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Import any module into Aurelia HTML view templates

This loader lets you <require> any module from an Aurelia view template. This makes it easy to load configuration, localization, or theme data that may not be relevant to your view model. It can also be stacked with other loaders.


First install the loader plugin with jspm.

jspm install npm:aurelia-binding-loader

Then register the plugin with Aurelia.

export function configure(aurelia) {
+   .plugin('aurelia-binding-loader');

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


Import your modules using the <require> and specify the bind loader. Use the as attribute to choose a binding name for the module's exports.

Basic example

In aurelia-view.html:

  <require from="theme!bind"></require>


In theme.js:

export const theme = {
	header: 'header-class'

CSS Modules Example

You can also combine the loader with other loaders. The CSS modules loader processes a CSS file and returns a module with the generated class names. Use the bind loader to make that module available in your Aurelia view.

Install the JSPM CSS Modules loader (here we alias it to the name css-module):

jspm install module=npm:jspm-loader-css-modules

In aurelia-view.html:

  <require from="styles.css!module!bind" as="styles"></require>


Note that in the path we specified the module loader followed by the bind loader. bind will process the result of the earlier loader.

In styles.css:

.shared {
  border-width: 5px;
  border-style: solid;

.first {
  composes: shared;
  border-color: hotpink;

.second {
  composes: shared;
  border-color: cornflowerblue;
You can’t perform that action at this time.