40FINGERS DNN Nederlands40FINGERS DNN English

Our Blog

Menu: Blog

A DNN Module with VueJS

By: Stefan Kamphuis

About EmptyModules

At 40Fingers we've been creating "EmptyModules" for several years. We use them as a template for custom modules we need to build for our customers. Yes, an EmptyModule will work when installed, but it's functionality is never very spectacular. You will, however, be able to use the module's source as an example for your own modules.

Over the years we have used EmptyModules for

  • A basic DNN module in c# (as of DNN5 if I'm not mistaken)
  • A VB.net version of that same basic thing
  • A module using razor to render HTML and using DNN ServiceFramework
  • A DNN SPA module using Knockout and Entity Framework
  • A DNN MVC module, also using Knockout and Entity Framework

This is the latest addition to that line, and the first to be published as open source: a DNN module using VueJS and Entity Framework 6.

About EmptyModuleVue

This very EmptyModule is based on our EmptyModuleSpa, which was initially based on Chris Hammond's SPA Module Template. I've at the time changed that to my own likings. For example, I added Entity Framework to it. Recently (May 2020) I started looking into VueJS and decided to create a new version of EmptyModuleSpa based on VueJS.

This is my first experience with VueJS, but I already learned there are several ways to create a VueJS DNN module. I chose the X-Template approach because it will allow me to nicely separate templates and script (although you could still place them close to one another) and it gives me the easy copy-and-run functionality without needing a running compiler.

I found VueJS fun to dive into, although I haven't yet decided wether or not this will become my main approach for DNN modules. I used the VueJS website, Pluralsight and a book (yes, a stack of paper sheets glued together, a real one) to dive into this.

Besides the learning curve (which isn't all that steep for VueJS), the main issue I ran across, was to allow multiple instances of the module to be placed on the same page, but with a little extra work that was fixed too.

The project can be found on Github. Feel free to leave your comments there.