Hi i've installed the uibuilder node_module and have the default page up and running. I have also extended it to several pages using bootstrap-vue nav bar and other enhancements. each page has its own js file. I would now like to add a vue based toggle-switch of which there are a number. i've insta…

@greenembrace Are you using a build step to compile the files down to a single bundle, or are you loading them from the HTML? In case of the second, you have to rely on the browser capabilities of ES6 imports and modules, which aren’t too great yet. Support for a build step in the node is coming in …

Also have a look at my WIKI entries on chart tools and, in particular, the http-vue-loader. You will see that there are alternatives to the import method that let you work without a build step. http-vue-loader lets you load .vue files without a build step, the chart examples show you how to load c…

Thanks for your comments, i'm trying to digest them. I have tried not to modify the default scripts to much as i'm learning as i go. changing one thing at a time and making sure it works. I'm loading from house.html, this is the bottom for the file: <!-- REQUIRED: Sets up Socket listeners and …

[image] greenembrace: vue-enhanced-check The first thing to do is to comment out all of the import and export statements and try adding the following to your main vue app code: /** Load external component files */ components: { 'enhanced-check': EnhancedCheck, }, // --- E…

By the way, have you checked out the features of bootstrap-vue? That has some really good switches, etc with the added advantage that you don't need to load anything extra. Form Checkbox | Components | BootstrapVue Custom checkbox input and checkbox group to replace the browser default …

Hi thank-you, I will followup on all your comments. I see great potential in your hard work. and yes i have looked through the components of bootstrap-vue. i'm after a toggle like switch (for lights) that's one colour for ON and another for OFF so users can clearly see what's happening. I will post…

[image] greenembrace: after a toggle like switch (for lights) that's one colour for ON and another for OFF so users can clearly see what's happening. I have one of those on my laptop, Apple settings style with bootstrap colours. Used it in vue projects before. Was planning on uploading when I…

Have a look at: [image] Uibuilder: question how to build a switch General I'm trying to build a switch with uibuilder (bootstrap-vue). My goal is to be able to set the switch on 2 browsers (iPhone and mac) and from node-red (uibuilder input). [uibuilder1] [{"id":"f38da1…

Thanks afelix that reply is rich in information. I will follow those thoughts up. kind regards

Thanks also cflurin I will also look @ your work.

Node-RED

Node-RED Forum

Uibuilder - extra vue enhancements

General

cflurin 20 August 2019 09:15 9

Have a look at:

I'm still working on it.

Topic		Replies	Views
Uibuilder import data from local js file and export to it General uibuilder	11	383	25 April 2023
Front-end based on uibuilder: 1. component acc-switch.vue Share Your Projects	3	2059	31 August 2019
Uibuilder uibuilder.iife.js errors General uibuilder	10	311	27 April 2023
Uibuilder v2: Now published to npm under the @next tag Share Your Nodes	27	1838	6 August 2019
Uibuilder and vue-bottom-navigation General uibuilder	13	795	7 February 2022

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Uibuilder - extra vue enhancements

Related topics