ui-template (Widget) fails to render Vue component – results in blank group content

[vladuser31]

Current Behavior

When adding a ui-template node configured as a Vue component (type: "Widget (Vue Component)") to a Dashboard 2.0 group, the component does not render at all. The group appears empty except for its title. Even the most minimal template (e.g., a simple <div> with text) fails to display.

The issue persists regardless of whether a ui-theme is applied or not, and occurs on multiple devices and browsers.

Expected Behavior

The Vue component defined in the ui-template node should render correctly inside its assigned group, displaying the provided HTML and executing the associated JavaScript.

Steps to Reproduce

1. Install @flowfuse/node-red-dashboard (tested with version 1.22.0) in a clean Node-RED environment.
2. Import the following minimal flow:

[
    {
        "id": "ui-base-min",
        "type": "ui-base",
        "name": "UI Base",
        "path": "/dashboard",
        "defaultPage": "page-min"
    },
    {
        "id": "page-min",
        "type": "ui-page",
        "name": "Test Page",
        "ui": "ui-base-min",
        "path": "/test",
        "icon": "home",
        "theme": "",
        "layout": "grid",
        "visible": true
    },
    {
        "id": "group-min",
        "type": "ui-group",
        "name": "Test Group",
        "page": "page-min",
        "width": 12,
        "height": 4,
        "order": 1,
        "showTitle": true
    },
    {
        "id": "template-min",
        "type": "ui-template",
        "name": "Test Widget",
        "group": "group-min",
        "order": 1,
        "width": 12,
        "height": 2,
        "templateScope": "local",
        "template": "<template>\n  <div style=\"background: red; color: white; padding: 20px;\">\n    If you see this, ui-template works.\n  </div>\n</template>\n\n<script>\nexport default {\n  mounted() {\n    console.log('Widget mounted');\n  }\n}\n</script>\n\n<style scoped>\n</style>"
    }
]


Environment :

Dashboard version: @flowfuse/node-red-dashboard@1.22.0

Node-RED version: 4.0.8

Node.js version: v20.18.0

Browser: Chrome 135, Firefox 138 (issue occurs on both)

OS: Ubuntu 24.04 (also reproduced on Windows 11)

Logs & Console Output

No JavaScript errors in the console with the minimal test flow.

When using Vuetify components, the following error stack appears (but is likely a consequence, not the root cause):

text
TypeError: Invalid color: undefined
    at parseColor (index-B1862Wtn.js:78:20515)
    at genOnColors (index-B1862Wtn.js:82:942)
    ...

### Steps To Reproduce

_No response_

### Environment

- Dashboard version:
- Node-RED version:
- Node.js version:
- npm version:
- Platform/OS:
- Browser:


### Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[colinl]

Could you edit your post please, you have text after the flow included in the code block so that it will not import.

In fact the flow itself is also messed up. All the widget ids appear to have been manually edited and the template widget config in the flow is just wrong. How did you generate that?
Please start again and just select the widget and export it and edit your flow and put a good flow there. After you have done that check that you can copy it from here and import into node-red.

Finally, what do you mean by

a ui-template node configured as a Vue component (type: "Widget (Vue Component)")'
The only types I see are

[colinl]

Or perhaps you generated this flow using AI. In which case AI has messed up, as it often does.

Start again and generate the flow manually.