No, vue@2
is what you put into uibuilder's library manager to ensure that you install the latest v2 release. VueJS is the official name of the framework, vue2
is just shorthand.
Well, possibly a bit of a personal viewpoint but I think that:
- It is simpler and easier to learn v2, certainly less confusing since v3 has several ways of doing things in order to try and carry forwards some legacy compatibility.
- There are way more tutorials and extended components for v2 than there are for v3 which is still relatively new (and can sometimes be quite complex to migrate).
- On the other hand, v2 is at end of life and the future is v3.
The biggest gain right now in my view for v2 is that you can use bootstrap-vue which is quite possibly the easiest extension to Vue that I've tried - though admittedly my knowledge on that might be slightly dated.
If you want an extension for Vue v3, possible Quasar is the easiest to get going with. However, I still didn't find that personally as easy as bootstrap-vue.
Bootstrap-vue are preparing for Vue v3 compatibility but I couldn't get it to work in my last test. That was a fairly brief test though since I no longer use Vue myself. Most of what I do doesn't really need Vue or bootstrap and is easily met by uibuilder with vanilla HTML/CSS with an occasional bit of JS thrown in for good measure. But my needs are pretty simple, mostly some fairly simple home automation dashboards like the one I showed previously. This is possibly because I spend all my free time working on uibuilder!
MQTT has the advantage that you get an event-driven data interface, effectively for free. With a DB, you have to go and query it when you want an update. But yes, either will work just fine.
If you are using something like Vue, then the difference is how you get the node-red data into the UI. With the "traditional" way of working with uibuilder, you send your msg direct to the uibuilder node and in your front-end code, you have a uibuilder.onchange('msg', (msg) => { ... })
event listener. That function fires whenever the client receives a message from Node-RED. You then assign the data from the incoming msg to a Vue data variable. These are defined in your View "app" and they are reactive to change. So the act of updating the variable will change the UI. That method still works as expected and won't be going away, it continues to be useful.
Without using a framework, you can now use the uib-update
node and you don't need any front-end javascript at all. So if your HTML contained:
<div>
<h2>My Interesting Web Page</h2>
<p>Some fixed text.</p>
<p id="changableP">(this will be changed from node-red)</p>
</div>
You can use a uib-update
node like this:
And every time you send a msg via this node to the uibuilder node with a payload set to a string, that string will replace the on-page text with the new text.
Note the leading #
on the CSS Selector field in the node and how it relates to the id
attribute that you set on the p
tag where you want the text.
You can, of course, use <span>
tags in your html instead. A p
tag is a "block" whereas a span
is "inline". The point is that uibuilder doesn't care, it leverages the standard features of HTML and CSS but makes it easier for you to use - you don't have to learn loads about HTML and CSS, just the basics and you'd be learning at least that much in order to learn how to use a framework.