# Is Vuetify compatible with uibuilder?

**URL:** <https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222>\
**Category:** Dashboard\
**Created:** [2 October 2019 21:19 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222 "2019-10-02T21:19:57Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![scottpageindysoft](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scottpageindysoft/32/13107_2.png) [@scottpageindysoft](https://discourse.nodered.org/u/scottpageindysoft)\
**Post date:** [2 October 2019 21:19 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/1 "2019-10-02T21:19:57Z")

</div>

I use Vuetify for everything, but I just started getting move heavily involved with node-red, and now uibuilder.

Is is possible to use Vuetify with uibuilder, or are there known issues?

---

<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:** [2 October 2019 23:13 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/2 "2019-10-02T23:13:26Z")

</div>

Hi Scott, I've not tested it but I see no reason why not. If you decide to use it, you can uninstall the default bootstrap-vue as you won't need it.

Let me know how you get on.

The main thing with Vue extensions is whether they will load direct from a link tag or whether they require a build step. bootstrap-vue loads direct from a link tag. One of the reasons I chose bootstrap-vue over Vuetify was that it seemed very happy just being loaded that way.

Having checked the Veutify documentation, it says that you can load from CDN. Simply follow the same instructions but change the links to use your local installation.

> **[Quick start — Vuetify.js](https://vuetifyjs.com/en/getting-started/quick-start#cdn-usage)**
>
> Get started with Vue and Vuetify in no time. Support for Vue CLI 3, Webpack, Nuxt and more.

For the CSS, in the head section, the following replaces the bootstrap and bootstrap-vue references:

```auto
<link href="../uibuilder/vendor/vuetify/dist/vuetify.min.css" rel="stylesheet">

```

At the end of the body section (use `min` versions if you like):

```auto
    <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
    <script src="../uibuilder/vendor/vue/dist/vue.js"></script>
    <script src="../uibuilder/vendor/vuetify/dist/vuetify.js"></script>
    <script src="./uibuilderfe.min.js"></script>
    <script src="./index.js"></script>

```

And don't forget to add a reference to the vue app in your index.js:

```auto
new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      ...

```

Of course, you could also use a build routine as well but that is a bit more involved. There is an example in the WIKI though if you decide to go that way.

* * *

Oh, one other thing to watch out for. Vuetify uses ES6 features so you will need to use a modern browser. If you need older browser support, you will be forced to use a build step with a transpiler.

---

<div class="post-metadata">

**Author:** ![scottpageindysoft](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scottpageindysoft/32/13107_2.png) [@scottpageindysoft](https://discourse.nodered.org/u/scottpageindysoft)\
**Post date:** [3 October 2019 19:21 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/3 "2019-10-03T19:21:29Z")

</div>

Thanks for that! I discovered that Vuetify worked just fine.

I followed your Wiki guide for getting this to work with webpack, but I ran into an error.

Before I go into the next part, I'm working in inside of a Docker container, in VSCode, with the root of the container source code at my uibuilder project level. In-other-words, if my project is at, `<node-red-base-folder>/projects/<node-red-project-name>/uibuilder/myvueproject`, I'd right click on `myvueproject` and choose "Open with VSCode". Once I'm in VSCode, I open the command palette, `Ctrl-Shift-P`, and select `Remote-Containers: Reopen in Container`.

I then follow the usual vue-cli quick-start from Vuetify, found [here](https://vuetifyjs.com/en/getting-started/quick-start). Which is generally the same as what you show in your Wiki.

So, my problem comes in when I attempt add `import uibuilder from './../../../../node_modules/node-red-contrib-uibuilder/nodes/src/uibuilderfe.js'` to main.js. It can't find the file, and I believe it's because I'm inside of a container, in a sub-folder of node-red and uibuilder. So, webpack can't see the uibuilderfe.js file. Does that sound correct?

I'll experiment again, this time adding a volume to the docker container that points to the location of uibuilerfe.js, and allows the container to see it. Otherwise, I'll probably have to experiment inside of a node-red image container until I figure out what I'm missing.

Bottom line, I'd love to use the .vue template files and folder structure. Instead of huge html/js files.

Thanks a million! Your uibuilder is making great things happen!

P.S., I did get something to work, but only after I either reopened the container at a lower folder level, or I ran `npm install node-red-contrib-uibuilder` at my project level. However, no matter what, I get the error `Cannot read property 'endsWith' of undefined`, in uibuilderfe.js.

---

<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:** [3 October 2019 19:54 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/4 "2019-10-03T19:54:43Z")

</div>

> [@scottpageindysoft](#):
>
> So, my problem comes in when I attempt add `import uibuilder from './../../../../node_modules/node-red-contrib-uibuilder/nodes/src/uibuilderfe.js'` to main.js

Frankly, that sounds horribly complex! I get that there are reasons to use Docker but it does add massive complexity to any deployment.

> [@scottpageindysoft](#):
>
> I believe it's because I'm inside of a container, in a sub-folder of node-red and uibuilder. So, webpack can't see the uibuilderfe.js file. Does that sound correct?

I would guess so, but I don't generally use Docker so I couldn't say for sure. It certainly sounds like the most sensible place to start looking.

> [@scottpageindysoft](#):
>
> Thanks a million! Your uibuilder is making great things happen!

Thank you for the encouragement.

> [@scottpageindysoft](#):
>
> However, no matter what, I get the error `Cannot read property 'endsWith' of undefined` , in uibuilderfe.js.

Hmm, that is an issue with ES6. I added a polyfill to uibuilderfe for endsWith since it is such a useful function. Double-check that you are getting the right version of the file. You can output the version with `uibuilder.get('version')` - I try and keep it the same version as the package even if nothing changes in the front-end - occasionally I forget though so it is sometimes a version behind.

In the current v2.0.4, the pollyfil starts at line 48.

---

<div class="post-metadata">

**Author:** ![scottpageindysoft](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scottpageindysoft/32/13107_2.png) [@scottpageindysoft](https://discourse.nodered.org/u/scottpageindysoft)\
**Post date:** [3 October 2019 22:47 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/5 "2019-10-03T22:47:39Z")

</div>

`uibuilderfe.js`, lines 105 and 165, throw the `endsWith ... undefined` error.

I modified the source, and now it works:

Line 105:  
`// @since 2017-11-06 If the last element of the path is an .html file name, remove it`

`if (u.length > 0) {`  
`if (u[u.length - 1].endsWith('.html')) u.pop()`  
`}`  
`

Line 165:  
`// handle url includes file name`  
`if (fullPath.length > 0) {`  
`if (fullPath[fullPath.length - 1].endsWith('.html')) fullPath.pop()`  
`}`  
`

Hope this helps someone.

---

<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:** [4 October 2019 00:16 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/6 "2019-10-04T00:16:51Z")

</div>

OK, good spot. I guess that the polyfill I used isn't as good as the real thing since that doesn't error out.

I will add a bugfix and re-release, hopefully this weekend if I can.

---

<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:** [4 October 2019 22:22 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/7 "2019-10-04T22:22:57Z")

</div>

> [@scottpageindysoft](#):
>
> if (fullPath.length \> 0)

Added to v2.0.5 - now published.

---

<div class="post-metadata">

**Author:** ![scottpageindysoft](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/scottpageindysoft/32/13107_2.png) [@scottpageindysoft](https://discourse.nodered.org/u/scottpageindysoft)\
**Post date:** [12 October 2019 15:46 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/8 "2019-10-12T15:46:31Z")

</div>

Outstanding! Thanks so much for your hard work!

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [25 April 2021 04:06 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/9 "2021-04-25T04:06:45Z")

</div>

FYI, it would be great for the package manager's "add" button to have some way to locate existing packages. I'm using docker, packages are installed in the docker script, there is no dynamic npm install (well, technically it can be run but the result is lost at the next container restart). I need to add vuetify, roboto-fontface, and material-design-icons and I already have them in the container. I really don't want package manager to run any mpn install, that can only lead to confusion.

---

<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:** [25 April 2021 11:31 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/10 "2021-04-25T11:31:43Z")

</div>

You can easily add existing packages.

If you look in uibuilder's `.config` folder (typically found at `~/.node-red/uibuilder/.config` on a standard install without projects), you will find 2 files `masterPackageList.json` and `packageList.json`.

Both can be altered if you want to. The master list is used when Node-RED starts up to check your installed packages, if it finds that you have installed any of the ones in the master list, it will automatically serve them for you. When it does so, it adds them to the package list. You can also change the package list manually.

So there is no absolute need to use the package manager, like everything else in uibuilder, it is simply there as a convenience.

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [25 April 2021 19:50 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/11 "2021-04-25T19:50:54Z")

</div>

Thanks: [How to manage packages manually · TotallyInformation/node-red-contrib-uibuilder Wiki · GitHub](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/How-to-manage-packages-manually)

---

<div class="post-metadata">

**Author:** ![tve](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tve/32/59475_2.png) [@tve](https://discourse.nodered.org/u/tve)\
**Post date:** [26 April 2021 04:55 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/12 "2021-04-26T04:55:45Z")

</div>

How does one cause the package manager to reload the package list files? Or does one have to restart node-red after modifying these files?

---

<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 April 2021 11:51 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/13 "2021-04-26T11:51:42Z")

</div>

Yes, unfortunately, if you manually update the package list, the only way Node-RED has of knowing is if you restart. If you update via the package manager, it will update automatically without a restart. Possibly, if you just did a forced redeploy that might be enough.

---

<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:** [28 November 2022 16:14 UTC](https://discourse.nodered.org/t/is-vuetify-compatible-with-uibuilder/16222/14 "2022-11-28T16:14:07Z")

</div>

For anyone discovering this thread. Please note that uibuilder's package handling has been completely rewritten and the root folder for uibuilder served front-end libraries has moved to the `uibRoot` folder, typically `~/.node-red/uibuilder/`.

You can still manually install packages but remember that you will need to restart node-red to be certain that they are picked up. You don't need to restart node-red if using uibuilder's library manager.

To manually install:

```auto
cd ~/.node-red/uibuilder/
npm install xxxxxxx

```