# Node Red, Uibuilder, and http-vue-loader

**URL:** <https://discourse.nodered.org/t/node-red-uibuilder-and-http-vue-loader/32654>\
**Category:** General\
**Created:** [9 September 2020 17:15 UTC](https://discourse.nodered.org/t/node-red-uibuilder-and-http-vue-loader/32654 "2020-09-09T17:15:46Z")\
**Posts on this page:** 8\
**Page:** 1

<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:** [9 September 2020 17:15 UTC](https://discourse.nodered.org/t/node-red-uibuilder-and-http-vue-loader/32654/1 "2020-09-09T17:15:46Z")

</div>

I have been following the example from the uibuilder wiki on how to use [http-vue-loader](https://github.com/FranckFreiburger/http-vue-loader) to use components without a build step. It works very well and am pleased with the results. I have been working my way through some of the examples from the [Bootstrap Vue site](https://bootstrap-vue.org/docs/components/alert), but have one question.

In their examples like the overview one for alerts on the page I linked to, start the script with `export default {`. This doesn't work, but when I substitute in `module.exports = {` for it it works perfectly inside the .vue file I created. I made this modification based on the uibuilder wiki example.

My question (being new to Javascript and Vue), is what am I changing by doing this substitution and why does it fix it?

Obviously not super important since it works and works consistently, but I wouldn't mind getting from a cut and paste hero to actually understanding why I am doing what I am doing.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [9 September 2020 19:32 UTC](https://discourse.nodered.org/t/node-red-uibuilder-and-http-vue-loader/32654/2 "2020-09-09T19:32:10Z")

</div>

uibuilder provides a websocket to/from node-red, you build a website using bootstrap vue.

In the bootstrap vue documentation it is assumed that you run bootstrap-vue as a module of nodejs and use a compiler/bundler/build-step that will translate (transpile as they call it) into code that works in the browser, but that is not what you are doing with uibuilder - it runs directly in the browser. (note that you can use a build-step to make it work like that, but that is a different story).

Note the description of http-vue-loader:

_Load .vue files directly from your html/js. **No node.js environment, no build step.** _

This is the reason why you need to use `module.exports`

---

<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:** [9 September 2020 19:36 UTC](https://discourse.nodered.org/t/node-red-uibuilder-and-http-vue-loader/32654/3 "2020-09-09T19:36:48Z")

</div>

Following you so far. One follow-up. If I was ever to switch from [http-vue-loader](https://github.com/FranckFreiburger/http-vue-loader) to actually doing a build approach (can't imagine I actually would do so), then would the `module.exports = {` version be required?

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [9 September 2020 19:41 UTC](https://discourse.nodered.org/t/node-red-uibuilder-and-http-vue-loader/32654/4 "2020-09-09T19:41:58Z")

</div>

If you go to a build step approach, the whole setup will be different, which is also why you see a `src` and `dist` directory, as you would create the code in src, build/compile the code and the complete project will end up in the dist directory. In that case you will switch to the export default for your code.

---

<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:** [9 September 2020 20:23 UTC](https://discourse.nodered.org/t/node-red-uibuilder-and-http-vue-loader/32654/5 "2020-09-09T20:23:28Z")

</div>

> [@tmichaeltx](#):
>
> would the `module.exports = {` version be required?

If using a build step, you have the option to use the latest JavaScript standards by including something called a "transpiler". You will sometimes see references to a tool called "babel" as that is the most popular transpiler. Babel is able to convert from the very latest JavaScript syntax to a more widely supported, slightly older syntax so that your code can be used with more Browsers.

The `export` statement is one of those new standards. `module.exports` is the older syntax. Your build step would use Babel to translate one to the other. You have just done it by hand. Well done! 🕶

When looking at VueJS components, you might want to look for clues that the authors haven't been lazy (and purely relied on a build step) but that they have engineered their components so that they work in multiple ways. Documentation showing a couple of different ways to use the component will be the most obvious clue but do go and look at the code itself so that you build up an understanding of what good looks like (and bad for that matter). All of the examples I've given in the WIKI (other than those demonstrating the build step itself) should be that kind of module.

---

<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:** [9 September 2020 20:54 UTC](https://discourse.nodered.org/t/node-red-uibuilder-and-http-vue-loader/32654/6 "2020-09-09T20:54:12Z")

</div>

Thanks for the info. I am seeing how this (uibuilder) is going to allow me to build what I want.

---

<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:** [9 September 2020 21:13 UTC](https://discourse.nodered.org/t/node-red-uibuilder-and-http-vue-loader/32654/7 "2020-09-09T21:13:03Z")

</div>

The sky's the limit - actually, with uibuilder, even the sky isn't the limit!!

Have fun.

---

<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:** [23 September 2020 21:13 UTC](https://discourse.nodered.org/t/node-red-uibuilder-and-http-vue-loader/32654/8 "2020-09-23T21:13:04Z")

</div>

Closed on 23 September 2020 21:13 UTC

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