Packaging and Reusing Aurelia View ViewModel Components

Question

I have a basic widget (widget.js, widget.html and widget.css) that I am using via a template:

<template>
  <require from="./widget"/>
  <widget/> 
</template>

What steps do I need to take to reuse this component across aurelia projects?

I've not made a package before, but my understanding would be to simply commit widget.js, widget.html and widget.css to a github repository, then define a JSPM package for it. I know I can define main="widget.js", but I'm not sure if I can also package the html file. Nor do I know if aurelia can "require" a template from a jspm package.

Answer 1

To reuse components like this you can create an Aurelia plugin. A plugin is basically some re-usable piece that can be a single code-base shared across applications.

You can start your plugin from this skeleton -

https://github.com/aurelia/skeleton-plugin

In a nutshell all you need to do is download the plugin source code and replace the hello-world.js and hello-world.html with your custom code in the src folder.

index.js is where the plugin's configure method is implemented. This is where you will make it available to the consumers. Typically, most plugins use globalizeResources so that you can prevent the consumers from having to require it in every view that it is used, but that is up to you since it's your plugin :)