- Published on
Use VueJs with Sitefinity
- Steve McNiven
So this tutorial is for larger sites where one might have MANY pages and MANY vue components\widgets scattered around. You don’t want a 4 meg vue webpacked file loaded on every page, you just want the components needed for that page. This is the fundamental problem with a CMS where you let users design whatever they want.
Step 1: Load vue
You’re going to want to open your /ResourcePackages/
So we’re setting up the layout such that we can use Html.Script to precisely place the scripts where we need. Just because we have a jQuery section in here, doesn’t mean anything nessesarily will go there, but like if we want to use kendo and it’s vuejs wrappers, we’re going to need Kendo AND jQuery (the wrappers are free, and kendo for jQuery is included with Sitefinity).
So you can see though the 2 frameworks are at the top, then plugins come after, then “bottom” is usually for custom scripts (or vue components) we’re going to be making. Because we’re not webpacking this badboy… sadly not going to be using Single File Components.
At the very bottom we’re loading Vue from a shared cshtml file to keep things clean
You’ll notice I’m loading it through a helper method
This lets me get the VueJs chrome extension tooling working if the site is on dev or staging. For this purpose the scripts are hardcoded, for an actual site you should be storing them in a configuration file to be updated in the backend.
Step 2: Create your widget
I’m not going to bother going through how to make a basic Sitefinity MVC Widget, lets just assume you already have the Controllers\Model\View files all setup and ready to go, and it’s called “MyWidget”.
In here we’re just rendering the vue component node itself, pass in whatever you need as properties, handle events as normal, it’s up to you.
The component is just an un-fancy .js filem but now it should load just fine. Dropping the MyWidget 10 times on a page doesn’t load the script 10 times, but you should get 10 instances of that widget rendering.
That’s it, there’s no step 3, just drag\drop and use your sitefinity widget as normal. The main core vue script will handle loading the components inside of itself (and the v-cloak hides the flout)
These are things I couldn’t really add because they increased complexity, but you probably should consider doing…
Go through your Sitefinity theme template view files and move all the scripts from “top” or “head” into one of our placeholder elements we defined. This should provide a significant performance rendering bump as the scripts aren’t loading\running ABOVE the content.
template: #mywidget-templatethen move that template into the cshtml as
<script id="mywidget-template" type="text/x-template"><script>. You’ll get syntax highlighting on the html and your script is smaller. The problem is if you put it external, and someone uses the widget 8 times on the page, that x-template node is also rendered 8 times, but ALSO you have 8 of the same “mywidget-template” ids, and the browser or vue might throw some console errors or warnings. It’ll PROBABLLY still work fine, but just be aware.
Minify your scripts, but use the IsDev helpers to deliver the unminified versions to yourself.
Move hardcoded scripts into a Configuration Element it’ll save your butt in the future not needing to re-compile. Moreover add a cache breaker element in there to version your scripts. So you can do things like
"/MVC/Views/MyWidget/Resources/component-mywidget.js?v=" + Util.CacheBreaker.
Play with maybe disabling the Vue stuff in the page designer if it’s problematic. You can do an If\Else to render static html content if it’s in page designer mode… a few SF widgets do this.
As I mentioned above React, Angular, Svelte, etc etc, all will work if you follow this format. The most important part is the Page Layout loading of the script elements in the proper order.