# Combine vite vuejs project with dashboard-20

**URL:** <https://discourse.nodered.org/t/combine-vite-vuejs-project-with-dashboard-20/90911>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [12 September 2024 11:29 UTC](https://discourse.nodered.org/t/combine-vite-vuejs-project-with-dashboard-20/90911 "2024-09-12T11:29:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![makerstorage](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/makerstorage/32/57594_2.png) [@makerstorage](https://discourse.nodered.org/u/makerstorage)\
**Post date:** [12 September 2024 11:29 UTC](https://discourse.nodered.org/t/combine-vite-vuejs-project-with-dashboard-20/90911/1 "2024-09-12T11:29:14Z")

</div>

Hi,

I have created a Vite Vue.js 3 project, and with the help of `vite-plugin-singlefile`, I can build the project into a single file. What I want to do is serve this file with the dashboard-20 template node.

I can't get it to work. My single file is a standalone, full HTML with minimized JS and a body tag like this:

```auto
<body>
  <div id="app"></div>
</body>

```

I selected the template group and tried all the types, but nothing seems to work. Has anyone tried this before? What am I missing?

Thanks in advance.

Regards,  
Nuri

---

<div class="post-metadata">

**Author:** ![rmpasswd](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rmpasswd/32/93661_2.png) [@rmpasswd](https://discourse.nodered.org/u/rmpasswd)\
**Post date:** [12 September 2024 13:03 UTC](https://discourse.nodered.org/t/combine-vite-vuejs-project-with-dashboard-20/90911/2 "2024-09-12T13:03:09Z")

</div>

may i know how exactly you tried to do it?

you took a ui-template node and inside within tag pasted your standalone file ?

---

<div class="post-metadata">

**Author:** ![makerstorage](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/makerstorage/32/57594_2.png) [@makerstorage](https://discourse.nodered.org/u/makerstorage)\
**Post date:** [12 September 2024 13:16 UTC](https://discourse.nodered.org/t/combine-vite-vuejs-project-with-dashboard-20/90911/3 "2024-09-12T13:16:29Z")

</div>

Yes. I build the code into single file html. I copy and paste this html into dashboard-20 template node. I did it like this with standard template node and http in nodes before.

---

<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:** [12 September 2024 14:00 UTC](https://discourse.nodered.org/t/combine-vite-vuejs-project-with-dashboard-20/90911/4 "2024-09-12T14:00:09Z")

</div>

Do you need the support of D2? Or would UIBUILDER be a better approach given that it would offer support without the complexities and overheads of D2?

UIBUILDER allows for a build-step and lets you switch from a default `src` un-built version to a `dest` (or other folder) built-version. Currently, you would do the build process outside Node-RED itself though there are plans in the backlog for the uibuilder node to pick up defined script's in your uibuilder instance folder's package.json and offer buttons in Node-RED to run the build.

[UIBUILDER: Front-End Build Steps and Tools](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-builds?id=front-end-build-steps-and-tools)

---

<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:** [12 October 2024 14:00 UTC](https://discourse.nodered.org/t/combine-vite-vuejs-project-with-dashboard-20/90911/5 "2024-10-12T14:00:35Z")

</div>

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