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
config.plugins.delete('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)
{
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
// 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())
{
app.UseDeveloperExceptionPage();
// Use HMR
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true,
ConfigFile = Path.Combine(env.ContentRootPath, @"node_modules\@vue\cli-service\webpack.config.js")
});
}
else
{
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
app.MapWhen(x => !x.Request.Path.Value.StartsWith("/api"), builder =>
{
builder.UseMvc(routes =>
{
routes.MapSpaFallbackRoute(
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
<template>
<div>
{{ info }}
</div>
</template>
<script>
// @ is an alias to /src
import axios from 'axios';
export default {
data () {
return {
info: null
}
},
mounted () {
axios
.get('api/values')
.then(response => (this.info = response))
}
}
</script>
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
