# 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:** 1\
**Showing post:** 3

<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}"…

---

_[View the full topic](https://discourse.nodered.org/t/ui-builder-vue-cli/24783)._