[{"data":1,"prerenderedAt":1205},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fmodernizing-classic-aspnet-mvc-with-vuejs":142,"\u002Fblog\u002Fmodernizing-classic-aspnet-mvc-with-vuejs-surround":1201},[4],{"title":5,"path":6,"stem":7,"children":8,"page":141},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137],{"title":10,"path":11,"stem":12},"VueJS Introducing Dynamic Layouts using the Atomic Design Principles","\u002Fblog\u002Fvuejs-introducing-dynamic-layouts-using-the-atomic-design-principles","blog\u002F001.vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles",{"title":14,"path":15,"stem":16},"Understanding JavaScript and Its Quirks","\u002Fblog\u002Funderstanding-javascript-and-its-quirks","blog\u002F002.understanding-javascript-and-its-quirks",{"title":18,"path":19,"stem":20},"Introducing Vue’s latest experimental Vapor Mode","\u002Fblog\u002Fintroducing-vues-latest-experimental-vapor-mode","blog\u002F003.introducing-vues-latest-experimental-vapor-mode",{"title":22,"path":23,"stem":24},"ECMAScript 2024 Nears Finalization","\u002Fblog\u002Fecmascript-2024-nears-finalization","blog\u002F004.ecmascript-2024-nears-finalization",{"title":26,"path":27,"stem":28},"UI Libraries for VueJS: Vuetify, Tailwind, and PrimeVue","\u002Fblog\u002Fui-libraries-for-vuejs-vuetify-tailwind-and-primevue","blog\u002F005.ui-libraries-for-vuejs-vuetify-tailwind-and-primevue",{"title":30,"path":31,"stem":32},"Micro Frontend Architecture","\u002Fblog\u002Fmicro-frontend-architecture","blog\u002F006.micro-frontend-architecture",{"title":34,"path":35,"stem":36},"Pre-rendering and Hydration in Vue.js","\u002Fblog\u002Fpre-rendering-and-hydration-in-vuejs","blog\u002F007.pre-rendering-and-hydration-in-vuejs",{"title":38,"path":39,"stem":40},"Satori by Vercel — Dynamic Image Generation in JavaScript","\u002Fblog\u002Fsatori-by-vercel-dynamic-image-generation-in-javascript","blog\u002F008.satori-by-vercel-dynamic-image-generation-in-javascript",{"title":42,"path":43,"stem":44},"Vue.js and Progressive Web Apps (PWA) – Enhancing Web Experiences","\u002Fblog\u002Fvuejs-and-progressive-web-apps-pwa-enhancing-web-experiences","blog\u002F009.vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences",{"title":46,"path":47,"stem":48},"Moving from a Traditional Node.js CRUD API to Serverless Architecture—A Deep Dive","\u002Fblog\u002Fmoving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive","blog\u002F010.moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive",{"title":50,"path":51,"stem":52},"Nuxt 3 and Serverless Edge Functions—Unlocking Performance and Scalability","\u002Fblog\u002Fnuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability","blog\u002F011.nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability",{"title":54,"path":55,"stem":56},"A Tribute to Asa Bain: Thank You for Everything","\u002Fblog\u002Fa-tribute-to-asa-bain-thank-you-for-everything","blog\u002F012.a-tribute-to-asa-bain-thank-you-for-everything",{"title":58,"path":59,"stem":60},"Migrating JavaScript to TypeScript in ASP.NET MVC Projects","\u002Fblog\u002Fmigrating-javascript-to-typescript-in-aspnet-mvc-projects","blog\u002F013.migrating-javascript-to-typescript-in-aspnet-mvc-projects",{"title":62,"path":63,"stem":64},"Modernizing Classic ASP.NET MVC with Vue.js","\u002Fblog\u002Fmodernizing-classic-aspnet-mvc-with-vuejs","blog\u002F014.modernizing-classic-aspnet-mvc-with-vuejs",{"title":66,"path":67,"stem":68},"Which UI JavaScript Framework Should You Use?","\u002Fblog\u002Fwhich-ui-javascript-framework-should-you-use","blog\u002F015.which-ui-javascript-framework-should-you-use",{"title":70,"path":71,"stem":72},"Vue + AI Integration Workflows: Enhancing Developer Productivity","\u002Fblog\u002Fvue-ai-integration-workflows-enhancing-developer-productivity","blog\u002F016.vue-ai-integration-workflows-enhancing-developer-productivity",{"title":74,"path":75,"stem":76},"OpenAPI Standards & Scalar Integration for Node.js Apps","\u002Fblog\u002Fopenapi-standards-scalar-integration-for-nodejs-apps","blog\u002F017.openapi-standards-scalar-integration-for-nodejs-apps",{"title":78,"path":79,"stem":80},"Nuxt 3.17 — Data Fetching Improvements","\u002Fblog\u002Fnuxt-317-data-fetching-improvements","blog\u002F019.nuxt-317-data-fetching-improvements",{"title":82,"path":83,"stem":84},"Subdomain-Based Multi-Tenancy in Nuxt","\u002Fblog\u002Fsubdomain-based-multi-tenancy-in-nuxt","blog\u002F020.subdomain-based-multi-tenancy-in-nuxt",{"title":86,"path":87,"stem":88},"Type-Safe Backends with TypeScript: tRPC, Zod, and Drizzle ORM","\u002Fblog\u002Ftype-safe-backends-with-typescript-trpc-zod-and-drizzle-orm","blog\u002F021.type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm",{"title":90,"path":91,"stem":92},"Unit Testing Vue Applications with Vitest and Agentic AI","\u002Fblog\u002Funit-testing-vue-applications-with-vitest-and-agentic-ai","blog\u002F022.unit-testing-vue-applications-with-vitest-and-agentic-ai",{"title":94,"path":95,"stem":96},"Hidden Features & Lesser-Known TypeScript Gems","\u002Fblog\u002Fhidden-features-lesser-known-typescript-gems","blog\u002F023.hidden-features-lesser-known-typescript-gems",{"title":98,"path":99,"stem":100},"Nuxt\u002FVercel Acquisition and Its Impact on NuxtHub Users","\u002Fblog\u002Fnuxtvercel-acquisition-and-its-impact-on-nuxthub-users","blog\u002F024.nuxtvercel-acquisition-and-its-impact-on-nuxthub-users",{"title":102,"path":103,"stem":104},"State of Vue & Nuxt Ecosystem 2025","\u002Fblog\u002Fstate-of-vue-nuxt-ecosystem-2025","blog\u002F025.state-of-vue-nuxt-ecosystem-2025",{"title":106,"path":107,"stem":108},"Feature Adoption in TypeScript Over Time","\u002Fblog\u002Ffeature-adoption-in-typescript-over-time","blog\u002F026.feature-adoption-in-typescript-over-time",{"title":110,"path":111,"stem":112},"Migrating From WordPress to Nuxt Content & Using Nuxt Studio","\u002Fblog\u002Fmigrating-from-wordpress-to-nuxt-content-using-nuxt-studio","blog\u002F027.migrating-from-wordpress-to-nuxt-content-using-nuxt-studio",{"title":114,"path":115,"stem":116},"Strategic Topic: The “Rust-ification” of Tooling (Biome & Rolldown)","\u002Fblog\u002Fstrategic-topic-the-rust-ification-of-tooling-biome-rolldown","blog\u002F028.strategic-topic-the-rust-ification-of-tooling-biome-rolldown",{"title":118,"path":119,"stem":120},"Nuxt 4 and the Evolving Full-Stack Framework Landscape","\u002Fblog\u002Fnuxt-4-and-the-evolving-full-stack-framework-landscape","blog\u002F029.nuxt-4-and-the-evolving-full-stack-framework-landscape",{"title":122,"path":123,"stem":124},"Bun as a JavaScript Runtime: Evaluating Readiness Beyond Node.js","\u002Fblog\u002Fbun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs","blog\u002F030.bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs",{"title":126,"path":127,"stem":128},"Top 10 Nuxt Modules That Supercharge Your App From Day One Introduction","\u002Fblog\u002Ftop-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction","blog\u002F031.top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction",{"title":130,"path":131,"stem":132},"Strategic Topic: Vite+, VoidZero, and the Future of Frontend Tooling","\u002Fblog\u002Fstrategic-topic-vite-voidzero-and-the-future-of-frontend-tooling","blog\u002F032.strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling",{"title":134,"path":135,"stem":136},"The Future of Time in JavaScript: Transitioning to the Native Temporal API","\u002Fblog\u002Fthe-future-of-time-in-javascript-transitioning-to-the-native-temporal-api","blog\u002F033.the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api",{"title":138,"path":139,"stem":140},"Understanding Hydration Issues in Nuxt and How Nuxt Hints Helps","\u002Fblog\u002Funderstanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps","blog\u002F034.understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps",false,{"id":143,"title":62,"author":144,"body":148,"date":1193,"description":1194,"extension":1195,"image":1196,"meta":1197,"minRead":358,"navigation":1198,"path":63,"seo":1199,"stem":64,"__hash__":1200},"blog\u002Fblog\u002F014.modernizing-classic-aspnet-mvc-with-vuejs.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"\u002Favatars\u002Fprofile-image-1.png",{"type":149,"value":150,"toc":1191},"minimark",[151,164,169,202,205,210,230,232,237,239,244,247,471,474,476,481,484,611,614,997,1000,1002,1007,1014,1081,1084,1086,1091,1116,1118,1124,1126,1140,1142,1148,1187],[152,153,154,158,159,163],"p",{},[155,156,157],"strong",{},"Introduction","\nMany 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 ",[160,161,162],"code",{},"Webpack",".",[152,165,166],{},[155,167,168],{},"Tooling Considerations",[170,171,172,178,184,190,196],"ul",{},[173,174,175,177],"li",{},[155,176,162],{},": Essential for compiling Vue SFCs, transpiling ES6+, and bundling assets.",[173,179,180,183],{},[155,181,182],{},"npm",": Use to manage Vue and related libraries.",[173,185,186,189],{},[155,187,188],{},"ASP.NET Bundling (BundleConfig.cs)",": Can reference the output files from Webpack for consistency across environments.",[173,191,192,195],{},[155,193,194],{},"Hot Module Replacement (HMR)",": Enabled during local development for instant UI feedback.",[173,197,198,201],{},[155,199,200],{},"Environment Variables",": You can bridge backend variables (like API URLs) with Vue using templated Razor variables or config files.",[203,204],"hr",{},[152,206,207],{},[155,208,209],{},"Challenges",[170,211,212,218,224],{},[173,213,214,217],{},[155,215,216],{},"Routing Conflicts",": When mixing client-side routing with MVC routes.",[173,219,220,223],{},[155,221,222],{},"Asset Pipeline Duplication",": Managing both NuGet (for backend) and npm (for frontend).",[173,225,226,229],{},[155,227,228],{},"Developer Onboarding",": May require backend developers to learn modern JS tooling.",[203,231],{},[152,233,234],{},[155,235,236],{},"Ideal Approches on VueJS integration",[203,238],{},[152,240,241],{},[155,242,243],{},"Approach 1: Embedding Vue in Razor Views (Widget-Based Enhancements)",[152,245,246],{},"For small enhancements or interactive UI components:",[248,249,250,305],"ol",{},[173,251,252,258,259],{},[155,253,254,255],{},"Add Vue via CDN in ",[160,256,257],{},"_Layout.cshtml",":",[260,261,266],"pre",{"className":262,"code":263,"language":264,"meta":265,"style":265},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue@3\">\u003C\u002Fscript>\n\n","html","",[160,267,268],{"__ignoreMap":265},[269,270,273,277,281,285,288,291,295,297,300,302],"span",{"class":271,"line":272},"line",1,[269,274,276],{"class":275},"sMK4o","\u003C",[269,278,280],{"class":279},"swJcz","script",[269,282,284],{"class":283},"spNyl"," src",[269,286,287],{"class":275},"=",[269,289,290],{"class":275},"\"",[269,292,294],{"class":293},"sfazB","https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue@3",[269,296,290],{"class":275},[269,298,299],{"class":275},">\u003C\u002F",[269,301,280],{"class":279},[269,303,304],{"class":275},">\n",[173,306,307,258,313],{},[155,308,309,310],{},"Create inline Vue component inside ",[160,311,312],{},".cshtml",[260,314,316],{"className":262,"code":315,"language":264,"meta":265,"style":265},"\u003Cdiv id=\"greeting\">\n  Hello, {{ name }}!\n\u003C\u002Fdiv>\n\u003Cscript>\n  Vue.createApp({\n    data() {\n      return {\n        name: '@ViewBag.UserName'\n      };\n    }\n  }).mount('#greeting');\n\u003C\u002Fscript>\n\n",[160,317,318,339,346,356,365,383,395,404,421,427,433,462],{"__ignoreMap":265},[269,319,320,322,325,328,330,332,335,337],{"class":271,"line":272},[269,321,276],{"class":275},[269,323,324],{"class":279},"div",[269,326,327],{"class":283}," id",[269,329,287],{"class":275},[269,331,290],{"class":275},[269,333,334],{"class":293},"greeting",[269,336,290],{"class":275},[269,338,304],{"class":275},[269,340,342],{"class":271,"line":341},2,[269,343,345],{"class":344},"sTEyZ","  Hello, {{ name }}!\n",[269,347,349,352,354],{"class":271,"line":348},3,[269,350,351],{"class":275},"\u003C\u002F",[269,353,324],{"class":279},[269,355,304],{"class":275},[269,357,359,361,363],{"class":271,"line":358},4,[269,360,276],{"class":275},[269,362,280],{"class":279},[269,364,304],{"class":275},[269,366,368,371,373,377,380],{"class":271,"line":367},5,[269,369,370],{"class":344},"  Vue",[269,372,163],{"class":275},[269,374,376],{"class":375},"s2Zo4","createApp",[269,378,379],{"class":344},"(",[269,381,382],{"class":275},"{\n",[269,384,386,389,392],{"class":271,"line":385},6,[269,387,388],{"class":279},"    data",[269,390,391],{"class":275},"()",[269,393,394],{"class":275}," {\n",[269,396,398,402],{"class":271,"line":397},7,[269,399,401],{"class":400},"s7zQu","      return",[269,403,394],{"class":275},[269,405,407,410,412,415,418],{"class":271,"line":406},8,[269,408,409],{"class":279},"        name",[269,411,258],{"class":275},[269,413,414],{"class":275}," '",[269,416,417],{"class":293},"@ViewBag.UserName",[269,419,420],{"class":275},"'\n",[269,422,424],{"class":271,"line":423},9,[269,425,426],{"class":275},"      };\n",[269,428,430],{"class":271,"line":429},10,[269,431,432],{"class":275},"    }\n",[269,434,436,439,442,444,447,449,452,455,457,459],{"class":271,"line":435},11,[269,437,438],{"class":275},"  }",[269,440,441],{"class":344},")",[269,443,163],{"class":275},[269,445,446],{"class":375},"mount",[269,448,379],{"class":344},[269,450,451],{"class":275},"'",[269,453,454],{"class":293},"#greeting",[269,456,451],{"class":275},[269,458,441],{"class":344},[269,460,461],{"class":275},";\n",[269,463,465,467,469],{"class":271,"line":464},12,[269,466,351],{"class":275},[269,468,280],{"class":279},[269,470,304],{"class":275},[152,472,473],{},"This method is ideal for adding interactivity without complex tooling.",[203,475],{},[152,477,478],{},[155,479,480],{},"Approach 2: Vue with Build Tools (Webpack or Vite)",[152,482,483],{},"To integrate more sophisticated components:",[248,485,486,537,545],{},[173,487,488,258,494],{},[155,489,490,491],{},"Create a Vue project in ",[160,492,493],{},"ClientApp\u002F",[260,495,499],{"className":496,"code":497,"language":498,"meta":265,"style":265},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm init vue@latest\ncd ClientApp\nnpm install\nnpm run build\n\n","bash",[160,500,501,512,520,527],{"__ignoreMap":265},[269,502,503,506,509],{"class":271,"line":272},[269,504,182],{"class":505},"sBMFI",[269,507,508],{"class":293}," init",[269,510,511],{"class":293}," vue@latest\n",[269,513,514,517],{"class":271,"line":341},[269,515,516],{"class":375},"cd",[269,518,519],{"class":293}," ClientApp\n",[269,521,522,524],{"class":271,"line":348},[269,523,182],{"class":505},[269,525,526],{"class":293}," install\n",[269,528,529,531,534],{"class":271,"line":358},[269,530,182],{"class":505},[269,532,533],{"class":293}," run",[269,535,536],{"class":293}," build\n",[173,538,539,163],{},[155,540,541,542,441],{},"Output assets to a public directory (",[160,543,544],{},"wwwroot\u002Fjs\u002F",[173,546,547,258,550],{},[155,548,549],{},"Include generated JS\u002FCSS in Razor view",[260,551,553],{"className":262,"code":552,"language":264,"meta":265,"style":265},"\u003Cscript src=\"~\u002Fjs\u002Fapp.js\">\u003C\u002Fscript>\n\u003Clink href=\"~\u002Fjs\u002Fstyle.css\" rel=\"stylesheet\">\n\n",[160,554,555,578],{"__ignoreMap":265},[269,556,557,559,561,563,565,567,570,572,574,576],{"class":271,"line":272},[269,558,276],{"class":275},[269,560,280],{"class":279},[269,562,284],{"class":283},[269,564,287],{"class":275},[269,566,290],{"class":275},[269,568,569],{"class":293},"~\u002Fjs\u002Fapp.js",[269,571,290],{"class":275},[269,573,299],{"class":275},[269,575,280],{"class":279},[269,577,304],{"class":275},[269,579,580,582,585,588,590,592,595,597,600,602,604,607,609],{"class":271,"line":341},[269,581,276],{"class":275},[269,583,584],{"class":279},"link",[269,586,587],{"class":283}," href",[269,589,287],{"class":275},[269,591,290],{"class":275},[269,593,594],{"class":293},"~\u002Fjs\u002Fstyle.css",[269,596,290],{"class":275},[269,598,599],{"class":283}," rel",[269,601,287],{"class":275},[269,603,290],{"class":275},[269,605,606],{"class":293},"stylesheet",[269,608,290],{"class":275},[269,610,304],{"class":275},[152,612,613],{},"More in-depth:",[248,615,616],{},[173,617,618,621,652],{},[155,619,620],{},"Vue with Webpack + Bundling",[170,622,623,642,649],{},[173,624,625,626,629,630,633,634,637,638,641],{},"Use a ",[160,627,628],{},"webpack.config.js"," to compile ",[160,631,632],{},".vue"," files and output them to the ",[160,635,636],{},"Scripts"," or ",[160,639,640],{},"dist"," folder.",[173,643,644,645,648],{},"Integrate with ASP.NET's ",[160,646,647],{},"BundleConfig.cs"," to manage generated JS bundles.",[173,650,651],{},"This setup provides hot-reloading during development and minified output for production.",[260,653,657],{"className":654,"code":655,"language":656,"meta":265,"style":265},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Example webpack.config.js\nconst path = require('path');\nmodule.exports = {\n  entry: '.\u002Fsrc\u002Fmain.js',\n  output: {\n    path: path.resolve(__dirname, 'wwwroot\u002Fdist'),\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      { test: \u002F\\.vue$\u002F, loader: 'vue-loader' },\n      { test: \u002F\\.js$\u002F, loader: 'babel-loader', exclude: \u002Fnode_modules\u002F }\n    ]\n  },\n  resolve: {\n    alias: { 'vue$': 'vue\u002Fdist\u002Fvue.esm.js' },\n    extensions: ['*', '.js', '.vue', '.json']\n  }\n};\n","jsx",[160,658,659,665,691,701,718,727,759,773,778,787,797,839,888,894,899,909,938,985,991],{"__ignoreMap":265},[269,660,661],{"class":271,"line":272},[269,662,664],{"class":663},"sHwdD","\u002F\u002F Example webpack.config.js\n",[269,666,667,670,673,675,678,680,682,685,687,689],{"class":271,"line":341},[269,668,669],{"class":283},"const",[269,671,672],{"class":344}," path ",[269,674,287],{"class":275},[269,676,677],{"class":375}," require",[269,679,379],{"class":344},[269,681,451],{"class":275},[269,683,684],{"class":293},"path",[269,686,451],{"class":275},[269,688,441],{"class":344},[269,690,461],{"class":275},[269,692,693,696,699],{"class":271,"line":348},[269,694,695],{"class":275},"module.exports",[269,697,698],{"class":275}," =",[269,700,394],{"class":275},[269,702,703,706,708,710,713,715],{"class":271,"line":358},[269,704,705],{"class":279},"  entry",[269,707,258],{"class":275},[269,709,414],{"class":275},[269,711,712],{"class":293},".\u002Fsrc\u002Fmain.js",[269,714,451],{"class":275},[269,716,717],{"class":275},",\n",[269,719,720,723,725],{"class":271,"line":367},[269,721,722],{"class":279},"  output",[269,724,258],{"class":275},[269,726,394],{"class":275},[269,728,729,732,734,737,739,742,745,748,750,753,755,757],{"class":271,"line":385},[269,730,731],{"class":279},"    path",[269,733,258],{"class":275},[269,735,736],{"class":344}," path",[269,738,163],{"class":275},[269,740,741],{"class":375},"resolve",[269,743,744],{"class":344},"(__dirname",[269,746,747],{"class":275},",",[269,749,414],{"class":275},[269,751,752],{"class":293},"wwwroot\u002Fdist",[269,754,451],{"class":275},[269,756,441],{"class":344},[269,758,717],{"class":275},[269,760,761,764,766,768,771],{"class":271,"line":397},[269,762,763],{"class":279},"    filename",[269,765,258],{"class":275},[269,767,414],{"class":275},[269,769,770],{"class":293},"bundle.js",[269,772,420],{"class":275},[269,774,775],{"class":271,"line":406},[269,776,777],{"class":275},"  },\n",[269,779,780,783,785],{"class":271,"line":423},[269,781,782],{"class":279},"  module",[269,784,258],{"class":275},[269,786,394],{"class":275},[269,788,789,792,794],{"class":271,"line":429},[269,790,791],{"class":279},"    rules",[269,793,258],{"class":275},[269,795,796],{"class":344}," [\n",[269,798,799,802,805,807,810,813,816,819,822,824,827,829,831,834,836],{"class":271,"line":435},[269,800,801],{"class":275},"      {",[269,803,804],{"class":279}," test",[269,806,258],{"class":275},[269,808,809],{"class":275}," \u002F",[269,811,812],{"class":344},"\\.",[269,814,815],{"class":293},"vue",[269,817,818],{"class":400},"$",[269,820,821],{"class":275},"\u002F",[269,823,747],{"class":275},[269,825,826],{"class":279}," loader",[269,828,258],{"class":275},[269,830,414],{"class":275},[269,832,833],{"class":293},"vue-loader",[269,835,451],{"class":275},[269,837,838],{"class":275}," },\n",[269,840,841,843,845,847,849,851,854,856,858,860,862,864,866,869,871,873,876,878,880,883,885],{"class":271,"line":464},[269,842,801],{"class":275},[269,844,804],{"class":279},[269,846,258],{"class":275},[269,848,809],{"class":275},[269,850,812],{"class":344},[269,852,853],{"class":293},"js",[269,855,818],{"class":400},[269,857,821],{"class":275},[269,859,747],{"class":275},[269,861,826],{"class":279},[269,863,258],{"class":275},[269,865,414],{"class":275},[269,867,868],{"class":293},"babel-loader",[269,870,451],{"class":275},[269,872,747],{"class":275},[269,874,875],{"class":279}," exclude",[269,877,258],{"class":275},[269,879,809],{"class":275},[269,881,882],{"class":293},"node_modules",[269,884,821],{"class":275},[269,886,887],{"class":275}," }\n",[269,889,891],{"class":271,"line":890},13,[269,892,893],{"class":344},"    ]\n",[269,895,897],{"class":271,"line":896},14,[269,898,777],{"class":275},[269,900,902,905,907],{"class":271,"line":901},15,[269,903,904],{"class":279},"  resolve",[269,906,258],{"class":275},[269,908,394],{"class":275},[269,910,912,915,917,920,922,925,927,929,931,934,936],{"class":271,"line":911},16,[269,913,914],{"class":279},"    alias",[269,916,258],{"class":275},[269,918,919],{"class":275}," {",[269,921,414],{"class":275},[269,923,924],{"class":279},"vue$",[269,926,451],{"class":275},[269,928,258],{"class":275},[269,930,414],{"class":275},[269,932,933],{"class":293},"vue\u002Fdist\u002Fvue.esm.js",[269,935,451],{"class":275},[269,937,838],{"class":275},[269,939,941,944,946,949,951,954,956,958,960,963,965,967,969,971,973,975,977,980,982],{"class":271,"line":940},17,[269,942,943],{"class":279},"    extensions",[269,945,258],{"class":275},[269,947,948],{"class":344}," [",[269,950,451],{"class":275},[269,952,953],{"class":293},"*",[269,955,451],{"class":275},[269,957,747],{"class":275},[269,959,414],{"class":275},[269,961,962],{"class":293},".js",[269,964,451],{"class":275},[269,966,747],{"class":275},[269,968,414],{"class":275},[269,970,632],{"class":293},[269,972,451],{"class":275},[269,974,747],{"class":275},[269,976,414],{"class":275},[269,978,979],{"class":293},".json",[269,981,451],{"class":275},[269,983,984],{"class":344},"]\n",[269,986,988],{"class":271,"line":987},18,[269,989,990],{"class":275},"  }\n",[269,992,994],{"class":271,"line":993},19,[269,995,996],{"class":275},"};\n",[152,998,999],{},"This setup allows full use of Vue SFCs (Single File Components) while maintaining ASP.NET MVC routing.",[203,1001],{},[152,1003,1004],{},[155,1005,1006],{},"Approach 3: Serve Vue as a SPA Shell in MVC",[152,1008,1009,1010,1013],{},"You can let ASP.NET MVC serve only a single entry point (e.g., ",[160,1011,1012],{},"Home\u002FIndex","), and Vue handles routing and rendering:",[248,1015,1016,1021],{},[173,1017,1018],{},[155,1019,1020],{},"Create SPA and build it",[173,1022,1023,258,1030],{},[155,1024,1025,1026,1029],{},"Use ",[160,1027,1028],{},"Index.cshtml"," to serve app shell",[260,1031,1033],{"className":262,"code":1032,"language":264,"meta":265,"style":265},"\u003Cdiv id=\"app\">\u003C\u002Fdiv>\n\u003Cscript src=\"~\u002Fdist\u002Fapp.js\">\u003C\u002Fscript>\n\n",[160,1034,1035,1058],{"__ignoreMap":265},[269,1036,1037,1039,1041,1043,1045,1047,1050,1052,1054,1056],{"class":271,"line":272},[269,1038,276],{"class":275},[269,1040,324],{"class":279},[269,1042,327],{"class":283},[269,1044,287],{"class":275},[269,1046,290],{"class":275},[269,1048,1049],{"class":293},"app",[269,1051,290],{"class":275},[269,1053,299],{"class":275},[269,1055,324],{"class":279},[269,1057,304],{"class":275},[269,1059,1060,1062,1064,1066,1068,1070,1073,1075,1077,1079],{"class":271,"line":341},[269,1061,276],{"class":275},[269,1063,280],{"class":279},[269,1065,284],{"class":283},[269,1067,287],{"class":275},[269,1069,290],{"class":275},[269,1071,1072],{"class":293},"~\u002Fdist\u002Fapp.js",[269,1074,290],{"class":275},[269,1076,299],{"class":275},[269,1078,280],{"class":279},[269,1080,304],{"class":275},[152,1082,1083],{},"This is ideal for teams transitioning from MVC to full SPAs gradually.",[203,1085],{},[152,1087,1088],{},[155,1089,1090],{},"Considerations",[170,1092,1093,1098,1104],{},[173,1094,1095,1097],{},[155,1096,216],{},": Ensure Vue and MVC don’t fight over URLs. Use history mode cautiously.",[173,1099,1100,1103],{},[155,1101,1102],{},"Auth & State",": Reuse ASP.NET session\u002Fcookie-based auth within Vue via AJAX.",[173,1105,1106,1109,1110,637,1112,1115],{},[155,1107,1108],{},"Tooling",": Optional to add ",[160,1111,162],{},[160,1113,1114],{},"Vite"," depending on scope.",[203,1117],{},[152,1119,1120,1123],{},[155,1121,1122],{},"Conclusion","\nIntegrating 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.",[203,1125],{},[152,1127,1128,1131,1132,1135,1136,1139],{},[155,1129,1130],{},"Author’s note",": This is also part of my research wherein I can try to help the ",[160,1133,1134],{},"Voky"," team migrate to using modern JS frameworks from the old ",[160,1137,1138],{},"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 🍍.",[203,1141],{},[152,1143,1144,1147],{},[155,1145,1146],{},"Resources"," (pasting these here for reference with the other devs)",[170,1149,1150,1159,1166,1173,1180],{},[173,1151,1152,1153],{},"Vue.js: ",[1154,1155,1156],"a",{"href":1156,"rel":1157},"https:\u002F\u002Fvuejs.org\u002F",[1158],"nofollow",[173,1160,1161,1162],{},"Webpack: ",[1154,1163,1164],{"href":1164,"rel":1165},"https:\u002F\u002Fwebpack.js.org\u002F",[1158],[173,1167,1168,1169],{},"Vue Loader: ",[1154,1170,1171],{"href":1171,"rel":1172},"https:\u002F\u002Fvue-loader.vuejs.org\u002F",[1158],[173,1174,1175,1176],{},"ASP.NET MVC Bundling: ",[1154,1177,1178],{"href":1178,"rel":1179},"https:\u002F\u002Flearn.microsoft.com\u002Fen-us\u002Faspnet\u002Fmvc\u002Foverview\u002Fperformance\u002Fbundling-and-minification",[1158],[173,1181,1182,1183],{},"Example Repo: ",[1154,1184,1185],{"href":1185,"rel":1186},"https:\u002F\u002Fgithub.com\u002Fmikoskinen\u002Faspnetmvc-vue",[1158],[1188,1189,1190],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":265,"searchDepth":341,"depth":341,"links":1192},[],"2025-04-01","*By Sean Erick C. Ramones, Vue SME | JavaScript\u002FTypeScript SME*","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F97077\u002Fpexels-photo-97077.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",{},true,{"title":62,"description":1194},"C86IlhIxtkZ5PEv9Vmg0FaKsCRg4UJAGnJCIqiaV-KE",[1202,1204],{"title":58,"path":59,"stem":60,"description":1203,"children":-1},"*By Sean Erick C. Ramones, Vue SME | JavaScript\u002FTypScript SME*",{"title":66,"path":67,"stem":68,"description":1203,"children":-1},1779638277114]