Is Vuetify compatible with uibuilder?

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?

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.

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

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

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

    <script src="../uibuilder/vendor/"></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:

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.

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. 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.

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

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.

Thank you for the encouragement.

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.

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.

1 Like

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.

1 Like

Added to v2.0.5 - now published.

Outstanding! Thanks so much for your hard work!

1 Like