Search code examples
vue.jsasp.net-core-2.1vue-cli-3

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.


Solution

  • 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.