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