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

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 ponent into the existing Projekt(preferable running in a div).

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

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

Share Improve this question asked Mar 13, 2020 at 10:09 finnk 1331 gold badge1 silver badge15 bronze badges

I would say "depends on the existing code" - vue was designed to be incrementally adopted so, it should be easy - but without any clue of the existing code it's pretty hard to remend how you should proceed – Jaromanda X Commented Mar 13, 2020 at 11:24

Add a ment |

4 Answers 4

Sorted by: Reset to default 6

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

Add the feature under VueFeatures
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./@hyounoosung/integrating-vue-js-2-0-to-net-mvc5-project-f97eb5a5b3ad when I had integrated vue cli to an existing mvc project.

How we did it, was to turn each razor page into its own mini front end project in Vue. For example page X bees 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 pletely 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 ponent libraries .

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>

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

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Best way to integrate Vue.js into existing ASP.NET MVC5 Project - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)