I’ve been trying to solve an issue for several days without success, and I need your help. My goal is to set up a Multi-Page Application (MPA) using Vue 3 within a classic .NET 8 application. Razor files are used to deliver content to the Vue 3 application, and I need to keep this technology stack intact.
Current Setup
- Default Layout in Vue:
I’m using a default layout component in Vue, which is rendered in the main app component.
<template>
<div class="default-layout">
<main class="default-layout__main-container">
<div class="default-layout__content">
<slot />
</div>
</main>
</div>
</template>
<script setup lang="ts">
import ....
</script>
- Layout.cshtml:
The main layout file correctly renders the Vue app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewData["Title"]</title>
<link rel="stylesheet" href="/client-app/site.css">
</head>
<body>
<div id="app">
@RenderBody()
</div>
<script defer type="module" crossorigin src="/client-app/site.js"></script>
</body>
</html>
- Razor Page:
For a specific endpoint, I want to render a Razor file that includes the following markup:
@model SomeProject.Models.SomeViewModel
@{
ViewData["Title"] = "Pin";
}
<p>hello world</p>
<h1>@ViewData["Title"]</h1>
<some-component />
Issue
The ViewData[“Title”] = “Pin”; works correctly, indicating that the page is being rendered. However, Vue 3 overrides the Razor templates, and the rest of the content (the paragraph, heading, and component) does not appear. It seems that after the default layout is applied, nothing else remains in the DOM.
Question
How can I prevent Vue 3 from overriding my Razor templates and ensure that both the server-rendered content and Vue components are displayed correctly? Any ideas or suggestions are greatly appreciated!
Thank you for your help!