How does EmberJS Addons work?

I saw this EmberJS addon here: ember-sortable - npm.

I’m trying to do something similar, so I want to be able to use it as a plugin, but is that even possible? I tried googling using emberJS addons, but it seems like an addon is kind of like a starting template to which that you want to put in additional functionality, no a plugin that you can use to enhance an already existing project.

Can someone explain this to me? Thanks.

I think of addons as a series of conventions and hooks to allow your code to integrate with other projects via ember cli.

You can do almost anything you want with add ons. There are various hooks that let you do different types of work within different parts of the ember cli process.

Ember CLI has a command

ember new addon my-thing

This will generate a project that looks very similar to an ember cli project but has some conventions for addon development.

Also you can create “in-repo” addons which is just code that lives within a lib folder to you are ember cli project. So you don’t have to worry about publishing if you are experimenting with developing an addon idea custom to your project.

I saw a lot of stuff online about how to create an addon, but what I really want to do is be able to use the ember-sortable addon as a plugin (like a bower component).

So I pretty much want to do something like this:

{{#sortable-group tagName="ul" onChange="reorderItems" as |group|}}
 {{#each model.items as |item|}}
    {{#sortable-item tagName="li" model=item group=group handle=".handle"}}
      <span class="handle">&varr;</span>

(taken from ember-sortable - npm)

Is there a way I can do that? I already have a project – I just want to make ember-sortable to make a component that is sortable in my project.


I am not that familiar with the sortable addon.

But here is how they generally work:

Addon defines an implementation like a component inside the addon folder of the addon project

// addon/components/my-button.js

import Ember from 'ember';
import layout from '../templates/components/my-button';

export default Ember.Component.extend({
  layout: layout

  // implementation details ...

Then the component is imported and re exported in the normal path where the component would live. So inside the addon project you might see something like this

// app/components/my-button.js

import myButton from 'my-addon-project/components/my-button';

export default myButton;

That means that when you use or install the addon inside your own ember cli project it is as if that component were created inside your project. So you can directly use or extend my-button component component.

So to answer your question about sortable. Yes, I think you could do what you want to do. You could define a component that imports and extends the sortable component.

So in theory that should work. Hope this makes sense.

Most of the addons available at can be installed using ember-cli by running ember install addon-name

ember install ember-sortable will make the {{sortable-group}} and {{sortable-item}} components available to your app