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


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!

Join the Conversation

  1. Yuriy Kravtsov


Your email address will not be published. Required fields are marked *

  1. Thank you very much for this very concise and informative post. I was able to test it in a few minute, when it would have taken me days to figure it out by myself!

    If anyone is trying this in a .NET Core 2.2 environment and is having issues with hot module replacement (as I did) : it is a known issue in .NET Core 2.2 and you have to set the hosting model to “Out Of Process” when debugging.
    In Visual Studio, right click your project and click Properties > Debug, you’ll find it at the bottom.
    Or you can directly edit the launchSettings.json : look for the key “ancmHostingModel” and set it to “OutOfProcess”.