# First attempt with uibuilder

**URL:** https://discourse.nodered.org/t/first-attempt-with-uibuilder/64009
**Category:** Dashboard
**Tags:** uibuilder
**Created:** [16 June 2022 09:46 UTC](https://discourse.nodered.org/t/first-attempt-with-uibuilder/64009 "2022-06-16T09:46:06Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)
#### Post date: [16 June 2022 09:46 UTC](https://discourse.nodered.org/t/first-attempt-with-uibuilder/64009/1 "2022-06-16T09:46:06Z")

</div>

This is my first attempt with uibuilder, so I am trying to follow the example in the docs. I have suddenly faced my first problem.

I have installed vue and bootstrap-vue from uibuilder and load the template `TotallyInformation/uib-template-test` .

The web page is blank and in the console I see this message: `index.js:24 Uncaught ReferenceError: Vue is not defined`. Looking at the `index.html` code it reports: `<script src="../uibuilder/vendor/vue/dist/vue.min.js">` but I don't have any `vendor` folder in my uibuilder tree:

```auto
boss@SaltyRest:~/.node-red $ ll uibuilder/
total 36
drwxr-xr-x 6 boss boss 4096 Jun 16 11:38 .
drwxr-xr-x 9 boss boss 4096 Jun 16 11:30 ..
drwxr-xr-x 3 boss boss 4096 Jun 16 11:00 common
drwxr-xr-x 2 boss boss 4096 Jun 16 11:00 .config
drwxr-xr-x 16 boss boss 4096 Jun 16 11:38 node_modules
-rw-r--r-- 1 boss boss 876 Jun 16 11:38 package.json
-rw-r--r-- 1 boss boss 7606 Jun 16 11:38 package-lock.json
drwxrwxr-x 3 boss boss 4096 Jun 16 11:38 uitest

```

So, the code doesn't load the `vue.min.js` file and I'm stuck...

---

<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: [16 June 2022 10:13 UTC](https://discourse.nodered.org/t/first-attempt-with-uibuilder/64009/2 "2022-06-16T10:13:32Z")

</div>

Hello ..

What version of Vue have you installed ?  
Can you show us a screenshot of installed packages of the node's **Libraries** tab ?  
Most of the uibuilder templates are based on Vue 2 and that version ([vue@2.6.14](https://www.npmjs.com/package/vue/v/2.6.14)) should be installed instead of Vue 3 (which is now the default)

ps. the `vendor` path will be dynamically created by uibuilder and its not something you will see in your app's folders

ps2. have you also tried to load the **Simple Vue** template ? Does that work ?

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

---

<div class="post-metadata">

### Author: ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)
#### Post date: [16 June 2022 10:49 UTC](https://discourse.nodered.org/t/first-attempt-with-uibuilder/64009/3 "2022-06-16T10:49:32Z")

</div>

I have followed instructions in the docs, where it says just to type "vue" into the Library section of the node.

 ![Schermata 2022-06-16 alle 12.48.59](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/0/10e1ccb5b8f623efa56987dadcd95c33b6ebaa8c.png)

Very tough. The console error means that it doesn't find any Vue definition

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [16 June 2022 11:30 UTC](https://discourse.nodered.org/t/first-attempt-with-uibuilder/64009/4 "2022-06-16T11:30:20Z")

</div>

You are using Vue 3. You should really use Vue 2 as suggested by @UnborN

Bootstrap 4.x does not support vue 3

---

<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 June 2022 11:56 UTC](https://discourse.nodered.org/t/first-attempt-with-uibuilder/64009/5 "2022-06-16T11:56:44Z")

</div>

Yes, as mentioned in other posts, the Vue project made a terrible error in my view of pushing Vue v3 far too early. It has become a pain.

Thankfully, one of the changes made in uibuilder v5 allows you to directly install packages with different versions and even from github and different branches. 😀

So you can simply use the library manager and add `vue@2` and it will overwrite v3 and everything should work as expected.

> [@fmarzocca](#):
>
> I don't have any `vendor` folder in my uibuilder tree

The `/uibuilder/vendor/` URL path simply ensures that there are no URL name clashes when uibuilder and Node-RED serve files via the ExpressJS web server. The `vendor` part is a common web server naming convention when the web server is service 3rd-party libraries. If you look at the "details" page available from one of the buttons in the Editor panel, you will see how the `/uibuilder/vendor/` paths map onto filing system folders. I try to stick to the naming convention of "paths" for URL's and "folders" for the filing system because I know that it can be confusing between the two if you aren't used to thinking about the separation between the front-end and the back-end.

In short, `../uibuilder/vendor/` will map to `~/.node-red/uibuilder/node_modules/`

---

<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: [30 June 2022 11:57 UTC](https://discourse.nodered.org/t/first-attempt-with-uibuilder/64009/6 "2022-06-30T11:57:09Z")

</div>

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