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

**URL:** <https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [18 April 2025 10:35 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633 "2025-04-18T10:35:58Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![JT3DAI](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jt3dai/32/100256_2.png) [@JT3DAI](https://discourse.nodered.org/u/JT3DAI)\
**Post date:** [18 April 2025 10:35 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/1 "2025-04-18T10:35:58Z")

</div>

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

```auto
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

```auto
{{msg.template}}

```

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

Thanks in advance

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 April 2025 11:21 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/2 "2025-04-18T11:21:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JT3DAI](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jt3dai/32/100256_2.png) [@JT3DAI](https://discourse.nodered.org/u/JT3DAI)\
**Post date:** [18 April 2025 11:37 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/3 "2025-04-18T11:37:06Z")

</div>

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?

```auto
{{{msg.template}}}

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [18 April 2025 11:39 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/4 "2025-04-18T11:39:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JT3DAI](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jt3dai/32/100256_2.png) [@JT3DAI](https://discourse.nodered.org/u/JT3DAI)\
**Post date:** [18 April 2025 11:42 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/5 "2025-04-18T11:42:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [18 April 2025 14:02 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/6 "2025-04-18T14:02:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JT3DAI](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jt3dai/32/100256_2.png) [@JT3DAI](https://discourse.nodered.org/u/JT3DAI)\
**Post date:** [18 April 2025 15:39 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/7 "2025-04-18T15:39:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [18 April 2025 18:31 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/8 "2025-04-18T18:31:12Z")

</div>

> [@JT3DAI](#):
>
> 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?

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

```auto
<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](https://dashboard.flowfuse.com/)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 April 2025 09:30 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/9 "2025-04-25T09:30:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JT3DAI](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jt3dai/32/100256_2.png) [@JT3DAI](https://discourse.nodered.org/u/JT3DAI)\
**Post date:** [25 April 2025 09:53 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/10 "2025-04-25T09:53:49Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 April 2025 10:13 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/11 "2025-04-25T10:13:54Z")

</div>

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](https://flowfuse.com/), which has full Node-RED version control built-in.

---

<div class="post-metadata">

**Author:** ![JT3DAI](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jt3dai/32/100256_2.png) [@JT3DAI](https://discourse.nodered.org/u/JT3DAI)\
**Post date:** [25 April 2025 10:21 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/12 "2025-04-25T10:21:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 April 2025 12:53 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/13 "2025-04-25T12:53:00Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/17391b4371fe8356b2724a0436ca4691ba5f81a0.png)

or heading there directly via [https://play.vuetifyjs.com/](https://play.vuetifyjs.com/)

Sorry for the inconvenience.

---

<div class="post-metadata">

**Author:** ![JT3DAI](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jt3dai/32/100256_2.png) [@JT3DAI](https://discourse.nodered.org/u/JT3DAI)\
**Post date:** [25 April 2025 13:01 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/14 "2025-04-25T13:01:38Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [25 April 2025 20:23 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/15 "2025-04-25T20:23:45Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![JT3DAI](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jt3dai/32/100256_2.png) [@JT3DAI](https://discourse.nodered.org/u/JT3DAI)\
**Post date:** [28 April 2025 08:08 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/16 "2025-04-28T08:08:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 April 2025 10:14 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/17 "2025-04-28T10:14:38Z")

</div>

> [@JT3DAI](#):
>
> Presume it makes sense to go with either Dashboard 2.0 or UIBUILDER and not a hybrid approach?

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, .... 🙂 Whatever is best for your projects.

---

<div class="post-metadata">

**Author:** ![JT3DAI](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jt3dai/32/100256_2.png) [@JT3DAI](https://discourse.nodered.org/u/JT3DAI)\
**Post date:** [28 April 2025 10:36 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/18 "2025-04-28T10:36:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [28 May 2025 10:37 UTC](https://discourse.nodered.org/t/use-function-node-to-read-vue-file-contents-into-dashboard-2-0-ui-template/96633/19 "2025-05-28T10:37:13Z")

</div>

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