# How to include and launch node-red from javascript framework like Vue.js etc?

**URL:** <https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261>\
**Category:** General\
**Created:** [7 August 2020 11:02 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261 "2020-08-07T11:02:21Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![DevanandBaipotu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/devanandbaipotu/32/27138_2.png) [@DevanandBaipotu](https://discourse.nodered.org/u/DevanandBaipotu)\
**Post date:** [7 August 2020 11:02 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/1 "2020-08-07T11:02:21Z")

</div>

how to include and luanch the node-red from javascript framework like vue

---

<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:** [9 August 2020 16:24 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/2 "2020-08-09T16:24:31Z")

</div>

Hi and welcome to the forum.

Perhaps you could explain more about what you are wanting to achieve?

Node-RED flows run on the back-end (server) whereas the Editor and things like the Dashboard and uibuilder work in the front-end (browser).

It is perfectly possible to build a service that lets you start back-end services from a web page but to do so, you need a communications channel and that needs a service on the server. So you see that you end up in a circular argument. You can also use Node-RED to provide the comms channel but it needs to be running to do so - you can stop/start other services, and even node-red itself (I have a flow that kills node-red, the systemd OS service will restart it).

---

<div class="post-metadata">

**Author:** ![DevanandBaipotu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/devanandbaipotu/32/27138_2.png) [@DevanandBaipotu](https://discourse.nodered.org/u/DevanandBaipotu)\
**Post date:** [11 August 2020 05:57 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/3 "2020-08-11T05:57:28Z")

</div>

Hi,

Atually, I created a vue app and in that app I was installed node-red with npm.  
I need to get the node-red editor in my vue component. But I dont know how to integrate and lauch the node-red. Could you please help me on this.

in node-red doc, I am seeing one thing like " Embedding node-red into existing app " [https://nodered.org/docs/user-guide/runtime/embedding](https://nodered.org/docs/user-guide/runtime/embedding). But i didn't get any thing from that

---

<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:** [11 August 2020 08:44 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/4 "2020-08-11T08:44:52Z")

</div>

Thing is that Node-RED is primarily a _server_ whereas VueJS is client-side.

The embedding documentation shows you how to embed Node-RED into an existing _Node.js_ application. That is possible since Node.js is the service that runs Node-RED anyway if you run it directly,

So I'm not sure what you've done so far since I don't know of any way to run npm from VueJS. npm is also server side not client.

---

<div class="post-metadata">

**Author:** ![DevanandBaipotu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/devanandbaipotu/32/27138_2.png) [@DevanandBaipotu](https://discourse.nodered.org/u/DevanandBaipotu)\
**Post date:** [11 August 2020 13:13 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/5 "2020-08-11T13:13:07Z")

</div>

Okay.. Is that possible to integrate and launch Node-red on Vue app or not ? If yes, let me know the process please

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [11 August 2020 21:11 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/6 "2020-08-11T21:11:00Z")

</div>

I don't think we understand exactly what you want to do. Please explain in more detail what you mean. What s/w is running on what machines? What do you want the user to see?

---

<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:** [11 August 2020 22:41 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/7 "2020-08-11T22:41:09Z")

</div>

> [@DevanandBaipotu](#):
>
> Is that possible to integrate and launch Node-red on Vue app or not

I can't think that it would be possible since you would have to replicate much of node.js's capability in the browser. Might be possible but I've no idea how.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [12 August 2020 07:27 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/8 "2020-08-12T07:27:29Z")

</div>

Perhaps what @DevanandBaipotu is actually trying to do is show the node-red editor and/or dashboard in the browser inside a Vue app.

---

<div class="post-metadata">

**Author:** ![DevanandBaipotu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/devanandbaipotu/32/27138_2.png) [@DevanandBaipotu](https://discourse.nodered.org/u/DevanandBaipotu)\
**Post date:** [13 August 2020 14:07 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/9 "2020-08-13T14:07:19Z")

</div>

yes Colin, I need to show the node-red editor in the browser inside a vue app.  
Is that possible with/without using node.js ?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [13 August 2020 18:53 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/10 "2020-08-13T18:53:05Z")

</div>

You are not giving much to go on.

You can use an iframe to displaythe node-red editor in your app, however this assumes that you have node-red running as a server somewhere else.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [14 August 2020 07:59 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/11 "2020-08-14T07:59:49Z")

</div>

Where are you serving the vue app from?

---

<div class="post-metadata">

**Author:** ![DevanandBaipotu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/devanandbaipotu/32/27138_2.png) [@DevanandBaipotu](https://discourse.nodered.org/u/DevanandBaipotu)\
**Post date:** [15 August 2020 12:11 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/12 "2020-08-15T12:11:00Z")

</div>

I want to run node-red in node.js and want to display the node-red editor in Vue app

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [15 August 2020 12:30 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/13 "2020-08-15T12:30:24Z")

</div>

As @bakman2 said, you can easily run the node-red editor in an iframe in the Vue app. Just set the url for the iframe to be that for the node red server.

---

<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:** [14 October 2020 12:30 UTC](https://discourse.nodered.org/t/how-to-include-and-launch-node-red-from-javascript-framework-like-vue-js-etc/31261/14 "2020-10-14T12:30:41Z")

</div>

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