Nubie - using components in uibuilder

General
1

Hi,

Q: What is the most appropriate way to approach adding toast-ui/calendar to a basic uibuilder app?

I'm looking for some help/guidance re using components in uibuilder. I understand that "there are many ways" and "it depends" based on what the component author has provided. I'm struggling to:

  • Know how to identify the most appropriate way to incorporate a component into a uibuilder "app".
  • How to actually do it.

So far my exposure to VueJS & bootstrap-vue has only been via uibuilder default examples, and modifying them to create basic UIs/reports. I have managed to hack some ChartJS graphs into my design via CDN but I'm somewhat sceptical of my approach. I'd like to stamp out potential bad habits early, and using toast-ui/calendar is as good a place to start as any. I hope to eventually create overlapping schedules and present them as a weekly view/report.

All tutorials I can find seem to assume a larger IDE/environment, oblivious to uibuilder/NodeRED environment. (I.e. Generic VueJS tutorials using Visual Code, templates, etc.) Translating that guidance into something that works with a "uibuilder app" is my challenge.

My environment:
NodeRED v2.1.4
NodeJS v14.19.0
uibuilder v4.1.4

I've been using uibuilder v4.x.x and I see v5.x.x has been released. I'll have to read the changelog closely before updating my Prod environment, but I can happily update Dev to v5.x.x if that makes my goal easier to achieve. I haven't been using webpack or anything like that. I'd prefer to avoid the additional build-phase if possible.

Yours,
Annuello.

2

Well done, a good start indeed.

You are already way ahead of many people.

A new-one on me, I'd not seen toast-ui before.

Yes, I think that using v5 will certainly be easier overall. Hopefully not too much pain to switch over, just take a careful look of the breaking changes. The important one is that you will need to reinstall any front-end libraries I'm afraid because I moved where they install to prevent issues and overlaps with Node-RED itself and to give a lot more flexibility.

You should find v5 a lot more robust though and it is opening up a vast array of new possibilities like the web components I've been working on.

This is where things start to get a bit trickier. Unfortunately, far too many of the examples on the web assume you already have a build environment. The reason I chose Vue over REACT in the past was because it is pretty well mandatory to use a build step with REACT but it should be optional with Vue. Sadly though, many Vue components didn't get the memo and don't properly package the component so that it can be used directly. And there is no real way of knowing up-front without reading through the code or, if you are lucky, the docs might tell you.

There is a webpack example though on the WIKI and the tech docs are slowly including more info about build steps. So while it is yet another thing to learn, once you've got a working setup, you can simply replicated to new projects.

But this is also the reason that I'm trying to even leave Vue behind and move to Web Components. Web Components are used natively and so don't need a build.

Yes, that is too often the case I'm afraid. Though using VSCode for editing is nicer than the uibuilder code editor even when using Monaco rather than ACE. VSCode has some extensions from Microsoft that let you edit code remotely on the server via SSH which makes it really easy to do.

As mentioned, if you do find yourself needing a build step, try the WIKI but also look at the tech docs. The general guidance is at Optimise & transpile (build) (totallyinformation.github.io) and you can find specific instructions for using Snowpack here Snowpack as build tool (totallyinformation.github.io)

Most tutorials will use Webpack but Snowpack is rather easier to use and was originally written by the author of VueJS so they work well together.

Just ignore any dev server that might be provided as they mostly won't work with Node-RED so just use the build step.

When doing a build step, you generally put your source code in the src folder as normal but have the output go to the dist folder. So in uibuilder, you use the Advanced tab in the uibuilder Editor panel and switch folders.

1 Like
3

I struggled to get toast-ui/calendar working so I went on another hunt for a suitable alternative. The search term I should have used for my use case is "scheduler". This lead me to Vue Cal - Documentation which has been moderately straight forward to get up and running in my uibuilder instance.

So while it doesn't exactly solve my quest to have a better all-round understanding of VueJS and best practice re component use, vue-cal does allow me to continue work toward another milestone in my project.

Yours,
Annuello.

1 Like
4

Thanks for sharing.

I've created a new page in the WIKI for keeping track of Vue components that work well with uibuilder and Node-RED.

Vue components that work with uibuilder easily · TotallyInformation/node-red-contrib-uibuilder Wiki (github.com)

5

You can also add Primevue (UMD). I have successfully tested it.

6

Thanks :slight_smile: I was trying to think of that one but wasn't focused because actual work keeps getting in the way :grimacing:

i'll add it now.

7

Just to point out: I tested latest versions of Primevue and Quasar, both with Vue 3.

1 Like
8

The page is updated with both of those.

9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.