I’m creating a custom Node-RED node that includes a Vue.js-based dropdown using v-autocomplete. The goal is to display this dropdown in the Node-RED UI Dashboard. However, the dropdown appears only in the Node-RED editor and not in the actual dashboard.
Here’s a summary of my setup:
- The node’s HTML contains a
<template>block for rendering the dropdown. - The Vue.js script dynamically populates the dropdown options based on incoming messages (
msg.payload). - The Vue component renders correctly in the editor, but the dropdown is not visible in the dashboard.
<template>
<div>
<div class="msg">
<v-form>
<v-autocomplete
:items="topologies.map(topology => topology.name)"
label="Select Topology"
placeholder="Search for the topologies"
clearable
chips
variant="underlined"
closable-chips
v-model="selectedTopology">
</v-autocomplete>
</v-form>
<div id="topology-container"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
topologies: [],
selectedTopology: null,
};
},
mounted() {
this.$watch('msg.payload', (newPayload) => {
if (Array.isArray(newPayload)) {
this.topologies = newPayload;
}
});
},
};
</script>
<style>
#topology-container {
width: 100%;
height: 100%;
}
</style>
- How can I ensure the dropdown renders in the UI Dashboard rather than in the Node-RED editor?
- Are there any specific considerations for embedding Vue.js components in the dashboard?
- Do I need to modify the
<template>block or use a different approach to integrate with the dashboard?
