The Easiest Way to Build a SPA with ASP.NET Core and Vue Cli 3

WEI CHENG
WEI CHENG
Jan 10 · 2 min read

I went through suffering searching for how to build a SPA with ASP.NET Core and Vue, there has a template which you could install with the command dotnet new vuejs , but it is far outdated (webpack 2 seriously?) which there is no reason we still use it and Vue Cli 3 is amazing.

So, before we get started, make sure you have all these tools:

vue-cli 3 (we‘ll use vue ui for this project), ASP.NET Core 2.1

Step 1:

Start an Asp.Net Core project with React (we’re going to use this official template to start our project), after you create it you will see a folder structure like below. Now, delete ClientApp because we’re not using it.

Step 2:

open terminal or cmd and type vue ui

Create a project inside the root of asp.net core project with filename ClientApp

Step 3:

Open NuGet and install a package called VueCliMiddleware, there is a problem with spa related packages, which will have some issues when upgrading to v2.2.0, so all you have to do is stay with v2.1.1, and same as those installed NuGet(SpaServices.Extensions and Razor.Design) which also must be v2.1.1

Step 4:

Go to startup.cs and replace the code with below

spa.UseReactDevelopmentServer(npmScript: "start")configuration.RootPath = "ClientApp/build";

To

spa.UseVueCli(npmScript: "serve")configuration.RootPath = "ClientApp/dist";

Step 5:

To run your project in production, remember to update your csproj file to following code:

<DistFiles Include=”$(SpaRoot)build\**” />

to

<DistFiles Include=”$(SpaRoot)dist\**” />

Now everything is done. Try CTRL + F5 you will see your website.

I had uploaded the template to GitHub, feel free to download it and play :)

Testing:

You Could test your API controller with the SampleData controller. Which will be

your url + ‘/api/SampleData/WeatherForecasts’

Way to access your API from Vue?

You could use Axios which is my favorite HTTP client library.

axios.get('/api/SampleData/WeatherForecasts')

WEI CHENG

Written by

WEI CHENG

Happiness is when your code runs without error.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade