Using Views From Different Locations in Aurelia

While the default Aurelia convention of a view model looks for a matching HTML file in the same directory is what you want a lot of the time, sometimes you might want to load views from a centralised location like a views directory or ask the server to render you some HTML.

In an application recently some components which have a bit of user-focused data in them populated by the server had to be implemented. I could have duplicated them, but it seemed to be a waste of code when I could render the Razor partials in my Aurelia application instead.

There are two approaches to make Aurelia load views in your app from a different location. You can use ViewLocator and override the prototype method convertOriginToViewUrl to force all views to be loaded from somewhere else or you can override on a per-model basis.

In my instance I only wanted specific view models to get views elsewhere, not all views. I will detail both ways, honestly there is not a lot to read or know, but the Aurelia documentation is hard to search and confusing, so hopefully this helps.

For all examples outlined below, please note all views need to be wrapped in