# Can you use Vue cli to make front end in with the UIbuilder node?

**URL:** <https://discourse.nodered.org/t/can-you-use-vue-cli-to-make-front-end-in-with-the-uibuilder-node/24889>\
**Category:** General\
**Created:** [15 April 2020 16:50 UTC](https://discourse.nodered.org/t/can-you-use-vue-cli-to-make-front-end-in-with-the-uibuilder-node/24889 "2020-04-15T16:50:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Beefy\_carrot](https://avatars.discourse-cdn.com/v4/letter/b/ccd318/32.png) [@Beefy\_carrot](https://discourse.nodered.org/u/Beefy_carrot)\
**Post date:** [15 April 2020 16:50 UTC](https://discourse.nodered.org/t/can-you-use-vue-cli-to-make-front-end-in-with-the-uibuilder-node/24889/1 "2020-04-15T16:50:09Z")

</div>

does anyone know ? and if, how do you add a cli project to the ui builder

---

<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:** [16 April 2020 00:33 UTC](https://discourse.nodered.org/t/can-you-use-vue-cli-to-make-front-end-in-with-the-uibuilder-node/24889/2 "2020-04-16T00:33:04Z")

</div>

You can but you need to understand the folder structure that is used so that you create your code in the right place.

Possibly the easiest approach is to add the node and commit in Node-RED so that the folders are created. Create your source code separately in whatever folder you like. Then replace the folder that uibuilder has created with a _softlink_ to your own source.

uibuilder's folder structure is well documented.

---

<div class="post-metadata">

**Author:** ![Beefy\_carrot](https://avatars.discourse-cdn.com/v4/letter/b/ccd318/32.png) [@Beefy\_carrot](https://discourse.nodered.org/u/Beefy_carrot)\
**Post date:** [17 April 2020 15:43 UTC](https://discourse.nodered.org/t/can-you-use-vue-cli-to-make-front-end-in-with-the-uibuilder-node/24889/3 "2020-04-17T15:43:23Z")

</div>

Is there any tutorial on that ?

---

<div class="post-metadata">

**Author:** ![cflurin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cflurin/32/29_2.png) [@cflurin](https://discourse.nodered.org/u/cflurin)\
**Post date:** [17 April 2020 16:29 UTC](https://discourse.nodered.org/t/can-you-use-vue-cli-to-make-front-end-in-with-the-uibuilder-node/24889/4 "2020-04-17T16:29:32Z")

</div>

Here is an example:

> [@Front-end based on uibuilder: 1. component acc-switch.vue](https://discourse.nodered.org/t/front-end-based-on-uibuilder-1-component-acc-switch-vue/14962):
>
> [acc-switch] Flow: [{"id":"31554538.d666ba","type":"uibuilder","z":"96248ad2.2c3df8","name":"","topic":"","url":"uiswitch","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":380,"y":200,"wires":[["151b60e8.47977f","3bf74e79.a02822"],["54f1123c.e47ecc"]]},{"id":"4b99c284.31f20c","type":"inject","z":"96248ad2.2c3df8","name":"true","topic":"","payload":"{\"name\":\"at\_home\",\"service\_name\":\"at\_home\",\"characteristic\":\"On\",\"value\":true}"…

---

<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:** [16 June 2020 16:29 UTC](https://discourse.nodered.org/t/can-you-use-vue-cli-to-make-front-end-in-with-the-uibuilder-node/24889/5 "2020-06-16T16:29:35Z")

</div>

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