Custom component as node-content

[TerryDieckmann]

I was wondering if it is possible to have a kind of custom node, with all the functionality of e.g. an input or output node, but with a custom vue component.

I saw that you can use html in the 'label', but not a complete vue component.

[bcakmakoglu]

You can use components as labels.

import CustomNodeLabel from './NodeLabel.vue'

const elements = ref<Elements>([
  { id: '1', type: 'input', label: CustomNodeLabel, position: { x: 250, y: 5 } },
  { id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
])

If you need to pass props to this label, you can use it like this:

const elements = ref<Elements>([
  { id: '1', type: 'input', label: h(CustomNodeLabel, { label: 'Input 1' }), position: { x: 250, y: 5 } },
  { id: '2', type: 'output', label: 'Node 2', position: { x: 100, y: 100 } },
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
])

[TerryDieckmann]

Thanks! That is exactly what I wanted to do.