Here is a quick walk through on creating a project that contains both a dot net core web api as well as a vue.js front end.

To get started we enter the following command line

dotnet new webapi -o vue_and_dotnet

this will create a simple net core web api project

next we will use the vue cli to create the vue app

vue create vue_and_dotnet

the vue cli will warn that the directory already exists. Choose the merge option.

Then select the features you would like in your Vue application such as Vue Router , Vuex, Linter, Unit Testing, etc

Once all features are selected the vue cli will create a simple vue app to get started.

To support hot module reloading (HMR) we need to install the following two modules

navivgate to the vie_and_dotnet folder and run the following command line

npm install -D aspnet-webpack webpack-hot-middleware

next we need to configure Vue to stop using its HMR and to redirect its output to the wwwroot folder

to do this we create the following vue.config.js file

module.exports = {
    outputDir: 'wwwroot',
    baseUrl: "/",
    chainWebpack: config => {
        // remove hmr plugin, we will use ASP.NET HMR

next we need to modify startup.cs as follows

using System;
using System.IO;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using Microsoft.AspNetCore.SpaServices.Webpack;

namespace vue_and_dotnet
    public class Startup
        public Startup(IConfiguration configuration)
            Configuration = configuration;

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            if (env.IsDevelopment())

                // Use HMR
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                    HotModuleReplacement = true,
                    ConfigFile = Path.Combine(env.ContentRootPath, @"node_modules\@vue\cli-service\webpack.config.js")



            app.UseMvc(routes =>
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}");
            app.MapWhen(x => !x.Request.Path.Value.StartsWith("/api"), builder =>
                builder.UseMvc(routes =>
                        name: "spa-fallback",
                        defaults: new { controller = "Home", action = "Index" });

thats all there is.  You can start debugging and after a little while the browser should start and show the vue js app.

but now lets see if we can call the web api. In order to do that we will install axios first as follows

npm install axios --save

now lets add a view called Values.vue with the following content

    {{ info }}

// @ is an alias to /src
import axios from 'axios';

export default {
  data () {
    return {
      info: null
  mounted () {    
      .then(response => ( = response))


then we will need to add a route as follows

      path: '/values',
      name: 'values',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/Values.vue')

and lat but not least a router link

<router-link to="/values">Values</router-link>

when navigating to the values page it will call the web api endpoint and show the information on the page

Michael Salzlechner is the CEO of StarZen Technologies, Inc.

He was part of the Windows Team at Data Access Worldwide that created the DataFlex for Windows Product before joining StarZen Technologies. StarZen Technologies provides consulting services as well as custom Application development and third party products