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
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.
open terminal or cmd and type
Create a project inside the root of asp.net core project with filename ClientApp
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
Go to startup.cs and replace the code with below
spa.UseReactDevelopmentServer(npmScript: "start")configuration.RootPath = "ClientApp/build";
spa.UseVueCli(npmScript: "serve")configuration.RootPath = "ClientApp/dist";
To run your project in production, remember to update your csproj file to following code:
<DistFiles Include=”$(SpaRoot)build\**” />
<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 :)
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.