Aurelia view manager mainly allows one to configure the location of a custom element's view. Aurelia view manager is therefore a configuration plugin combined with some logic for fetching the correct view based on those configurations.

Configuration is done using the Config of aurelia-view-manager. It exposes several methods. All these methods do not overwrite, but merge the config object passed with the existing configurations.


A config object has two special property names location, map and view. The location property contains the information necessary to render the path. The view property should not be used in the configuration object. It represents the value passed to the resolve method. You can read more about the resolve method in the usage section.


Do not define the view in your configuration object. It's a dynamic value which is the value passed as second argument in the resolvedView decorator, and in the resolve method on the ViewManager class. e.g.

@resolvedView('my/namespace', 'checkbox')
class CheckBox {...}

In this case the value of view would be checkbox.


Location allows you to define the actual path of the view. The default location property is {{framework}}{{view}}.html. With the default configurations we would get the following path when resolving a view.

  viewManager.resolve('my/component', 'datepicker') === 'bootstrap/datepicker.html' // => true

You might notice bootstrap. We at spoonx have chosen this default which can be overwritten easily. Read more about how to do that in the defaults section.


The map property is handy for when you want to define a path for a specific view. An example of when this might be handy is when overwritting specific elements. View manager will check if a component has a specific path defined. If not it will use the location property of the namespace. e.g.

config.configureNamespace('spoonx/form', {

  // most of the components are defined here
  location: 'components/form/{{view}}.html',

  // our confirm element is defined somewhere different.
  map: {
    confirm: 'component/custom/confirm.html'


When resolving the spoonx/form's confirm view it will try and load the component/custom/confirm.html template


The Config class of aurelia-view-manager gives you several methods to configure defaults, a single namespace or multiple namespaces.

It might be handy to know that the default configurations are defined on the defaults namespace.


Altering your defaults allows you to determine your own convention.

config is an injected instance of the Config class

    location: 'my/new/location/{{view}}.html'

configureNamespace(name, configs = {map: {}})

Same as the above but instead you can give the name of the namespace you want configure.

  config.configureNamespace('spoonx/autocomplete', {
    location: 'components/{{framework}}/autocomplete.html'


    'spoonx/autocomplete': {
      location: 'components/{{framework}}/autocomplete.html'


The location property uses a mustache looking string to define the path of components.

The view property is dynamic and when following convention it should have the same name as the component.

The default configurations are defined on the defaults namespace.

When a namespace is not, or partially configured, it defaults to the default values.

results matching ""

    No results matching ""