Skip to content
Abp Vue

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_AUTHORITY_URL=https://localhost:44312
          NUXT_CLIENT_ID=Abp_Vue
          NUXT_CLIENT_SECRET=1q2w3e*
          NUXT_SCOPE=openid profile email Abp
          NUXT_REDIRECT_URI=api/auth/callback/openiddict
          NUXT_POST_LOGOUT_REDIRECT_URI=api/auth/signout/callback
          NUXT_ORIGIN=http://localhost:3000
          NUXT_SESSION_SECRET=p66u6g46N/pFYYTFOTWyA3AqVvbyb0+i6LBg6bTOOMVeOP4=
          NUXT_ABP_API_ENDPOINT=https://localhost:44388/api
  • 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