diff --git a/docs/src/.vuepress/auto-imports.d.ts b/docs/src/.vuepress/auto-imports.d.ts
index e9ff9a17..dd68b78b 100644
--- a/docs/src/.vuepress/auto-imports.d.ts
+++ b/docs/src/.vuepress/auto-imports.d.ts
@@ -112,6 +112,7 @@ declare global {
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
@@ -178,6 +179,7 @@ declare global {
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']
diff --git a/package/src/auto-imports.d.ts b/package/src/auto-imports.d.ts
index 840a163e..86847d82 100644
--- a/package/src/auto-imports.d.ts
+++ b/package/src/auto-imports.d.ts
@@ -119,6 +119,7 @@ declare global {
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
@@ -185,6 +186,7 @@ declare global {
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']
diff --git a/package/src/components/ConnectionLine/ConnectionLine.vue b/package/src/components/ConnectionLine/ConnectionLine.vue
index bdca3873..c72872ed 100644
--- a/package/src/components/ConnectionLine/ConnectionLine.vue
+++ b/package/src/components/ConnectionLine/ConnectionLine.vue
@@ -5,11 +5,9 @@ import { ConnectionLineType, Position } from '../../types'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
 
-interface ConnectionLineProps {
+const { sourceNode } = defineProps<{
   sourceNode: GraphNode
-}
-
-const { sourceNode } = defineProps<ConnectionLineProps>()
+}>()
 
 const {
   getNodes,
diff --git a/package/src/components/Edges/EdgeWrapper.vue b/package/src/components/Edges/EdgeWrapper.vue
index cd9a4909..95de749a 100644
--- a/package/src/components/Edges/EdgeWrapper.vue
+++ b/package/src/components/Edges/EdgeWrapper.vue
@@ -6,16 +6,14 @@ import { ConnectionMode, Position } from '../../types'
 import { connectionExists, getEdgePositions, getHandle, getMarkerId } from '../../utils'
 import EdgeAnchor from './EdgeAnchor'
 
-interface EdgeWrapper {
+const { id, edge, name, selectable, updatable, type } = defineProps<{
   id: string
   edge: GraphEdge
   selectable?: boolean
   updatable?: boolean
   type: EdgeComponent | Function | Object | false
   name: string
-}
-
-const { id, edge, name, selectable, updatable, type } = defineProps<EdgeWrapper>()
+}>()
 
 const { emits, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdges, getEdge, getNode, addSelectedEdges } = $(
   useVueFlow(),
diff --git a/package/src/components/Nodes/NodeWrapper.vue b/package/src/components/Nodes/NodeWrapper.vue
index 378bf713..a1a0866f 100644
--- a/package/src/components/Nodes/NodeWrapper.vue
+++ b/package/src/components/Nodes/NodeWrapper.vue
@@ -6,7 +6,7 @@ import type { GraphNode, NodeComponent, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 import { getHandleBounds, getXYZPos } from '../../utils'
 
-interface NodeWrapperProps {
+const { id, type, name, node, parentNode, draggable, selectable, connectable, snapGrid } = defineProps<{
   id: string
   node: GraphNode
   parentNode?: GraphNode
@@ -16,9 +16,7 @@ interface NodeWrapperProps {
   snapGrid?: SnapGrid
   type: NodeComponent | Function | Object | false
   name: string
-}
-
-const { id, type, name, node, parentNode, draggable, selectable, connectable, snapGrid } = defineProps<NodeWrapperProps>()
+}>()
 
 provide(NodeId, id)
 
diff --git a/package/src/components/UserSelection/SelectionRect.vue b/package/src/components/UserSelection/SelectionRect.vue
index 875b17fe..1097dd54 100644
--- a/package/src/components/UserSelection/SelectionRect.vue
+++ b/package/src/components/UserSelection/SelectionRect.vue
@@ -1,12 +1,10 @@
 <script lang="ts" setup>
-interface SelectionRectProps {
+const { width, height, x, y } = defineProps<{
   width: number
   height: number
   x: number
   y: number
-}
-
-const { width, height, x, y } = defineProps<SelectionRectProps>()
+}>()
 </script>
 
 <script lang="ts">
diff --git a/package/src/container/EdgeRenderer/MarkerDefinitions.vue b/package/src/container/EdgeRenderer/MarkerDefinitions.vue
index 3a834a8e..a4ab0a2c 100644
--- a/package/src/container/EdgeRenderer/MarkerDefinitions.vue
+++ b/package/src/container/EdgeRenderer/MarkerDefinitions.vue
@@ -4,11 +4,9 @@ import type { MarkerProps, MarkerType } from '../../types/edge'
 import { getMarkerId } from '../../utils'
 import Marker from './Marker.vue'
 
-interface MarkerDefinitionsProps {
+const { defaultColor = '' } = defineProps<{
   defaultColor: string
-}
-
-const { defaultColor = '' } = defineProps<MarkerDefinitionsProps>()
+}>()
 
 const { edges } = $(useVueFlow())