Skip to content

Vue components that work with uibuilder easily

Jump to bottom Edit New page
Julian Knight edited this page Jul 15, 2022 · 26 revisions

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.

  • 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).
  • 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.
  • Quasar - comprehensive Vue v3 framework that follows Google Material Design. The UMD variant works without a build-step. Example
  • vue-cal - calendar component. Works with build step or script link. Thread.
  • vue-canvas-knob - gauge/knob.
  • 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
  • vgauge - a Vue wrapper around GaugeJS. Can be used without a build step by including via script tag. 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.
  • vue3-sfc-loader. Load .vue files directly. Vue v2 & v3. Example.

Charting

  • 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.
  • 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-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. Urgh - setting the chart canvas background colour for ChartJS is horrid!

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.

Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.

Clone this wiki locally