# UI builder Vue CLI

**URL:** <https://discourse.nodered.org/t/ui-builder-vue-cli/24783>\
**Category:** General\
**Created:** [14 April 2020 02:32 UTC](https://discourse.nodered.org/t/ui-builder-vue-cli/24783 "2020-04-14T02:32:45Z")\
**Posts on this page:** 4\
**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:** [14 April 2020 02:32 UTC](https://discourse.nodered.org/t/ui-builder-vue-cli/24783/1 "2020-04-14T02:32:45Z")

</div>

Does anyone have experience adding a Vue Cli structure to uibuilder, or do i need to use the traditonal way ?

---

<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:47 UTC](https://discourse.nodered.org/t/ui-builder-vue-cli/24783/2 "2020-04-16T00:47:14Z")

</div>

Seems to be a duplicate question?

You can use the cli if you like but you need to understand the uibuilder folder structure. Deploy a uibuilder node and then look at the folders it creates. As long as you stick with the `~/.node-red//uibuilder/<url>/` folder structure and put your source code in the `src` folder and/or your "built" code into the `dist` sub folder, it will all work.

If you like, you could create a completely separate folder structure for your source code as long as the built code ends up in either of the two sub-folders, everything should work just fine. Either configure webpack to build to the correct `dist` sub-folder or replace that folder with a soft-link to the output folder of your webpack script. Lots of choice.

---

<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:** [16 April 2020 07:33 UTC](https://discourse.nodered.org/t/ui-builder-vue-cli/24783/3 "2020-04-16T07:33:27Z")

</div>

Have a look at this example, it's my first version but just to get an idea:

> [@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:** [15 June 2020 07:33 UTC](https://discourse.nodered.org/t/ui-builder-vue-cli/24783/4 "2020-06-15T07:33:31Z")

</div>

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