ASP.NET Core and Vue.js SPA Architecture: 3 Different Integration Methods

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

Requirements

Tool	Version	Description
.NET SDK	8.0+	For ASP.NET Core applications
Node.js	18+	For IntegratedSpaProxy project
npm/yarn	Latest	For package management

Project Structure

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

---

Method 1: Decoupled Architecture

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

Architecture

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

Loading

Features

• 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

Code Example

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

app.UseCors("AllowAllOrigins");

Running

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.

---

Method 2: Integrated SPA Proxy

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.

Architecture

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

Loading

Features

• 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

Code Example

// 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"
    );
}

Setup

cd IntegratedSpaProxy

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

Running

cd IntegratedSpaProxy
dotnet run

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

---

Method 3: Lightweight CDN Integration (MVC + Vue Lite)

Folder: MvcVueLite/

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

Architecture

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

Loading

Features

• 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

Code Example

<!-- _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.

Running

cd MvcVueLite
dotnet run

---

Comparison Table

Feature	Decoupled	Integrated SPA Proxy	CDN Integration
Complexity	Medium	High	Low
Build Required	Separate	Integrated	None
Hot Reload	Vue side	Yes	No
Deployment	Separate	Single package	Single package
Scalability	High	Medium	Low
SEO	SPA limitations	SPA limitations	Server-side render
Recommended For	Large projects	Medium projects	Small projects

When to Use Which Method?

Decoupled Architecture

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

Integrated SPA Proxy

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

CDN Integration (MVC + Vue Lite)

• 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

License

MIT License - Use freely as you wish.

Contact

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

---

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