-
-
Notifications
You must be signed in to change notification settings - Fork 88
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.
- 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).
- Quasar - comprehensive Vue v3 framework that follows Google Material Design. The UMD variant works without a build-step.
- vue-cal - calendar component. Works with build step or script link. Thread.
- vue-canvas-knob - gauge/knob.
- Embedded video player - not really a Vue component but it works anyway.
- 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.
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.
-
Walkthrough 🔗 Getting started
-
In Progress and To Do 🔗 What's coming up for uibuilder?
-
Awesome uibuilder Examples, tutorials, templates and references.
-
How To
- How to send data when a client connects or reloads the page
- Send messages to a specific client
- Cache & Replay Messages
- Cache without a helper node
- Use webpack to optimise front-end libraries and code
- How to contribute & coding standards
- How to use NGINX as a proxy for Node-RED
- How to manage packages manually
- How to upload a file from the browser to Node-RED
-
Vanilla HTML/JavaScript examples
-
VueJS general hints, tips and examples
- Load Vue (v2 or v3) components without a build step (modern browsers only)
- How to use webpack with VueJS (or other frameworks)
- Awesome VueJS - Tips, info & libraries for working with Vue
- Components that work
-
VueJS v3 hints, tips and examples
-
VueJS v2 hints, tips and examples
- Dynamically load .vue files without a build step (Vue v2)
- Really Simple Example (Quote of the Day)
- Example charts using Chartkick, Chart.js, Google
- Example Gauge using vue-svg-gauge
- Example charts using ApexCharts
- Example chart using Vue-ECharts
- Example: debug messages using uibuilder & Vue
- Example: knob/gauge widget for uibuilder & Vue
- Example: Embedded video player using VideoJS
- Simple Button Acknowledgement Example Thanks to ringmybell
- Using Vue-Router without a build step Thanks to AFelix
- Vue Canvas Knob Component Thanks to Klaus Zerbe
-
Examples for other frameworks (check version before trying)
- Basic jQuery example - Updated for uibuilder v6.1
- ReactJS with no build - updated for uibuilder v5/6
-
Examples for other frameworks (may not work, out-of-date)
-
Outdated Pages (Historic only)
- v1 Examples (these need updating to uibuilder v2/v3/v4/v5)