UI quasar node red

Hi! is there any way to add a quasar framework as the ui for node-red ? i looked into uibuilder but it seems (from my reading) it dont. I want to add the msg.object to the quasar UI i made to display it with gauges.

PS: node red dashboard is not enough in terms of functionality

1 Like

Based on fact that search of word quasar gives exactly 1 result I would bet that nobody ever had any success on that topic. So you can be the first. Do it. And share the results.

1 Like

As their page mentions it is built using VueJS I'd be surprised if it can't be made to work via the ui-builder - just that no-one has - or no-one has admitted to it yet. So as @hotNipi says - go for it and let us know how you get on.

1 Like

Hehe, not the answer i hoped for ^^. But thank you for answering. i Sure will

My vote ***** to Quasar as an alternate UI for a Node-RED Dashboard.
I'm just born today to node-red-dashboard and as Quasar dev we should definitely dive into node red docs to evaluate what's possible and to make it. I found Dashboard doc a bit sparse or maybe I didn't get it yet.
I am ready to contribute to such a project…

I didn't see this when you originally posted, I've been crazy busy with work so haven't had much time or energy for Node-RED.

It is almost certain that it will work with uibuilder as I designed it to work with any framework. I've not found one yet that it won't work with.

It is easy to have a go and wont take you long. Install the framework via a uibuilder node so that uibuilder starts serving up the library. Find the actual file(s) that you need to include in your own front-end code (index.html) and then rework the default uibuilder template code around the framework.


Actually, I've just looked at the home page and realised that I did look at Quasar when I was building v2 of uibuilder. At the time, bootstrap-vue seemed like a better fit because of its simplicity for getting started and I seem to remember that I had some problems getting Quasar to work - can't remember why now though.

It may also have been a reliance on using webpack which makes life complicated when you only want to do something simple. I can see now though that it seems to have improved its documentation.

You should be able to easily adapt the instructions on this page to work with uibuilder:

In fact, I'd recommend not installing it at all to begin with, use the CDN version as mentioned on that page. From the default uibuilder template index.html, simply strip out the bootstrap-vue references and put in the Quasar ones.

It is a massive project to build something like Dashboard using a different framework. Even building uibuilder was hard enough.

As Dashboard works for the majority of people and does just enough (actually quite a bit more), there is probably little appetite. I know that Dave (who currently does much of the maintenance on Dashboard) would like to replace Angular with something else but the work involved means that it is a very, very long way down the queue I think.

So I fear that it needs more than "contribute" but rather a large investment of time and effort.

If you wanted to contribute, perhaps you could start by doing a write up of how to get Quasar working with uibuilder? That should be a much smaller task. Once that is done, I'd be happy to discuss what might be needed to expand on some of the things that uibuilder needs to see if you wanted to contribute to that?


Just to note that Quasar is very similar in concept to bootstrap-vue. It is an extension to VueJS. It just uses Material Design instead of Bootstrap for its design hints.

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