# Uibuilder "vue is not defined"

**URL:** <https://discourse.nodered.org/t/uibuilder-vue-is-not-defined/74831>\
**Category:** General\
**Tags:** docker, uibuilder\
**Created:** [7 February 2023 09:37 UTC](https://discourse.nodered.org/t/uibuilder-vue-is-not-defined/74831 "2023-02-07T09:37:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kitkat159](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kitkat159/32/66066_2.png) [@kitkat159](https://discourse.nodered.org/u/kitkat159)\
**Post date:** [7 February 2023 09:37 UTC](https://discourse.nodered.org/t/uibuilder-vue-is-not-defined/74831/1 "2023-02-07T09:37:30Z")

</div>

Hello there!

I try to follow the [first-timers walktrough of the uibuilder](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/walkthrough1) but it only displays a blank page and I get the following error messages inside the console of my browser:

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

What I did:

1. started a new instance of Node-RED in Docker

2. installed uibuilder

3. made the sample flow _inject -\> uibuilder -\> debug_

4. initialised the uibuilder-node with the url _uibtest_

5. deploy

6. successfully installed the libraries _vue_ and _bootstrap-vue_ inside the uibuilder panel  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/1/d1f1e82ff1191e21d98f6bd73ce0ee42a474bf7f.png)

7. changed the template to _VueJS & bootstrap-vue_

8. Load & Overwrite files

So, it should display a sample page with vue or am I missing something?

---

<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:** [7 February 2023 11:52 UTC](https://discourse.nodered.org/t/uibuilder-vue-is-not-defined/74831/2 "2023-02-07T11:52:38Z")

</div>

This is another example of the VueJS's project causing us all problems. They prematurely switched the default version from v2 to v3. Vue v3 has significant changes which means that it takes a long time for other projects such as bootstrap-vue to be able to catch up.

To get round the problem, you will need to simply click the add button in the libraries tab and put in "vue@2" then click install. The Vue v3 install that you currently have will be replaced by Vue v2 and everything should work.

I missed the part of the walkthrough that needed the instruction changing. It will be corrected in the uibuilder v6.2 release.

---

<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:** [8 February 2023 01:27 UTC](https://discourse.nodered.org/t/uibuilder-vue-is-not-defined/74831/3 "2023-02-08T01:27:06Z")

</div>

3 posts were split to a new topic: [Vue version 2 moving to version 3](https://discourse.nodered.org/t/vue-version-2-moving-to-version-3/74870)

---

<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:** [22 February 2023 01:27 UTC](https://discourse.nodered.org/t/uibuilder-vue-is-not-defined/74831/4 "2023-02-22T01:27:13Z")

</div>

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