# Uibuilder v2: Dynamically loading .vue files

**URL:** <https://discourse.nodered.org/t/uibuilder-v2-dynamically-loading-vue-files/14455>\
**Category:** Share Your Projects\
**Created:** [18 August 2019 15:57 UTC](https://discourse.nodered.org/t/uibuilder-v2-dynamically-loading-vue-files/14455 "2019-08-18T15:57:12Z")\
**Posts on this page:** 4\
**Page:** 1

<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 August 2019 15:57 UTC](https://discourse.nodered.org/t/uibuilder-v2-dynamically-loading-vue-files/14455/1 "2019-08-18T15:57:12Z")

</div>

Hi all,

Another WIKI article for uibuilder v2. This time on how to dynamically load `.vue` single file components without needing a build step.

While build steps will be more efficient, lots of things that we do with Node-RED don't really need that and using a loader rather than a build step makes things a LOT easier 😄

The WIKI entry includes a full example flow and front-end code for you to copy/paste - enjoy!

> **[TotallyInformation/node-red-contrib-uibuilder](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Dynamically-load-.vue-files-without-a-build-step)**
>
> Easily create web UI's for Node-RED using any (or no) front-end library. VueJS and bootstrap-vue included but change as desired. - TotallyInformation/node-red-contrib-uibuilder

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [18 August 2019 16:14 UTC](https://discourse.nodered.org/t/uibuilder-v2-dynamically-loading-vue-files/14455/2 "2019-08-18T16:14:03Z")

</div>

Like I mentioned in DM, I actually have a couple generic components ready for usage that work well with vue-bootstrap. Others that can be made generic without much work. From dark theme menu bars to switch components, to different chart components. Guess I’ll be switching them out of the private project repos they’re in, make them more generic and start a common component repository for them.

---

<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 August 2019 17:16 UTC](https://discourse.nodered.org/t/uibuilder-v2-dynamically-loading-vue-files/14455/3 "2019-08-18T17:16:04Z")

</div>

And I forgot to mention that you can use the new `common` folder with this library to share `.vue` files between uibuilder instances. See the comments in `index.js` for how to reference them.

---

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [8 September 2020 22:01 UTC](https://discourse.nodered.org/t/uibuilder-v2-dynamically-loading-vue-files/14455/5 "2020-09-08T22:01:18Z")

</div>

Did you ever find an efficient way to share your generic components? I am just getting started, but have been able to use examples from elsewhere and would be interested in the switch component in particular that you mentioned.