What would be good strategies for developing frontend with Vue inside a flow?

Usually, I create simple frontend pages on Node-RED with the following structure:

This works fine for simple projects, but I'd like to start using a framework like Vue for building pages. The problem here is that people usually use vue-cli for building the frontend and when I'm inside Node-RED it's not so straightforward to do something with vue-cli. I know I can start creating a project without it like the following flow:

[{"id":"60944f43.6d677","type":"http in","z":"55576db9.433f8c","name":"","url":"/vue/script","method":"get","upload":true,"swaggerDoc":"","x":720,"y":600,"wires":[["95c0ebb8.f0be6"]],"icon":"node-red/file-out.svg"},{"id":"d15b4988.2bdef8","type":"http response","z":"55576db9.433f8c","name":"","statusCode":"","headers":{},"x":995,"y":600,"wires":[],"l":false},{"id":"95c0ebb8.f0be6","type":"template","z":"55576db9.433f8c","name":"Vue.js","field":"payload","fieldType":"msg","format":"javascript","syntax":"mustache","template":"new Vue({\n  el: '#app',\n  data: {\n    message: 'Hello World from Vue.js!'\n  }\n})","output":"str","x":890,"y":600,"wires":[["d15b4988.2bdef8"]],"icon":"node-red/parser-html.svg"},{"id":"7db31366.e2febc","type":"http in","z":"55576db9.433f8c","name":"","url":"/vue","method":"get","upload":true,"swaggerDoc":"","x":700,"y":560,"wires":[["c020ba69.c6a72"]],"icon":"node-red/file-out.svg"},{"id":"917c3f8.6c47b4","type":"http response","z":"55576db9.433f8c","name":"","statusCode":"","headers":{},"x":995,"y":560,"wires":[],"l":false},{"id":"c020ba69.c6a72","type":"template","z":"55576db9.433f8c","name":"base HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"UTF-8\">\n\t\t<title></title>\n\t</head>\n\t<body>\n\t\t<script src=\"https://npmcdn.com/vue/dist/vue.js\"></script>\n\t\t<div id=\"app\">\n\t\t\t<p>{{ message }}</p>\n\t\t\t<input v-model=\"message\">\n\t\t</div>\n\t\t<script src=\"/vue/script\"></script>\n\t</body>\n</html>\n","output":"str","x":890,"y":560,"wires":[["917c3f8.6c47b4"]],"icon":"node-red/parser-html.svg"},{"id":"b8e1b1b2.2b1f4","type":"comment","z":"55576db9.433f8c","name":"Vue","info":"","x":790,"y":520,"wires":[]}]

And I also know that there's the uibuillder node that can be used for creating a Vue frontend project. But I'm confused about what are the options when I'm trying to do frontend development on Node-RED. What are the ways people usually do this kind of project on Node-RED? If I choose not to use the uibuilder the idea is to serve multiple script files like the ones on my JSON example? Or are there different techniques that I'm missing?

As per the built in documentation for the HTTP IN node...

The node will listen on the configured path for requests of a particular type. The path can be fully specified, such as /user , or include named parameters that accept any value, such as /user/:name . When named parameters are used, their actual value in a request can be accessed under msg.req.params .

See this flow as an example

In my case, I'd like to build it in a way that I don't rely on files on my computer... Just so I can easily export and import to different Node-RED instances on different servers. That's why I put the code inside the template. But I'm not sure if I end up overcomplicating the problem doing it.

I think that it's ok to have a git where I can push and pull some libraries that don't change on my code. But the mutable logic I think it'd be better if it was inside Node-RED... Because if I'm going to rely on having to manage project files on my computer, then I wouldn't need to use Node-RED at all, I could just build a frontend application with vue-cli and make it run on my server independently from Node-RED...

You can still use /files/:file format and use a switch node to direct the msg it to the desired template.

You could take a look at FlexDash (see FlexDash: towards a new dashboard for Node-Red), which uses vue.js. It uses Vite (not vue-cli) and that is really quite awesome. If you don't use bootstrap-vue or vuetify then you can use vue3, which works even better with Vite. The hot-reload and debugging helps are really awesome.

Just so I can easily export and import to different Node-RED instances on different servers.

Isn't that just a matter of bundling the files with the nodes so they get served up?


uibuilder already comes with Vue and bootstrap-vue (though you can use anything else you like). While it currently uses a folder within your Node-RED userDir, that should change with the next release. Even so, you can use a soft-link to move the actual content somewhere else.

To be honest though, to manage front-end code across multiple devices, you probably should be using GIT. Most likely GitHub or GitLab, etc.

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