Use function node to read vue file contents into dashboard 2.0 ui template

Dashboard
1

Hi guys,

Using node-red 4.08

I am reading a file that contains a vue template file (template, script & style sections) using a function node. I then connect that to ui template node. Any examples on how to do this. When I do it I just get the raw text from the file - it's not rendered html

So to clarify I have this code in a function node

const fileContent = fs.readFileSync('/data/code/templates/test.vue', 'utf8');
msg.template = fileContent; // not sure if this is correct or should I be using msg.payload
return msg;

and I put this into the ui template node

{{msg.template}}

but all I see is the raw text appearing in the browser

Thanks in advance

2

I think that you usually need triple rather than double braces for Dashboard to treat the content as dynamic?

3

Thanks for the reply. I tried this but it didn't work. Console log came back with an error when I tried. Any other suggestions? I presume it is possible?

{{{msg.template}}}
4

Sorry, not sure with D2 as I don't really use it. I've loaded .vue files in the browser before, there are libraries that let you do that.

5

Thanks anyway - maybe someone else might be able to shed some light on it

6

Instead of mustache formatting, you can read the message using a socket listener, and then render it as needed

7

Sorry - don't understand how to implement that. So if I read the contents of the file do I connect it to a socket out node?? Could you expand your answer?

Thanks

8

In the JavaScript area of the ui-template, set a message listener as follows:

<script>
export default {
    // data() {},
    // methods: {},
    mounted() {
        // Socket listener
        this.$socket.on('msg-input:' + this.id, function(msg) {
            if (msg)
            {
                // do whatever you want with the message, for example:
                alert("Received payload: "+msg.payload);
            }
        });
    },
    //unmounted() {}
}
</script>

You have detailed documentation here

9

We don't support dynamic loading of a full vue component at the client-side at the moment, just the individual elements. This is mostly a security concern, we don't want to just take received code and run it all unvetted.

10

Ahh - understandable - thanks Joe. What I am trying to do is off load the code for a ui-template so I can use a proper code editor like visual studio code and source control. It's very tedious editing in the ui-template itself if the code is any way complex. What's the best practice for this?

11

Unfortunately, right now, it's old-school copy + paste. I know that @Steve-Mcl was investigating Vue support inside the Node-RED Editor, but I'm not sure on the status of that one, Steve - can you share an update please?

For version control, I recommend FlowFuse, which has full Node-RED version control built-in.

12

Planning to move over to flowfuse once we get the base code working, but it's really the editing in a ui-template that is is slowing us down at the moment. Interested to see how far Steve has got

1 Like
13

I appreciate the difficulty and wish I had an immediate solution to the lack of better vue support in the ui-template node, but it is unfortunately not a simple matter. I will be looking at this once more (now that dashboard 2 is getting super popular) but in the meantime, my suggestion is to use the vuetify playground editor which has both vue and vuetify support. It uses Monaco (i.e. the same editor we use and the same editor VSCode uses)

You can find it by clicking the vuetify icon button above every example:

image
image926Ă—216 11.8 KB

or heading there directly via https://play.vuetifyjs.com/

Sorry for the inconvenience.

14

Thanks for the update Steve - appreciate it's not a simple implementation.

@joepavitt wonder if it would be possible to have the ability to dynamically load the ui templates when just in development mode. When in production mode you wouldn't have this option? Could something like this work? Again may not be that simple to implement!

15

Just a quick reminder that if you don't need the rest of Dashboard, you can use Vue and Vuetify quite happily with UIBUILDER. There are examples for dynamic loading of .vue files in the WIKI. UIBUILDER lets you work quite happily in VS Code (or other IDE's).

16

Thanks - I'll check it out. Presume it makes sense to go with either Dashboard 2.0 or UIBUILDER and not a hybrid approach?

17

I know that some people have used both D1 and UIBUILDER - probably more as a transition state than anything else. However, since the Dashboards and UIBUILDER are both web servers, it is certainly possible to use both in parallel.

I used to occasionally us D1 for prototyping something prior to a build in UIBUILDER. But as UIBUILDER progressed, I found that less and less useful.

I've not tried with D2. However, you should be able to use an iframe in a ui_template to include a UIBUILDER page. You should be able to do the same in reverse as well.

Of course, UIBUILDER's default CSS styles are very different to Vuetify's Material Design as the emphasis for UIBUILDER is on ease of use and minimising code but still allowing light/dark mode switching with sensible defaults. You can control a lot of UIBUILDER's styles with CSS variables should you need/wish to.

Or you can use Vue/Vuetify with UIBUILDER as well of course. Or REACT, or jQuery, .... :slight_smile: Whatever is best for your projects.

18

Thanks for the reply - will defo have a play around and see what makes most sense