Quickly Configure ASP.NET Core API to work with Vue CLI 3!

,

Use Vue CLI 3 with all the functionality of ASP.NET Core.

In this tutorial, we will use the .NET WebAPI template to generate an API back-end and Vue CLI 3 to create the front-end and get them to work together.

Here is a link to my working version on GitHub https://github.com/ykravtsov/vue_app.

Prerequisites

Let’s Get Coding

  • Install the Vue CLI if you haven’t done so already
  • We’re going to set up the .NET webAPI template for the API back-end and the Vue CLI template for the front-end
    • Open a console and run these commands:

  • Choose the merge option and follow the prompt for setting up Vue
  • Install two node libraries needed for the ASP Hot Modal Reloading (HMR) then open the project in VS Code
    • Note: choose npm or Yarn to install the two node libraries needed for ASP HMR

Since we are going to be using the ASP.NET HMR, we’re going to redirect Vue to output to wwwroot and not run its version of HMR.

  • Start by creating a file in the root directory named vue.config.js and add this content:

  • We are going to configure the ASP HMR
    • replace the code in Startup.cs with this:

Now, let’s go through what we just pasted into Setup.

The code below sets up ASP HMR and points to the webpack file that Vue CLI 3 generates.

This enables serving static files:

This tells the router to use the MVC controller if it exists:

This last part will send all the other routes that weren’t matched by MVC to our SPA unless it starts with /api, in which case we want to throw a 404 error.

  • Crate HomeController.cs in the Controllers folder and add this content:

We are ready to test it!

  • Hit F5 to fire up the app.

Now we can build our Vue app with an ASP.NET Core API!

Share this story