Getting Started - adarshpastakia/aurelia-ui-framework GitHub Wiki

src/main.ts
...
import {UIConfig} from "aurelia-ui-framework";

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-validation')
    .plugin('aurelia-ui-virtualization')
    .plugin('aurelia-ui-framework', (config: UIConfig) => {
      config
        .title('App Title')
        .subtitle('App Statement')
        .version('0.0.1')

        // Key prefix for local and session storage
        .appKey('AUAPP')

        // Append basic authorization header when <UIApplication>.AuthUser and <UIApplication>.AuthToken available
        .sendAuthHeader(true)
        // Extra headers to be appended on every call
        .apiHeaders({ name: value }),
        // Base url fetch http client
        .apiUrl('https://api.domain.com/api');

      if (environment.debug)
        config.apiUrl('https://api-staging.domain.com/api');
    })
    .feature('resources');

  ...
}
src/app.html
<ui-viewport appready.trigger="fn($event)">
  <ui-app-header>
    <!-- Menu Drawer Toggle -->
    <ui-drawer-toggle drawer.bind="menuDrawer"></ui-drawer-toggle>

    <!-- App Header Title -->
    <ui-app-title src="app logo" class="">
      <h6>
        <span>${app.constants.Title}</span>
        <small>${app.constants.Subtitle}</small>
      </h6>
      <ui-filler></ui-filler>

      <!-- Header right-side options -->
    </ui-app-title>
  </ui-app-header>

  <!-- Side Menu Drawer -->
  <ui-drawer ref="menuDrawer"></ui-drawer>

  <!-- Aurelia Route Container -->
  <ui-router-view></ui-router-view>

  <!-- App Footer -->
  <ui-app-footer>
    <small>Version ${app.constants.Version}</small>
    <small>Copyright ©</small>
  </ui-app-footer>
</ui-viewport>
src/app.ts
import {autoinject} from "aurelia-framework";
import {Router} from "aurelia-router";
import {UIApplication, AuthInterceptor} from "aurelia-ui-framework";

@autoinject()
export class App {
  router: Router;
  configureRouter(config, router: Router) {
    this.router = router;
    config.title = this.app.constants.Title;
    config.addPipelineStep('authorize', AuthInterceptor);
    config.map([]);
  }

  constructor(public app:UIApplication) { }
}
⚠️ **GitHub.com Fallback** ⚠️