ember-route-routable-components-shim

Ember.js currently has initial support for Routable Components; available only for the canary version sitting behind a feature flag.

This addon adds exactly the same Routable Component implementation, but supports the release and beta versions.

Installation

ember install ember-route-routable-components-shim

Usage

Create your routable component (instead of a controller). It must be a isGlimmerComponent:

// components/post.js
import Ember from 'ember';

export default Ember.Component.extend({
  isGlimmerComponent: true,
  componentProperty: 'componentValue'
});

{{!-- templates/components/post.hbs --}}
Model property: {{model.modelProperty}}<br/>
Component property: {{componentProperty}}

Create a route that renders your routable component:

// routes/post.js
import Ember from 'ember';

export default Ember.Route.extend({
  renderTemplate() {
    this.render({component: this.routeName}); //or you can explicitly name your component here
  },
  model() {
    return {
      modelProperty: 'modelValue'
    };
  }
});

Add the route to router.js as normal:

// router.js
Router.map(function() {
  this.route('post', { path: '/post' });
});

Visiting /post should now render your routable component.