# What would be good strategies for developing frontend with Vue inside a flow?
**URL:** https://discourse.nodered.org/t/what-would-be-good-strategies-for-developing-frontend-with-vue-inside-a-flow/47511
**Category:** General
**Created:** [23 June 2021 06:16 UTC](https://discourse.nodered.org/t/what-would-be-good-strategies-for-developing-frontend-with-vue-inside-a-flow/47511 "2021-06-23T06:16:50Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@raylight](https://discourse.nodered.org/u/raylight)
#### Post date: [23 June 2021 06:16 UTC](https://discourse.nodered.org/t/what-would-be-good-strategies-for-developing-frontend-with-vue-inside-a-flow/47511/1 "2021-06-23T06:16:51Z")
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:
```json
[{"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":"\n\n\t\n\t\t\n\t\t\n\t\n\t\n\t\t\n\t\t
\n\t\t\t
{{ message }}
\n\t\t\t\n\t\t
\n\t\t\n\t\n\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?
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [23 June 2021 07:04 UTC](https://discourse.nodered.org/t/what-would-be-good-strategies-for-developing-frontend-with-vue-inside-a-flow/47511/2 "2021-06-23T07:04:01Z")
> [@raylight](#):
>
> serve multiple script files like the ones on my JSON example
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](https://flows.nodered.org/flow/db68bd4934cf46f39e6e453a348bc419) as an example
---
### Author:  [@raylight](https://discourse.nodered.org/u/raylight)
#### Post date: [23 June 2021 14:17 UTC](https://discourse.nodered.org/t/what-would-be-good-strategies-for-developing-frontend-with-vue-inside-a-flow/47511/3 "2021-06-23T14:17:35Z")
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...
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [23 June 2021 14:19 UTC](https://discourse.nodered.org/t/what-would-be-good-strategies-for-developing-frontend-with-vue-inside-a-flow/47511/4 "2021-06-23T14:19:32Z")
> [@raylight](#):
>
> 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.
You can still use `/files/:file` format and use a switch node to direct the msg it to the desired template.
---
### Author:  [@tve](https://discourse.nodered.org/u/tve)
#### Post date: [23 June 2021 15:18 UTC](https://discourse.nodered.org/t/what-would-be-good-strategies-for-developing-frontend-with-vue-inside-a-flow/47511/5 "2021-06-23T15:18:55Z")
You could take a look at FlexDash (see [FlexDash: towards a new dashboard for Node-Red](https://discourse.nodered.org/t/flexdash-towards-a-new-dashboard-for-node-red/45879)), 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?
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [23 June 2021 20:40 UTC](https://discourse.nodered.org/t/what-would-be-good-strategies-for-developing-frontend-with-vue-inside-a-flow/47511/6 "2021-06-23T20:40:58Z")
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.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [22 August 2021 20:41 UTC](https://discourse.nodered.org/t/what-would-be-good-strategies-for-developing-frontend-with-vue-inside-a-flow/47511/7 "2021-08-22T20:41:43Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.