This repository contains sample projects from my YouTube video "ASP.NET Core and Vue.js SPA Architecture: 3 Different Integration Methods".

🎬 Video Link: YouTube Video

🇹🇷 Türkçe README: README.tr.md

├── DecoupledArchitecture/ # Method 1: Decoupled Architecture ├── IntegratedSpaProxy/ # Method 2: Integrated SPA Proxy └── MvcVueLite/ # Method 3: Lightweight CDN Integration 

Folder: DecoupledArchitecture/

In this approach, ASP.NET Core runs purely as an API backend. The Vue.js application is developed as a completely separate project and hosted on a different server (e.g., Vite dev server or Nginx).

flowchart LR subgraph Frontend["Vue.js (Port 5173)"] VueApp[Vue Application] end subgraph Backend["ASP.NET Core (Port 5000)"] API[REST API] CORS[CORS Middleware] end VueApp -->|HTTP Request| CORS CORS --> API API -->|JSON Response| VueApp 

• CORS Configuration: Allows requests from different origins
• API-First Approach: Backend is designed entirely as a REST API
• Independent Deployment: Frontend and backend can be deployed separately
• Scalability: Both sides can be scaled independently

// Program.cs - CORS Configuration builder.Services.AddCors(options => { options.AddPolicy("AllowAllOrigins", builder => { builder.AllowAnyOrigin() .AllowAnyHeader() .AllowAnyMethod(); }); }); app.UseCors("AllowAllOrigins");

cd DecoupledArchitecture dotnet run

Backend runs at https://localhost:5001 by default. Start your Vue.js application in a separate terminal and send requests to the API.

Folder: IntegratedSpaProxy/

In this approach, the Vue.js application resides within the ASP.NET Core project. During development, VueCliMiddleware is used to proxy requests to the Vue dev server. In production, compiled Vue files are served statically.

flowchart TB subgraph Development["Development Mode"] Browser1[Browser] -->|/spa/*| AspNet1[ASP.NET Core] AspNet1 -->|Proxy| ViteDev[Vite Dev Server :5173] ViteDev -->|HMR| Browser1 end subgraph Production["Production Mode"] Browser2[Browser] -->|/spa/*| AspNet2[ASP.NET Core] AspNet2 -->|Static Files| Dist[clientapp/dist] end 

• VueCliMiddleware: Vite/Vue CLI dev server integration
• Hot Module Replacement: Instant updates during development
• Single Project Management: Frontend and backend in one solution
• Automatic Build: npm build runs automatically during publish

// Program.cs - SPA Proxy Configuration builder.Services.AddSpaStaticFiles(configuration => { configuration.RootPath = "clientapp/dist"; }); // Proxy to Vue dev server in development if (app.Environment.IsDevelopment()) { app.MapToVueCliProxy( "/spa/{*path}", new SpaOptions { SourcePath = "clientapp" }, port: 5173, runner: ScriptRunnerType.Yarn, npmScript: "dev" ); }

cd IntegratedSpaProxy # Create Vue.js project npm create vue@latest clientapp cd clientapp npm install

cd IntegratedSpaProxy dotnet run

Access the Vue application at https://localhost:5001/spa.

Folder: MvcVueLite/

The simplest integration method. Vue.js is loaded via CDN and used directly within Razor Views. No build system required.

flowchart LR Browser[Browser] --> AspNet[ASP.NET Core MVC] AspNet --> Razor[Razor View] Razor --> VueCDN[Vue.js CDN] VueCDN --> VueApp[Vue Instance] 

• No Build Required: npm/Node.js installation not mandatory
• Rapid Prototyping: Get started instantly
• Razor Integration: Server-side and client-side together
• Ideal for Small Projects: Simple interactive components

<!-- _Layout.cshtml - Vue.js CDN --> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- Index.cshtml - Vue Usage --> <div id="app"> {{ message }} <button @@click="clickHandler">Click me</button> </div> <script> const { createApp, ref } = Vue; createApp({ setup() { const message = ref("Hello vue!"); function clickHandler() { message.value = "Hello vue! (clicked)"; } return { message, clickHandler }; }, }).mount("#app"); </script>

Note: Since @ has special meaning in Razor, Vue's @click directive must be written as @@click.

cd MvcVueLite dotnet run

• Large-scale enterprise applications
• Projects with separate frontend/backend teams
• Microservices architecture
• Independent scaling requirements

• Medium-scale full-stack projects
• Single developer or small team
• Fast development cycle
• Single deployment package needed

• Adding interactivity to existing MVC projects
• Simple forms and UI components
• Prototyping and POC work
• When you don't want to set up a build system

MIT License - Use freely as you wish.

For questions, reach out via my YouTube channel or GitHub Issues.

⭐ If this repo helped you, don't forget to star it!