Migrating ASP .NET MVC to Vue JS 3 with TypeScript

Transitioning an existing ASP .NET MVC application to Vue JS 3 with TypeScript can be streamlined by converting one page at a time. This comprehensive guide walks you through the process, ensuring a smooth migration.

Required Software

• .NET (any version)
• Node JS (>= v24.11.0)
• Preferred IDE (e.g., Visual Studio, Rider, VS Code)

Step 1: Set Up the MVC Application

Begin by creating a new solution and MVC project:

dotnet new sln -n Migration
dotnet new mvc -o MvcToVue
dotnet sln add MvcToVue/MvcToVue.csproj

Open the project in your IDE, build, and run it to ensure everything is working correctly. Focus on migrating the Privacy page.

Step 2: Create the Vue Application

Inside the MvcToVue folder, create a new Vue application using Vite:

npm create vite VueApp --template vue-ts

Ensure you choose Vue with TypeScript. Create a Privacy.vue component in the src/pages/ directory with the necessary template, script, and styles.

Step 3: Build the Vue Application

Modify vite.config.ts to output the build to the MVC's wwwroot folder:

build: {
    outDir: '../wwwroot/dist',
    emptyOutDir: true,
    manifest: true,
}

Create an entry point for the Privacy page in src/entries/Privacy.ts and update the Vite configuration:

rolldownOptions: {
    input: {
        privacy: path.resolve(__dirname, 'src/entries/Privacy.ts')
    },
}

Execute npm run build to generate the assets.

Step 4: Integrate Vue with the MVC Application

Add a helper class in the MVC project to retrieve file names from the manifest:

public class ViteHelper {
    // Helper methods to access manifest...
}

Register this service as a singleton. Update Privacy.cshtml to include the Vue component:

@section Scripts {
    <link rel="stylesheet" href="@ViteHelper.GetCss('src/entries/Privacy.ts')" />
}
<script src="@ViteHelper.GetFile('src/entries/Privacy.ts')"></script>

Next Steps

1. Cleanup: Remove unnecessary files from the Vue app.
2. Add Components: Expand the Vue components used in your application.
3. Convert More Pages: Gradually migrate other pages to Vue.
4. Data Handling: Use APIs or pass data via props as needed.
5. Full SPA Transition: Eventually, use Vue Router for a complete SPA setup.