How to integrate an existing Vue.js 2 interface to an existing ASP.NET/C# Web forms application?

Question

Yesterday I've received an interface made using Vue.js 2 and I've been asked to implement it to an existing C#/ASP.NET web forms application.

I've noticed that vue.js can be used on the CLI/npm (which I believe the new interface is made of) and the easy import.

How should I go about this ? A schema of how things will be interacting with each other is appreciated!

Answer 1

If you have access to the build output of the Vue.js UI it can be quite straight forward in ASP.NET MCV. I don't now how applicable to webforms it will be but here was my solution to the issue:

@{
    Layout = "~/Views/Shared/Layouts/_Public_Injectable.cshtml";
    ViewBag.Title = "Page Title";
}
@section scripts{
    @Styles.Render("~/content/css/vue")
}

<noscript>
    <strong>We're sorry but this page doesn't work without JavaScript enabled. Please enable it to continue.</strong>
</noscript>

<div id="app"></div>

<script src="~/Scripts/Vue-Build-Files/js/chunk-vendors.738367a5.js"></script>
<script src="~/Scripts/Vue-Build-Files/js/app.40933a0b.js"></script>

Essentially the solution is to take the Vue.JS build output and add it as a set of scripts to the page and ensure that your page has the necessary index.html to work with the vue application