Vue components that work with uibuilder easily

While you can use any VueJS component with uibuilder, not all Vue components are built to the best standards. There is often an assumption that you will be using a build step and/or a stand-alone Vue app rather than the amazing data-driven Node-RED/uibuilder approach. 😁

The components listed on this page have been proven to work with Node-RED and uibuilder by various contributors and links to original forum threads or other locations are provided when feasible. These are in no particular order, I'll probably try to create some structure when there are enough entries to make it worth-while.

PLEASE feel free to contribute to this page directly. The only rules are to follow the same layout and only add information relevant to the use of VueJS with Node-RED and uibuilder.

Frameworks

• Quasar - comprehensive Vue v3 framework that follows Google Material Design. The UMD variant works without a build-step. Example
• bootstrap-vue - an early inclusion with uibuilder itself because it works without any build-step needed and provides a great baseline for visuals and a large number of useful components. Only works with Vue v2 (as at July 2022).
• Primevue - a UI framework for Vue. The IIFE (script tag) version of the libraries work without a build step. Seems to delight in making you separately load all of the components and CSS files. Thread

Charting

• Apache ECharts - Official VueJS support. Works with Vue v2 & v3. Note that you have to set the height of the containing div and possibly the background colour too. 37 chart types as at July 2022. v3 example
• vue-highcharts Official VueJS support from Highcharts. WARNING: Not free for commercial use. Works with Vue v2 & v3. While not well documented, can be used just by loading via a script link (no build needed). Vue v2 example, v3 example.
• vue-chartkick - supports chart.js, Google charts and Highcharts. Can be included via a script tag.
• vue-chartjs - a wrapper just for chart.js. Can be included via a script tag May no longer be the case, there are no instructions to do so any more.
• ChartJS (direct) - Simple chart library. 8 chart types. Works with ESM, plain JS or with module loaders. Urgh - setting the chart canvas background colour for ChartJS is horrid! Vue v3 example (Many thanks to Fabio Marzocca for this example).
• vue-canvas-knob - gauge/knob.
• vgauge - a Vue wrapper around GaugeJS. Can be used without a build step by including via script tag. Thread.

Other

• vue3-sfc-loader. Load .vue files directly. Vue v2 & v3. Example.
• vuex - store/state management for VueJS. Thread. NOTE: Now in the process of being replaced by Pinia which works with both Vue v2 and v3.
• Vue Router - Single-page app "page" routing. Vue3 Example.
• vue-cal - calendar component. Works with build step or script link. Thread.
• vue-bottom-navigation - Out of the box, this component was not very friendly. However, uibuilder friend unborn-andy wrote up the process. Thanks Andy. Thread.
• http-vue-loader - Load .vue files directly. Vue v2 only. Example.

JavaScript Libraries

Not VueJS components but instead are plain JavaScript libraries that work with VueJS, Node-RED and uibuilder.

• PrismJS - lightweight, extensible syntax highlighter. Thread (shows how to get it working).
• video.js - Embedded video player.