CODEWITHSUNDEEP
vue.jsasp.net-core-2.1vue-cli-3
bCliks
bCliks

Reputation: 2978

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

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.

Upvotes: 9

Views: 6007

Answers (2)

Libor Pansky
Libor Pansky

Reputation: 161

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.

Upvotes: 16

Danijel
Danijel

Reputation: 1185

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.

Upvotes: 14

Related Questions