Skip to content

Quick tutorial

Welcome to ABP Vue. This tutorial serves as a quick-start guide for configuring the development setup of an ABP Vue UI application in three simple steps.

  • Step 1
    • Clone the repo in your local clone and run cd AbpVue && pnpm install
  • Step 2
    • Configure environment variables. First, create .env file in root directory and add the following environment variables
      NUXT_SCOPE=openid profile email Abp
  • Step 3
    • pnpm dev localhost:3000
    • In the Chrome browser, you may encounter an SSL error; however, this is expected as it pertains to a local development certificate, which is trustworthy for local development purposes.

Note: If above steps goes well you see the landing page

alt text

Install the Abp Vue template via dotnet cli

Terminal window
dotnet new install Sajan.Abp.Vue.Template

alt text

Creating a new project

Terminal window
dotnet new abp-vue -o abp-ui

Running the project

Terminal window
cd abp-ui
  • Follow step 2 from the above tutorial to configure environments.
  • Install dependencies pnpm install
  • Run the project pnpm dev

Login flow

Abp vue login functionality works via open id protocol. For this tutorial,we have configured client_id and client_secret already in the abp backend.

Upon reaching the login screen, proceed by clicking on the login button, which will redirect you to our ABP Framework backend authentication server. There, you will be prompted to enter the default credentials in order to successfully authenticate and access the system.

alt text

Following successful authentication, you will be automatically redirected to the ABP Vue UI admin page.

alt text

Congratulations! Your local setup has been successfully configured.

Additional commands

In the package.json file, you will find a list of commands that can be used to run the application.

  • pnpm dev - Run the application in development mode
  • pnpm build - Build the application for production
  • pnpm generate - Generate static files for the application
  • pnpm lint - Lint the application
  • pnpm preview - Run the application preview mode
  • pnpm generate:apiabp - Generate api services from abp backend (Mostly used for development purpose and typings)
  • pnmp lint:fix - Fix linting issues
  • pnpm lint:ts - Lint typescript files
  • pnpm lint:check - Check linting issues