Integrating Vue.js with ASP.NET Core: A Step-by-Step Guide

Background: Previously front‑end was rendered on the server, but with Node and modern front‑end toolchains developers now rebuild front‑ends using frameworks like Vue.

Requirements: .NET Core 2.0+, Node, webpack, vue‑cli, Visual Studio 2017/VS Code.

Initialize .NET Core project: Create a new ASP.NET Core project named DotnetCoreWithVue and select the API template (optionally enable Docker).

Initialize Vue project with vue‑cli: Run vue init webpack , choose Vue router and ESLint, then install dependencies with npm install and verify with npm run dev .

Synchronous build (frontend + backend): Edit the .csproj file to add a that runs npm install and npm run build before the build, then rebuild the solution.

Modify webpack output path: Change config/index.js to output static files to the ASP.NET Core wwwroot folder.

Frontend‑backend interaction: Update the API controller to return sample data, and modify HelloWorld.vue to request api/values using the provided request (axios) helper.

Summary: The article demonstrates how to integrate Vue (full‑stack “full‑family” bundle) into a .NET Core project, enabling one‑click compilation of both front‑end and back‑end code.