diff --git a/package/src/components/Edges/BaseEdge.ts b/package/src/components/Edges/BaseEdge.ts
new file mode 100644
index 00000000..8163881a
--- /dev/null
+++ b/package/src/components/Edges/BaseEdge.ts
@@ -0,0 +1,41 @@
+import { CSSProperties, FunctionalComponent } from 'vue'
+import EdgeText from './EdgeText.vue'
+
+interface Props {
+  centerX: number
+  centerY: number
+  path: string
+  label?: any
+  style?: CSSProperties
+  labelStyle?: any
+  labelShowBg?: boolean
+  labelBgStyle?: any
+  labelBgPadding?: [number, number]
+  labelBgBorderRadius?: number
+  markerStart?: string
+  markerEnd?: string
+}
+
+export default (function BaseEdge(props: Props, { attrs }) {
+  return [
+    h('path', {
+      style: attrs.style,
+      d: props.path,
+      class: 'vue-flow__edge-path',
+      markerEnd: props.markerEnd,
+      markerStart: props.markerStart,
+    }),
+    props.label
+      ? h(EdgeText, {
+          x: props.centerX,
+          y: props.centerY,
+          label: props.label,
+          labelStyle: props.labelStyle,
+          labelShowBg: props.labelShowBg,
+          labelBgStyle: props.labelBgStyle,
+          labelBgPadding: props.labelBgPadding,
+          labelBgBorderRadius: props.labelBgBorderRadius,
+        })
+      : null,
+  ]
+} as FunctionalComponent)
diff --git a/package/src/components/Edges/BaseEdge.vue b/package/src/components/Edges/BaseEdge.vue
deleted file mode 100644
index c77c3d79..00000000
--- a/package/src/components/Edges/BaseEdge.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts" setup>
-import { CSSProperties } from 'vue'
-import EdgeText from './EdgeText.vue'
-
-interface Props {
-  centerX: number
-  centerY: number
-  path: string
-  label?: any
-  style?: CSSProperties
-  labelStyle?: any
-  labelShowBg?: boolean
-  labelBgStyle?: any
-  labelBgPadding?: [number, number]
-  labelBgBorderRadius?: number
-  markerStart?: string
-  markerEnd?: string
-}
-const props = defineProps<Props>()
-</script>
-<script lang="ts">
-export default {
-  name: 'BaseEdge',
-  inheritAttrs: false,
-}
-</script>
-<template>
-  <path
-    :style="props.style"
-    :d="props.path"
-    class="vue-flow__edge-path"
-    :marker-end="props.markerEnd"
-    :marker-start="props.markerStart"
-  />
-  <EdgeText
-    v-if="props.label"
-    :x="props.centerX"
-    :y="props.centerY"
-    :label="props.label"
-    :label-style="props.labelStyle"
-    :label-show-bg="props.labelShowBg"
-    :label-bg-style="props.labelBgStyle"
-    :label-bg-padding="props.labelBgPadding"
-    :label-bg-border-radius="props.labelBgBorderRadius"
-  />
-</template>
diff --git a/package/src/index.ts b/package/src/index.ts
index a5c3c020..b5c82641 100644
--- a/package/src/index.ts
+++ b/package/src/index.ts
@@ -6,6 +6,7 @@ export { default as StepEdge } from './components/Edges/StepEdge.vue'
 export { default as BezierEdge } from './components/Edges/BezierEdge.vue'
 export { default as SimpleBezierEdge } from './components/Edges/SimpleBezierEdge.vue'
 export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge.vue'
+export { default as BaseEdge } from './components/Edges/BaseEdge'
 
 export {
   getBezierPath,