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