Vue is becoming a very popular front-end framework, but .NET Core 3.1 still doesn’t officially support it. Thanks to VueCliMiddleware, it only takes a couple of steps to get set up.

We will start with an empty ASP.NET Core 3.1 web application template, use the Vue CLI to generate a Vue Client App and then use VueCliMiddleware to bring it all together.

Prerequisites and Versions Used

In a command window, start a new ASP.NET Core web app and move to that web app directory.

dotnet new web -o VueApp
cd VueApp

Use the Vue CLI to create the Client App.

vue create client-app

Add the required NuGet packages and open up the project in VS code.

dotnet add package VueCliMiddleware
dotnet add package Microsoft.AspNetCore.SpaServices.Extensions
code .

Hot Modal Reloading (HMR) will not work in HTTPS with a self-signed certificate, so in launchSettings.json, swap HTTPS and HTTP so it will start as HTTP. This is only for use in a development setting. You can later configure your server to use HTTPS.

Modify startup.cs to use the VueCliMiddleware.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SpaServices;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using VueCliMiddleware;

namespace ToDoApp
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSpaStaticFiles(opt => opt.RootPath = "client-app/dist");
            services.AddControllers();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseSpaStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();

                endpoints.MapToVueCliProxy(
                    "{*path}",
                    new SpaOptions { SourcePath = "client-app" },
                    npmScript: (System.Diagnostics.Debugger.IsAttached) ? "serve" : null,
                    regex: "Compiled successfully",
                    forceKill: true
                    );
            });
        }
    }
}

Press F5 to run the app.

MapToVueCliProxy will start up the Vue Client App using Node and then use a proxy to send unmapped requests to the Vue Client App.

Now, you can enjoy the Vue.

Using an Older Framework?

Check out my blog for the steps to connect .NET Core 2.1 SDK to Vue.

Join the Conversation

  1. Yuriy Kravtsov

11 Comments

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

  1. Nice guide!
    Worked like a charm the other day :)

    Retried it today, and for some reason F5 just diddent start the app :(

      1. Hello again :)

        When you press F5 it runs the setup stated in the launch.json file, how is yours setup? Think my problem is tied to this setup.

        1. Now that I had a go at it again, I got it working. Sorry for the inconvenience!

          And again, thanks for a nice and fast guide :)

  2. This material is amazing, great article. With a few lines, you explain all the necessary to start!