Best way to integrate Vue.js into existing ASP.NET MVC5 Project

Question

We have an existing ASP.NET MVC5 Projekt (razor). We want to rebuild everything(using Vue.js for the frontend), but due to customer requests, we first have to put a new Vue component into the existing Projekt(preferable running in a div).

We want to reuse the Vue component for the new application as well, so we decided to put the Vue component into its own project. What is the best and most straightforward approach for integrating Vue components into existing projects? I heard of a few options: IFrames or Building the component into an npm package.

I would love to hear some ideas. Thank you & best regards

Answer 1

We have done something similar to what Chad has described above.

Instead of having independent projects per page, we have one vue project. Using vue-cli, we have configured multiple entry points and each of these entry points are used in a razor page of itself. Also, for the inclusion of the scripts for every page, we have setup a process using a razor cshtml as a template.

For Eg. All our Vue features are in a folder called VueFeatures. VueFeatures has Feature1, Feature2

vue.config.js

foreach (folder in VueFeatures) {
 entry: folder + '/main.js',
 template: './VueAppLayout.cshtml',
 filename: './' + folder + '/VueAppLayout.cshtml'
}

What the above does is it creates an entry point for Feature1 and Feature2, and generates the scripts in Feature1/VueAppLayout.cshtml and Feature2/VueAppLayout.cshtml in dist folder.

the template VueAppLayout.cshtml looks like this

@section Head{
    @RenderSection("Head", false)
    <% for (var chunk in htmlWebpackPlugin.files.css) { %>
    @RenderStyles("<%= htmlWebpackPlugin.files.css[chunk] %>")
    <% } %>
}

@section Scripts{
    @RenderSection("Scripts", false)
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
    @RenderScripts("<%= htmlWebpackPlugin.files.chunks[chunk].entry %>")
    <% } %>

}

the output of npm build will generate cshtml in the below format for each feature. Below is a snapshot for Feature1.

@inherits System.Web.Mvc.WebViewPage

@{
    Layout = GetViewLayout(HttpContext.Current);
}

@section Head{
    @RenderSection("Head", false)
    @RenderScripts("~/dist/Feature1.css")
}

@section Scripts{
    @RenderSection("Scripts", false)
    @Helper.RenderScripts("~/dist/Feature1.js")
}
<div>
    @RenderBody()
</div>

Now to include these scripts, we leverage MVC layouts. Each feature will have it's own cshtml page. So for Feature1, there will be Feature1.cshtml In Feature1.cshtml, we just need to set the VueAppLayout.cshtml generated for that feature as the Layout. Below is the code for Feature1.cshtml

@{
    Layout = "~/dist/Feature1/VueAppLayout.cshtml";
}
<div id="app"></div>

This way, any new features we are adding, all we need to do is

1. Add the feature under VueFeatures
2. Set the layout of the feature cshtml to the corresponding layout from dist.

This prevents developers from including the scripts manually and changing the timestamp every time a change is made.

I had referred to this https://medium.com/@hyounoosung/integrating-vue-js-2-0-to-net-mvc5-project-f97eb5a5b3ad when I had integrated vue cli to an existing mvc project.

Answer 2

How we did it, was to turn each razor page into its own mini front end project in Vue. For example page X becomes a new Vue project called PageX. We then create the PageX project as a stand alone Vue project. When ready each of the Vue projects was then built by the Vue Cli using the standard tooling. The output of the build process was added to the solution in the scripts folder in a sub folders for each page, we then changed the razor pages to use the built Vue scripts like so

<div id="app"></div>
<script src="~/Scripts/VueProd/PageX/js/chunk-vendors.f32059da.js"></script>
<script src="~/Scripts/VueProd/PageX/js/app.f58ae4b7.js"></script>

The rest of the razor page was basically empty. We also set up the built process to bundle the css into the .js files to make it easier for us. by doing this we where also able to change only one page at a time.

We have had some great success with this. It allow us to separate out the front end completely if need to. We can also quickly and easily republish fount ends now with zero down time, we just publish the changes to the js files and change and publishes a changing in references on the razor and its all done with zero server downtime. Its also a lot easier to now manage our front end maintenance as we also leverage private npm repositories to hold shared js class and vue component libraries .

Answer 3

Thank you for your input! Your answers solved my question.

I created a View Project outside my project structure and bundled it into a webpack.

Take a look at the build folder in the webpack-vuetify-sample to bundle vuetify as well. This repo helped me a lot to get into webpack bundling.

After that, I did what Chad suggested and embedded my webpack into a page in my project.

<div id="app"></div>
<script src="~/Scripts/VueProd/PageX/js/chunk-vendors.f32059da.js"></script>
<script src="~/Scripts/VueProd/PageX/js/app.f58ae4b7.js"></script>

Answer 4

I created a template that showcases this for the .NET Core, but the same is appliable to the .NET 5.

Github: https://github.com/danijelh/aspnetcore-vue-typescript-template

Medium: https://medium.com/@danijelhdev/multi-page-net-core-with-vue-js-typescript-vuex-vue-router-bulma-sass-and-webpack-4-efc7de83fea4