DEV Community

How to Integrate Vue with ASP .NET MVC - The synergy between the two

Milos Protic on March 20, 2019

In the world of all growing popularity of front-end development, it seems that the other side, the backend, has been put to the side. This is due t...
Collapse
 
whitebookmark profile image
Rein

Thank you for writing this tutorial. However I still do not understand how will you make a production build like this ? If you use webpack to build Vue.js then it would appear in a separate file which means razor syntax cannot be integrate like that. I also noticed you aren't using SFC with .vue extensions, is that not possible ?

Collapse
 
proticm profile image
Milos Protic

Sorry for my far late reply :D I did not use Webpack, I used Rollup to build the scripts (but it should not make any difference), and it worked quite nicely. I have it fully operating with SFC components and Razor views where I use them. I cannot show you the project because it's a private repository

Collapse
 
drewtownchi profile image
Drew Town

This is interesting and looks like a nice approach for sprinkling in Vue to a server rendered asp.net project. I love asp.net core but have only ever done an API project with Vue so it is nice to see some alternatives like this.

Collapse
 
proticm profile image
Milos Protic • Edited

Thanks. I've built a lot of applications using this approach with knockout.

Collapse
 
scriptedpixels profile image
👨🏾‍💻 Kam Banwait

Have you a guide or steps on how to replace knockout with Vue?

I’m new to DotNet & have the task of replacing knockout with Vue but not in a SPA way, just in a way of replacing certain areas of the app with Vue components

Thread Thread
 
proticm profile image
Milos Protic

I do not have a guide, but it should be straight forward, especially if you are not required to create Vue components. It is the easiest switch you could get (Knockout -> React or Knockout to Angular would be harder). I think that your question is too broad to be answered in the comment, especially if you are new to the mentioned tech stack

Collapse
 
janpauldahlke profile image
jan paul

Nice man. Can you write about the same approach in Java JSP and react?

Collapse
 
proticm profile image
Milos Protic

Thanks. I don't have enough experience with Java JSP, but if I do it the post will be published on dev.to

Collapse
 
janpauldahlke profile image
jan paul

i see. but nonetheless a nice article :-) I enjoyed reading it.

Thread Thread
 
proticm profile image
Milos Protic

Thank you very much.

Collapse
 
scottsea profile image
ScottSEA

This is great for half the pipeline - have you found a good solution for getting the Vue data back into the MVC View Model?

Collapse
 
proticm profile image
Milos Protic

Thanks.

I usually invoke a POST request with the Vue data formatted as JSON. MVC binder will do the rest and map the incoming object to the view model, but of course, you need to be careful and name the Vue data properties the same as the view model has them named.

Collapse
 
garsidestephen profile image
SG Digital

Thanks for the informative post - just what I was looking for!

Collapse
 
proticm profile image
Milos Protic

No problem 👍

Collapse
 
shivp profile image
shivp • Edited

Nice article! However is it possible to use this structure with .vue files? In a large project with over 100 views using js files for vue components would be difficult to scale