# How to use custom Vue components in Dashboard ui-template

**URL:** <https://discourse.nodered.org/t/how-to-use-custom-vue-components-in-dashboard-ui-template/101500>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, dashboard-2\
**Created:** [20 July 2026 12:03 UTC](https://discourse.nodered.org/t/how-to-use-custom-vue-components-in-dashboard-ui-template/101500 "2026-07-20T12:03:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![j.marin\_ma](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@j.marin\_ma](https://discourse.nodered.org/u/j.marin_ma)\
**Post date:** [20 July 2026 12:03 UTC](https://discourse.nodered.org/t/how-to-use-custom-vue-components-in-dashboard-ui-template/101500/1 "2026-07-20T12:03:53Z")

</div>

**Hi everyone,**

I'm working on a project with Node-RED and `@flowfuse/node-red-dashboard` (Dashboard 2.0) where I rely heavily on custom UI templates.

I'm looking to build a reusable component system by publishing my custom Vue 3 components as a standalone **npm package**. Ideally, I’d like to import this package into my Node-RED setup so that the components are registered globally and can be used out of the box in any `ui-template` node (just like Vuetify or component libraries work), e.g., `<my-custom-card :data="msg.payload" />`.

Is it possible to do something like this? if not, has someone encountered this same problem and how did they fix it?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 July 2026 18:09 UTC](https://discourse.nodered.org/t/how-to-use-custom-vue-components-in-dashboard-ui-template/101500/2 "2026-07-20T18:09:37Z")

</div>

Your only option at this time is to setup a CDN and import your common code

Of course that CDN could simply be a resource served from an endpoint on your node-red instance (or a common central node-red instance)

See the cookbook [http-endpoints](https://cookbook.nodered.org/#http-endpoints) for examples

In your case it might be: http-in → template node containing your definitions → http-response or http-in → file-nodes to load your package data → http-response

See the dashboard docs for how to load a CDN (or your endpoint) resource: [loading-external-dependencies](https://dashboard.flowfuse.com/nodes/widgets/ui-template#loading-external-dependencies)

---

<div class="post-metadata">

**Author:** ![jamexwilliams](https://avatars.discourse-cdn.com/v4/letter/j/d78d45/32.png) [@jamexwilliams](https://discourse.nodered.org/u/jamexwilliams)\
**Post date:** [20 July 2026 18:29 UTC](https://discourse.nodered.org/t/how-to-use-custom-vue-components-in-dashboard-ui-template/101500/3 "2026-07-20T18:29:31Z")

</div>

Unfortunately, not in the way you're describing.

Each `ui-template` runs as its own Vue application, so components aren't automatically shared or globally registered across templates like they would be in a standard Vue/Vite application. There isn't currently a supported mechanism to install an npm package into Dashboard 2.0 and have its components globally available in every `ui-template`.

A few alternatives are:

- **Load your component library via a CDN or bundled UMD/ESM build** inside each `ui-template`, then register the components locally.
- **Create a shared JavaScript file** containing your components or composables and include it wherever needed.
- **Build a custom Dashboard 2.0 widget/node** if you need reusable components across many flows. This is the recommended approach for reusable UI functionality.
- If you're already using a build tool (Vite/Rollup/Webpack), you can bundle your component library and import it into each template, but you'll still need to register the components within that template's Vue app.

So, while you can definitely reuse Vue components, Dashboard 2.0 doesn't currently support a plugin system equivalent to `app.use(MyLibrary)` that registers components globally across all `ui-template` nodes.

If your goal is to create something that behaves like Vuetify or another Vue component library, a custom Dashboard widget/package is probably the cleanest long-term solution.

---

<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:** [20 July 2026 23:16 UTC](https://discourse.nodered.org/t/how-to-use-custom-vue-components-in-dashboard-ui-template/101500/4 "2026-07-20T23:16:17Z")

</div>

Or, if you don't need D2's features, you could switch to UIBUILDER which will let you use all of Vue's features.

---

<div class="post-metadata">

**Author:** ![Aaqu](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aaqu/32/101407_2.png) [@Aaqu](https://discourse.nodered.org/u/Aaqu)\
**Post date:** [21 July 2026 07:14 UTC](https://discourse.nodered.org/t/how-to-use-custom-vue-components-in-dashboard-ui-template/101500/5 "2026-07-21T07:14:48Z")

</div>

I tried a lot db2 templates, but in the end I gave up.

I'm currently building a React+Tailwind component library.

> **[fromcubes-portal-react — React 19 dashboards for Node-RED](https://aaqu.github.io/fromcubes-portal-react/)**
>
> Step-by-step guide: build a live React 19 dashboard in Node-RED — JSX compiled server-side, Tailwind CSS 4, WebSocket data binding.

latest build

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b385290560465fe33c936471ee290d19b44a0c7a.png)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/a/aa2dc38c5fc2f6350f0b888d6e7e4a0048fb7a65.jpeg)

---

<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:** [20 August 2026 07:15 UTC](https://discourse.nodered.org/t/how-to-use-custom-vue-components-in-dashboard-ui-template/101500/6 "2026-08-20T07:15:40Z")

</div>

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