Application startup

createAbpApp builds the injector, installs Vue integration and awaits application initializers. Mount only after it resolves; routes, permissions and localization depend on the initial configuration.

Minimal application

The following files make up the application shell. The example uses the form page from forms and validation and the Identity configuration from extending Users.

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import '@lsw-abpvue/theme-basic/style.css';
import { createAbpApp, loadRuntimeConfig, provideAbpCore, withOptions } from '@lsw-abpvue/core';
import { provideAbpRouter } from '@lsw-abpvue/core/router';
import { provideIdentityConfig } from '@lsw-abpvue/identity/config';
import { provideAbpOAuth } from '@lsw-abpvue/oauth';
import { provideAbpThemeBasic } from '@lsw-abpvue/theme-basic';
import App from './App.vue';
import { routes } from './routes';

const environment = await loadRuntimeConfig();
const { mount } = await createAbpApp(App, {
  providers: [
    provideAbpCore(withOptions({ environment })),
    provideAbpRouter(routes),
    provideAbpOAuth(),
    provideAbpThemeBasic(),
    provideIdentityConfig(),
  ],
});
mount('#app');

App.vue places the current route inside the selected layout:

<template>
  <AbpDynamicLayout :default-layout="LayoutType.application">
    <RouterView />
  </AbpDynamicLayout>
</template>

<script setup lang="ts">
import { AbpDynamicLayout } from '@lsw-abpvue/core/router';
import { LayoutType } from '@lsw-abpvue/core';
import { RouterView } from 'vue-router';
</script>

routes.ts adds the application page and lazy module routes:

import type { RouteRecordRaw } from 'vue-router';
import { lazyRoutes } from '@lsw-abpvue/core/router';
import { identityOptions } from './users-extension';

export const routes: RouteRecordRaw[] = [
  { path: '/', component: () => import('./FormExample.vue') },
  lazyRoutes('/identity', () =>
    import('@lsw-abpvue/identity').then(module => module.createIdentityRoutes(identityOptions)),
  ),
];

provideAbpCore(withOptions({ environment })) supplies configuration and framework services. provideAbpRouter installs routing and guards, provideAbpOAuth supplies the authentication token, and provideAbpThemeBasic supplies the Bootstrap theme, layouts, notifications and error handlers.

Module configuration

Register provideIdentityConfig() from @lsw-abpvue/identity/config at startup. Add lazyRoutes('/identity', ...) to your routes to load its pages. The generated template performs both steps for the selected modules.

For settings, register provideSettingManagementConfig() before provideFeatureManagementConfig() so feature contributions can use the settings tab tree.

Initializers and failures

Use provideAppInitializer for asynchronous startup work. Resolve injected services synchronously before an await. Keep service factories free of requests and DOM effects.

An initial backend failure rejects startup unless an application initialization error handler handles it. The generated template includes an error view with a retry action; retain that behavior when changing startup.