Skip to content


Repository files navigation


CI npm version Download Total Ember Observer Score Ember Versions code style: prettier
Dependabot enabled dependencies devDependencies

{{mount}} lazy loading route-less engines.


ember install ember-lazy-mount


{{lazy-mount}} Component

  • name: string — The name of the engine to load
  • model?: any — Optional model that will be passed through to the engine

The {{lazy-mount}} component works just like the {{mount}} helper. It accepts the name of the engine as a positional parameter and also an optional model parameter.

As soon as the helper is rendered, it will begin loading the specified engine. If the engine is already loaded, it will be mounted immediately.

The engineName and model parameters are dynamic and you can update them. Setting a new engineName will cause the new engine to be loaded and mounted.

Inline Usage

While the engine is loading, nothing is rendered. If there was an error loading the engine, nothing is rendered.

{{lazy-mount engineName model=optionalDataForTheEngine}}

You can also pass three optional hooks:

  • onLoad() — Called when the engine starts loading
  • didLoad() — Called when the engine loaded successfully
  • onError(error: Error) — Called when the engine failed to load

Block Usage

While the engine is loading or if there was an error loading the engine, the block that is passed to the component is rendered. The engine block parameter is an object with two properties:

  • isLoading: boolean — Whether or not the engine is currently loading
  • error: Error | null — If there was an error loading the engine

When the engine was loaded successfully, the passed in block is replaced by the engine.

{{#lazy-mount engineName model=optionalDataForTheEngine as |engine|}}
  {{#if engine.isLoading}}
    🕑 The engine is loading...
  {{else if engine.error}}
    😨 There was an error loading the engine:

You can also pass in the same hooks: onLoad, didLoad, onError