A Vue.js web components integration package in dotnet standard

Vue.Net.WebComponents

Hello all, I’d like to share with you this nuget package I’ve put together to help people integrate Vue.js and C# projects that can reference dotnet standard code (Framework 4.6.1+, and dotnet core).

Here is the github repo

The repository contains the nuget package project called Vue.Net.WebComponents, as well as two example C# projects that also include some basic unit tests and a working example which should hopefully paint a pretty clear picture of what it’s doing. It also includes a basically empty vue cli 3 project to show the integration. All of the projects have their own readme with some basic info on how to run them.

What it does:

What the package boils down to is a very simple mechanism allowing creation of C# objects which can easily be rendered to the html for those objects to become vue web component tags. All that needs to be done to make this work is basically setting up the config, and extending the interfaces included in the package namespace, then calling the included extension methods wherever the HTML needs to be rendered.

It also allows for configuring with the web.config in legacy .NET framework versions, and also in dotnet core, with a file called vuesettings.json to support multiple environment deployments.

But why?

The reason I started this project was to integrate with a CMS system called EPiServer that is using MVC .NET Framework 4.7. This could be used for any dotnet project however, by simply extending the included interfaces and calling the extension methods wherever the HTML needs to be rendered.

The end result with my work on the CMS is that a marketing team can manage marketing content on the site with the CMS, while more complex front end functionality can be abstracted and built by developers in Vue, creating web components which can live separately in a CDN and be placed onto pages by the marketing team using the CMS web interface.

With extensive use of props and slots, often deeply nested, we are able to make this work to where the marketing team can easily manage images, text, etc that even live inside the Vue components, without using a headless approach with the CMS – of course that would still be an option, but not really necessary for most cases.

Todos:

There are some things that I’d like to add, including smart cache busting for the JS tags and more proper configuration on the core side (it was relatively rushed in there).

I know this is likely a pretty niche use type of integration, but I think spreading the joy of Vue development to those whose jobs have them stuck in the .NET world and who may think it’s not an easy integration is something I’d like to share.

Anyway, let me know what you all think! Thanks!