how to integrate ASP.NET Core 2.1 with Vue CLI 3?

Question

I have been trying to create a new project using the new Vue CLI 3 with ASP.Net Core web. I can use dotnet new to create a nice new blank web project, and can use vue create to create a new Vue.js Hello World template but I can't for the life of me get them working together.

Answer 1

It should be pretty straight forward

• Create a new dotnet project
• Create a folder inside dotnet solution. For instance, VueApp, ClientApp, or something.
• Scaffold a new Vue project inside that folder using Vue cli.
• Change the output directory to point to something like "../../wwwroot/dist"
• Build your app. Take note though if you're building for dev or production, output structure will be different.
• In your _Layout.cshtml or Index.cshtml, however you want to organize it, reference those outputted files.
• Add <div id="app"></div> into your .cshtml.
• You're done, enjoy.

Answer 2

I wrote a detailed tutorial available at Medium.

You can use Microsoft Microsoft.AspNetCore.SpaServices NuGet package to specify SpaStaticFiles folder instead of copying client app on build to wwwroot and ignore *.cshtml files and use directly vue index.html file.

You can also install VueCliMiddleware NuGet to run npm process with client app using Vue CLI 3.0 when your .NET app starts.