Modernizing Classic ASP.NET MVC with Vue.js

Introduction Many companies still rely on traditional ASP.NET MVC applications that have matured over time. However, with the need for richer user experiences, it's important to consider modern frontend technologies like Vue.js. This report explores how Vue.js can be integrated into an ASP.NET MVC (non-Core) application, highlighting practical approaches and relevant tooling support such as Webpack.

Tooling Considerations

• Webpack: Essential for compiling Vue SFCs, transpiling ES6+, and bundling assets.
• npm: Use to manage Vue and related libraries.
• ASP.NET Bundling (BundleConfig.cs): Can reference the output files from Webpack for consistency across environments.
• Hot Module Replacement (HMR): Enabled during local development for instant UI feedback.
• Environment Variables: You can bridge backend variables (like API URLs) with Vue using templated Razor variables or config files.

Challenges

• Routing Conflicts: When mixing client-side routing with MVC routes.
• Asset Pipeline Duplication: Managing both NuGet (for backend) and npm (for frontend).
• Developer Onboarding: May require backend developers to learn modern JS tooling.

Ideal Approches on VueJS integration

Approach 1: Embedding Vue in Razor Views (Widget-Based Enhancements)

For small enhancements or interactive UI components:

1. Add Vue via CDN in _Layout.cshtml:

   <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
   

2. Create inline Vue component inside .cshtml:

   <div id="greeting">
     Hello, {{ name }}!
   </div>
   <script>
     Vue.createApp({
       data() {
         return {
           name: '@ViewBag.UserName'
         };
       }
     }).mount('#greeting');
   </script>
   

This method is ideal for adding interactivity without complex tooling.

Approach 2: Vue with Build Tools (Webpack or Vite)

To integrate more sophisticated components:

1. Create a Vue project in ClientApp/:

   npm init vue@latest
   cd ClientApp
   npm install
   npm run build
   

2. Output assets to a public directory (wwwroot/js/).
3. Include generated JS/CSS in Razor view:

   <script src="~/js/app.js"></script>
   <link href="~/js/style.css" rel="stylesheet">
   

More in-depth:

1. Vue with Webpack + Bundling
   • Use a webpack.config.js to compile .vue files and output them to the Scripts or dist folder.
   • Integrate with ASP.NET's BundleConfig.cs to manage generated JS bundles.
   • This setup provides hot-reloading during development and minified output for production.

   // Example webpack.config.js
   const path = require('path');
   module.exports = {
     entry: './src/main.js',
     output: {
       path: path.resolve(__dirname, 'wwwroot/dist'),
       filename: 'bundle.js'
     },
     module: {
       rules: [
         { test: /\.vue$/, loader: 'vue-loader' },
         { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
       ]
     },
     resolve: {
       alias: { 'vue$': 'vue/dist/vue.esm.js' },
       extensions: ['*', '.js', '.vue', '.json']
     }
   };
   

This setup allows full use of Vue SFCs (Single File Components) while maintaining ASP.NET MVC routing.

Approach 3: Serve Vue as a SPA Shell in MVC

You can let ASP.NET MVC serve only a single entry point (e.g., Home/Index), and Vue handles routing and rendering:

1. Create SPA and build it
2. Use Index.cshtml to serve app shell:

   <div id="app"></div>
   <script src="~/dist/app.js"></script>
   

This is ideal for teams transitioning from MVC to full SPAs gradually.

Considerations

• Routing Conflicts: Ensure Vue and MVC don’t fight over URLs. Use history mode cautiously.
• Auth & State: Reuse ASP.NET session/cookie-based auth within Vue via AJAX.
• Tooling: Optional to add Webpack or Vite depending on scope.

Conclusion Integrating Vue.js into classic ASP.NET MVC apps enables modern UX features and more maintainable frontends without abandoning existing server-side logic. Whether you're enhancing specific components or planning a full frontend upgrade, Vue offers a scalable path toward modernization.

Author’s note: This is also part of my research wherein I can try to help the Voky team migrate to using modern JS frameworks from the old JQuery , and I am currently discussing with one of the devs on how to incrementally do this while the rest of the team take on more priority tasks 🍍.

Resources (pasting these here for reference with the other devs)

• Vue.js: https://vuejs.org/
• Webpack: https://webpack.js.org/
• Vue Loader: https://vue-loader.vuejs.org/
• ASP.NET MVC Bundling: https://learn.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification
• Example Repo: https://github.com/mikoskinen/aspnetmvc-vue