diff --git a/examples/src/Edges/EdgesExample.vue b/examples/src/Edges/EdgesExample.vue
index b5873ac5..562a6590 100644
--- a/examples/src/Edges/EdgesExample.vue
+++ b/examples/src/Edges/EdgesExample.vue
@@ -29,12 +29,7 @@ const initialEdges: Edge[] = [
id: 'e5-6',
source: '5',
target: '6',
- label: {
- component: markRaw(CustomLabel),
- props: {
- label: 'custom label text',
- },
- },
+ label: h(CustomLabel, { label: 'custom label text' }, {}),
labelStyle: { fill: 'red', fontWeight: 700 },
markerEnd: {
type: MarkerType.Arrow,
diff --git a/package/src/components/Edges/BaseEdge.vue b/package/src/components/Edges/BaseEdge.vue
index dde5825d..d5f94e0a 100644
--- a/package/src/components/Edges/BaseEdge.vue
+++ b/package/src/components/Edges/BaseEdge.vue
@@ -6,12 +6,7 @@ interface Props {
centerX: number
centerY: number
path: string
- label?:
- | string
- | {
- props?: any
- component: any
- }
+ label?: any
style?: CSSProperties
labelStyle?: any
labelShowBg?: boolean
diff --git a/package/src/components/Edges/EdgeText.vue b/package/src/components/Edges/EdgeText.vue
index a03005f6..a5ab4bd0 100644
--- a/package/src/components/Edges/EdgeText.vue
+++ b/package/src/components/Edges/EdgeText.vue
@@ -41,6 +41,7 @@ export default {
+ Floo
{{ props.label }}
diff --git a/package/src/types/edge.ts b/package/src/types/edge.ts
index 5f517f49..02be03cb 100644
--- a/package/src/types/edge.ts
+++ b/package/src/types/edge.ts
@@ -106,7 +106,7 @@ export interface EdgeProps
targetNode: GraphNode
- label?: string | VNode
+ label?: string | VNode | Component | Object
type?: string
data?: Data
style?: CSSProperties
@@ -139,7 +139,7 @@ export interface SmoothStepEdgeProps
targetNode: GraphNode
- label?: string | VNode
+ label?: string | VNode | Component | Object
type?: string
data?: Data
style?: CSSProperties
diff --git a/package/src/types/node.ts b/package/src/types/node.ts
index 53c9784e..2f4f9517 100644
--- a/package/src/types/node.ts
+++ b/package/src/types/node.ts
@@ -94,7 +94,7 @@ export interface NodeProps {
* For example like this: `h('div', props, children)`)
* Object is just a type-hack for Vue, ignore that
*/
- label?: string | VNode | Object
+ label?: string | VNode | Component | Object
/** called when used as target for new connection */
isValidTargetPos?: ValidConnectionFunc
/** called when used as source for new connection */