# Uibuilder load components

**URL:** <https://discourse.nodered.org/t/uibuilder-load-components/48910>\
**Category:** General\
**Created:** [26 July 2021 07:51 UTC](https://discourse.nodered.org/t/uibuilder-load-components/48910 "2021-07-26T07:51:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![T3chn0](https://avatars.discourse-cdn.com/v4/letter/t/8e8cbc/32.png) [@T3chn0](https://discourse.nodered.org/u/T3chn0)\
**Post date:** [26 July 2021 07:51 UTC](https://discourse.nodered.org/t/uibuilder-load-components/48910/1 "2021-07-26T07:51:20Z")

</div>

Hi, i 'm trying to load a component lets say component.vue  
in the index.js i have added:

components:{  
'formlogin': httpVueLoader('formlogin.vue')  
},

also have installed in front end libraries and from console the vue-http-loader

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/9/a9e8d370a1d933015d25d139abff29b9e05d06ab.png)  
but i get errors saying that vue-http is not loaded or something

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b5ff81a9522e02b74d72148974ba79b2ff7189d6.png)

please help me!

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [26 July 2021 08:24 UTC](https://discourse.nodered.org/t/uibuilder-load-components/48910/2 "2021-07-26T08:24:49Z")

</div>

Hello .. @TotallyInformation has a Wiki article on the uibuilder github website describing how to load vue components with httpVueLoader.

[Dynamically load .vue files without a build step](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Dynamically-load-.vue-files-without-a-build-step)

Have you included the library in your index.html file ?

```auto
<!-- Loading from CDN -->
    <script src="https://unpkg.com/http-vue-loader"></script>

```

---

<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:** [26 July 2021 20:17 UTC](https://discourse.nodered.org/t/uibuilder-load-components/48910/3 "2021-07-26T20:17:49Z")

</div>

Also use the browsers network view to make sure that all of the libraries are actually loading.

---

<div class="post-metadata">

**Author:** ![T3chn0](https://avatars.discourse-cdn.com/v4/letter/t/8e8cbc/32.png) [@T3chn0](https://discourse.nodered.org/u/T3chn0)\
**Post date:** [26 July 2021 23:22 UTC](https://discourse.nodered.org/t/uibuilder-load-components/48910/4 "2021-07-26T23:22:53Z")

</div>

i've forgot this step but anyways not working...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/7/f71518d1be0ab5e5348eadfd8eedfdd37ef997c0.png)

---

<div class="post-metadata">

**Author:** ![T3chn0](https://avatars.discourse-cdn.com/v4/letter/t/8e8cbc/32.png) [@T3chn0](https://discourse.nodered.org/u/T3chn0)\
**Post date:** [26 July 2021 23:33 UTC](https://discourse.nodered.org/t/uibuilder-load-components/48910/5 "2021-07-26T23:33:33Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/186b6909347be2685e441dfb51e5a09538b3959a.png)  
YEAAAAAH!!! 😃

the solution for me was:  
//before the ./index.js  
1-   
2- Replace:  
export default {  
data() {.......

with:  
module.exports = {  
data() {.......

---

<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:** [24 September 2021 23:33 UTC](https://discourse.nodered.org/t/uibuilder-load-components/48910/6 "2021-09-24T23:33:45Z")

</div>

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