diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index dc2bfd8c..44932212 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -11,6 +11,7 @@ export default defineNuxtConfig({
   },
   vite: {
     alias: {
+      dagre: resolve('./node_modules/dagre'),
       vue: resolve('./node_modules/vue'),
     },
     resolve: {
diff --git a/docs/pages/examples/initialLayoutingElements.ts b/docs/pages/examples/initialLayoutingElements.ts
deleted file mode 100644
index 35280ada..00000000
--- a/docs/pages/examples/initialLayoutingElements.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Elements, XYPosition } from '@braks/vue-flow'
-
-const position: XYPosition = { x: 0, y: 0 }
-
-const elements: Elements = [
-  {
-    id: '1',
-    type: 'input',
-    data: { label: 'input' },
-    position,
-  },
-  {
-    id: '2',
-    data: { label: 'node 2' },
-    position,
-  },
-  {
-    id: '2a',
-    data: { label: 'node 2a' },
-    position,
-  },
-  {
-    id: '2b',
-    data: { label: 'node 2b' },
-    position,
-  },
-  {
-    id: '2c',
-    data: { label: 'node 2c' },
-    position,
-  },
-  {
-    id: '2d',
-    data: { label: 'node 2d' },
-    position,
-  },
-  {
-    id: '3',
-    data: { label: 'node 3' },
-    position,
-  },
-  {
-    id: '4',
-    data: { label: 'node 4' },
-    position,
-  },
-  {
-    id: '5',
-    data: { label: 'node 5' },
-    position,
-  },
-  {
-    id: '6',
-    type: 'output',
-    data: { label: 'output' },
-    position,
-  },
-  { id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
-  { id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
-  { id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
-  { id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
-  { id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
-  { id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
-  { id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
-
-  { id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
-  { id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
-  { id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
-]
-
-export default elements
diff --git a/docs/pages/examples/layouting.vue b/docs/pages/examples/layouting.vue
index 9678d51a..42650451 100644
--- a/docs/pages/examples/layouting.vue
+++ b/docs/pages/examples/layouting.vue
@@ -12,8 +12,76 @@ import {
   NodeExtent,
   Position,
   removeElements,
+  XYPosition,
 } from '@braks/vue-flow'
-import initialElements from './initialLayoutingElements'
+
+const position: XYPosition = { x: 0, y: 0 }
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'input' },
+    position,
+  },
+  {
+    id: '2',
+    data: { label: 'node 2' },
+    position,
+  },
+  {
+    id: '2a',
+    data: { label: 'node 2a' },
+    position,
+  },
+  {
+    id: '2b',
+    data: { label: 'node 2b' },
+    position,
+  },
+  {
+    id: '2c',
+    data: { label: 'node 2c' },
+    position,
+  },
+  {
+    id: '2d',
+    data: { label: 'node 2d' },
+    position,
+  },
+  {
+    id: '3',
+    data: { label: 'node 3' },
+    position,
+  },
+  {
+    id: '4',
+    data: { label: 'node 4' },
+    position,
+  },
+  {
+    id: '5',
+    data: { label: 'node 5' },
+    position,
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: { label: 'output' },
+    position,
+  },
+  { id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
+  { id: 'e12', source: '1', target: '2', type: 'smoothstep', animated: true },
+  { id: 'e13', source: '1', target: '3', type: 'smoothstep', animated: true },
+  { id: 'e22a', source: '2', target: '2a', type: 'smoothstep', animated: true },
+  { id: 'e22b', source: '2', target: '2b', type: 'smoothstep', animated: true },
+  { id: 'e22c', source: '2', target: '2c', type: 'smoothstep', animated: true },
+  { id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', animated: true },
+
+  { id: 'e45', source: '4', target: '5', type: 'smoothstep', animated: true },
+  { id: 'e56', source: '5', target: '6', type: 'smoothstep', animated: true },
+  { id: 'e57', source: '5', target: '7', type: 'smoothstep', animated: true },
+]
 
 const dagreGraph = new dagre.graphlib.Graph()
 dagreGraph.setDefaultEdgeLabel(() => ({}))
@@ -51,7 +119,6 @@ const onLayout = (direction: string) => {
 
     return el
   })
-  console.log(elements.value)
 }
 </script>
 <template>
diff --git a/docs/pages/examples/stress.vue b/docs/pages/examples/stress.vue
index c415d192..9bc4d913 100644
--- a/docs/pages/examples/stress.vue
+++ b/docs/pages/examples/stress.vue
@@ -43,8 +43,6 @@ function getElements(xElements = 10, yElements = 10): Elements {
   return initialElements
 }
 
-const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 }
-
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()
   console.log(flowInstance.getElements())
@@ -82,9 +80,9 @@ const updateElements = () => {
     <Controls />
     <Background />
 
-    <div :style="buttonWrapperStyles">
-      <button style="margin-right: 5px" @click="updatePos">change pos</button>
-      <button @click="updateElements">update elements</button>
+    <div class="absolute right-[10px] top-[10px] z-4">
+      <button class="button" @click="updatePos">change pos</button>
+      <button class="button" @click="updateElements">update elements</button>
     </div>
   </Flow>
 </template>
diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
index a7913cc5..367a7536 100644
--- a/examples/Basic/Basic.vue
+++ b/examples/Basic/Basic.vue
@@ -13,7 +13,7 @@ import {
   isNode,
   removeElements,
   Node,
-} from '@braks/vue-flow'
+} from '~/index'
 
 const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
 const onElementClick = ({ node }: { node: Node }) => console.log('click', node)
@@ -48,9 +48,9 @@ const updatePos = () => {
 const logToObject = () => console.log(rfInstance.value?.toObject())
 const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 
-const toggleClassnames = () => {
+const toggleclasss = () => {
   elements.value = elements.value.map((el: FlowElement) => {
-    if (isNode(el)) el.className = el.className === 'light' ? 'dark' : 'light'
+    if (isNode(el)) el.class = el.class === 'light' ? 'dark' : 'light'
     return el
   })
 }
@@ -75,7 +75,7 @@ const toggleClassnames = () => {
     <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
       <button style="margin-right: 5px" @click="resetTransform">reset transform</button>
       <button style="margin-right: 5px" @click="updatePos">change pos</button>
-      <button style="margin-right: 5px" @click="toggleClassnames">toggle classnames</button>
+      <button style="margin-right: 5px" @click="toggleclasss">toggle classs</button>
       <button @click="logToObject">toObject</button>
     </div>
   </Flow>
diff --git a/examples/EdgeTypes/EdgeTypesExample.vue b/examples/EdgeTypes/EdgeTypesExample.vue
index e58a81da..a9c67122 100644
--- a/examples/EdgeTypes/EdgeTypesExample.vue
+++ b/examples/EdgeTypes/EdgeTypesExample.vue
@@ -1,7 +1,4 @@
 <script lang="ts" setup>
-/**
- * Example for checking the different edge types and source and target positions
- */
 import { getElements } from './utils'
 import { Flow, removeElements, addEdge, MiniMap, Controls, Background, FlowInstance, Connection, Edge, Elements } from '~/index'
 
diff --git a/examples/Edges/EdgesExample.vue b/examples/Edges/EdgesExample.vue
index 33e39f7c..04dad94d 100644
--- a/examples/Edges/EdgesExample.vue
+++ b/examples/Edges/EdgesExample.vue
@@ -29,7 +29,7 @@ const initialElements: Elements = [
   { id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
   { id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
   { id: '9', type: 'output', data: { label: 'Output 9' }, position: { x: 675, y: 500 } },
-  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', className: 'normal-edge' },
+  { id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', class: 'normal-edge' },
   { id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
   { id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
   { id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
diff --git a/examples/MultiFlows/Flow.vue b/examples/MultiFlows/Flow.vue
index 675e0d30..92880ef1 100644
--- a/examples/MultiFlows/Flow.vue
+++ b/examples/MultiFlows/Flow.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
 const initialElements: Elements = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ]
diff --git a/examples/Switch/SwitchExample.vue b/examples/Switch/SwitchExample.vue
index c93415d9..482680d1 100644
--- a/examples/Switch/SwitchExample.vue
+++ b/examples/Switch/SwitchExample.vue
@@ -5,20 +5,20 @@ const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', n
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
 
 const elementsA: Elements = [
-  { id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
-  { id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
-  { id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
-  { id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+  { id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
+  { id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
+  { id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
   { id: 'e1-2', source: '1a', target: '2a' },
   { id: 'e1-3', source: '1a', target: '3a' },
 ]
 
 const elementsB: Elements = [
-  { id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, className: 'light' },
-  { id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, className: 'light' },
-  { id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, className: 'light' },
-  { id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
-  { id: '4b', data: { label: 'Node 4' }, position: { x: 600, y: 100 }, className: 'light' },
+  { id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, class: 'light' },
+  { id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, class: 'light' },
+  { id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, class: 'light' },
+  { id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4b', data: { label: 'Node 4' }, position: { x: 600, y: 100 }, class: 'light' },
 
   { id: 'e1b', source: 'inputb', target: '1b' },
   { id: 'e2b', source: 'inputb', target: '2b' },
diff --git a/examples/ZoomPanHelper/ZoomPanHelperExample.vue b/examples/ZoomPanHelper/ZoomPanHelperExample.vue
index 7049d29d..6cd0de91 100644
--- a/examples/ZoomPanHelper/ZoomPanHelperExample.vue
+++ b/examples/ZoomPanHelper/ZoomPanHelperExample.vue
@@ -14,10 +14,10 @@ import {
 } from '~/index'
 
 const initialElements: Elements = [
-  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
-  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
-  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
-  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ]
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..d98e6453
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite App</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/examples/main.ts"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
index 78999906..a872b97a 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "dist"
   ],
   "scripts": {
+    "dev": "vite",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly",
     "prepublishOnly": "yarn build",
     "test": "exit 0;",
@@ -43,12 +44,15 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",
     "@rollup/plugin-replace": "^2.4.2",
+    "@types/dagre": "^0.7.46",
     "@vitejs/plugin-vue": "^1.9.3",
     "@vue/compiler-sfc": "^3.2.21",
     "autoprefixer": "^10.3.7",
+    "dagre": "^0.8.5",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.1",
+    "localforage": "^1.10.0",
     "np": "^7.5.0",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.4.1",
@@ -57,6 +61,7 @@
     "vite": "^2.6.10",
     "vite-svg-loader": "^2.2.0",
     "vue": "^3.2.21",
+    "vue-router": "^4.0.12",
     "vue-tsc": "^0.28.7"
   },
   "peerDependencies": {
diff --git a/src/additional-components/Background/Background.vue b/src/additional-components/Background/Background.vue
index e1ed7390..024e519e 100644
--- a/src/additional-components/Background/Background.vue
+++ b/src/additional-components/Background/Background.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { SVGAttributes } from 'vue'
-import { BackgroundVariant } from '../../types'
-import { useStore } from '../../composables'
+import { BackgroundVariant } from '~/types'
+import { useStore } from '~/composables'
 
 export interface BackgroundProps extends SVGAttributes {
   variant?: BackgroundVariant
diff --git a/src/additional-components/Controls/Controls.vue b/src/additional-components/Controls/Controls.vue
index 4ad552eb..9ae264c5 100644
--- a/src/additional-components/Controls/Controls.vue
+++ b/src/additional-components/Controls/Controls.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
-import PlusIcon from '../../assets/icons/plus.svg'
-import MinusIcon from '../../assets/icons/minus.svg'
-import Fitview from '../../assets/icons/fitview.svg'
-import Lock from '../../assets/icons/lock.svg'
-import Unlock from '../../assets/icons/unlock.svg'
-import { FitViewParams } from '../../types'
-import { useZoomPanHelper, useStore } from '../../composables'
 import ControlButton from './ControlButton.vue'
+import PlusIcon from '~/assets/icons/plus.svg'
+import MinusIcon from '~/assets/icons/minus.svg'
+import Fitview from '~/assets/icons/fitview.svg'
+import Lock from '~/assets/icons/lock.svg'
+import Unlock from '~/assets/icons/unlock.svg'
+import { FitViewParams } from '~/types'
+import { useZoomPanHelper, useStore } from '~/composables'
 
 export interface ControlProps extends HTMLAttributes {
   showZoom?: boolean
diff --git a/src/additional-components/MiniMap/MiniMap.vue b/src/additional-components/MiniMap/MiniMap.vue
index fcbb2aaf..0cfb617b 100644
--- a/src/additional-components/MiniMap/MiniMap.vue
+++ b/src/additional-components/MiniMap/MiniMap.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
-import { getBoundsofRects, getRectOfNodes } from '../../utils'
-import { Node } from '../../types'
-import { useStore, useWindow } from '../../composables'
 import MiniMapNode from './MiniMapNode.vue'
+import { getBoundsofRects, getRectOfNodes } from '~/utils'
+import { Node } from '~/types'
+import { useStore, useWindow } from '~/composables'
 
 type StringFunc = (node: Node) => string
 type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
diff --git a/src/components/ConnectionLine/ConnectionLine.vue b/src/components/ConnectionLine/ConnectionLine.vue
index 21819caa..ee8006ad 100644
--- a/src/components/ConnectionLine/ConnectionLine.vue
+++ b/src/components/ConnectionLine/ConnectionLine.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ConnectionLineType, HandleElement, Node, Position } from '../../types'
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
-import { useStore } from '../../composables'
+import { ConnectionLineType, HandleElement, Node, Position } from '~/types'
+import { useStore } from '~/composables'
 
 interface ConnectionLineProps {
   sourceNode: Node
diff --git a/src/components/Edges/BezierEdge.vue b/src/components/Edges/BezierEdge.vue
index 4de04dda..25393b17 100644
--- a/src/components/Edges/BezierEdge.vue
+++ b/src/components/Edges/BezierEdge.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ArrowHeadType, ElementId, Position } from '../../types'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
+import { ArrowHeadType, ElementId, Position } from '~/types'
 
 interface BezierEdgeProps {
   id: ElementId
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
index 6e8db463..e6bd536a 100644
--- a/src/components/Edges/Edge.vue
+++ b/src/components/Edges/Edge.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../container/EdgeRenderer/utils'
-import { isEdge } from '../../utils'
-import { ConnectionMode, Edge, EdgeType, Position } from '../../types'
-import { useHandle, useHooks, useStore } from '../../composables'
 import EdgeAnchor from './EdgeAnchor.vue'
+import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
+import { isEdge } from '~/utils'
+import { ConnectionMode, Edge, EdgeType, Position } from '~/types'
+import { useHandle, useHooks, useStore } from '~/composables'
 
 interface EdgeProps {
   type: EdgeType
@@ -97,14 +97,14 @@ const targetNodeHandles = computed(() =>
     : nodes.value.targetNode?.__rf?.handleBounds.target ?? nodes.value.targetNode?.__rf?.handleBounds.source,
 )
 
-const sourceHandle = computed(
-  () => nodes.value.sourceNode && getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle || null),
-)
-const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle || null))
+const sourceHandle = computed(() => {
+  if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle ?? null)
+})
+const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null))
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
 const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
 
-const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) || false)
+const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) ?? false)
 const edgePos = computed(() =>
   getEdgePositions(
     nodes.value.sourceNode,
diff --git a/src/components/Edges/EdgeAnchor.vue b/src/components/Edges/EdgeAnchor.vue
index df0c844f..38850c91 100644
--- a/src/components/Edges/EdgeAnchor.vue
+++ b/src/components/Edges/EdgeAnchor.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
-import { Position } from '../../types'
+import { Position } from '~/types'
 
 const shiftX = (x: number, shift: number, position: Position): number => {
   if (position === Position.Left) return x - shift
diff --git a/src/components/Edges/SmoothStepEdge.vue b/src/components/Edges/SmoothStepEdge.vue
index 1fe2238b..88e39e7f 100644
--- a/src/components/Edges/SmoothStepEdge.vue
+++ b/src/components/Edges/SmoothStepEdge.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ArrowHeadType, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
+import { ArrowHeadType, ElementId, Position } from '~/types'
 
 export interface EdgeSmoothStepProps {
   id: ElementId
diff --git a/src/components/Edges/StepEdge.vue b/src/components/Edges/StepEdge.vue
index d59b25c1..60668ab5 100644
--- a/src/components/Edges/StepEdge.vue
+++ b/src/components/Edges/StepEdge.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ArrowHeadType, ElementId, Position } from '../../types'
 import SmoothStepEdge from './SmoothStepEdge.vue'
+import { ArrowHeadType, ElementId, Position } from '~/types'
 
 export interface EdgeStepProps {
   id: ElementId
diff --git a/src/components/Edges/StraightEdge.vue b/src/components/Edges/StraightEdge.vue
index aaf48053..51cce71e 100644
--- a/src/components/Edges/StraightEdge.vue
+++ b/src/components/Edges/StraightEdge.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ArrowHeadType, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
+import { ArrowHeadType, ElementId, Position } from '~/types'
 
 interface StraightEdgeProps {
   id: ElementId
diff --git a/src/components/Edges/utils.ts b/src/components/Edges/utils.ts
index 34664037..bc31448f 100644
--- a/src/components/Edges/utils.ts
+++ b/src/components/Edges/utils.ts
@@ -1,4 +1,4 @@
-import { ArrowHeadType, Position } from '../../types'
+import { ArrowHeadType, Position } from '~/types'
 
 export const getMarkerEnd = (arrowHeadType?: ArrowHeadType, markerEndId?: string): string => {
   if (typeof markerEndId !== 'undefined' && markerEndId) {
diff --git a/src/components/Handle/Handle.vue b/src/components/Handle/Handle.vue
index 9b6eca68..823f3049 100644
--- a/src/components/Handle/Handle.vue
+++ b/src/components/Handle/Handle.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { Position, ValidConnectionFunc } from '../../types'
-import { NodeIdContextKey } from '../../context'
-import { useHandle, useHooks, useStore } from '../../composables'
+import { Position, ValidConnectionFunc } from '~/types'
+import { NodeIdContextKey } from '~/context'
+import { useHandle, useHooks, useStore } from '~/composables'
 
 interface HandleProps {
   id?: string
diff --git a/src/components/Nodes/DefaultNode.vue b/src/components/Nodes/DefaultNode.vue
index 0d3c8c30..2f4be9cb 100644
--- a/src/components/Nodes/DefaultNode.vue
+++ b/src/components/Nodes/DefaultNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '../../types'
+import { NodeProps, Position } from '~/types'
 
 interface DefaultNodeProps extends NodeProps {
   data?: NodeProps['data']
diff --git a/src/components/Nodes/InputNode.vue b/src/components/Nodes/InputNode.vue
index 33ea0485..c06510eb 100644
--- a/src/components/Nodes/InputNode.vue
+++ b/src/components/Nodes/InputNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '../../types'
+import { NodeProps, Position } from '~/types'
 
 interface InputNodeProps extends NodeProps {
   data?: NodeProps['data']
diff --git a/src/components/Nodes/Node.vue b/src/components/Nodes/Node.vue
index 2bf96456..5785938b 100644
--- a/src/components/Nodes/Node.vue
+++ b/src/components/Nodes/Node.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
-import { Node, NodeType, SnapGrid } from '../../types'
-import { NodeIdContextKey } from '../../context'
-import { useHooks, useStore } from '../../composables'
+import { Node, NodeType, SnapGrid } from '~/types'
+import { NodeIdContextKey } from '~/context'
+import { useHooks, useStore } from '~/composables'
 
 interface NodeProps {
   node: Node
@@ -23,9 +23,9 @@ provide(NodeIdContextKey, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
-const selectable = computed(() => props.node.selectable ?? store.elementsSelectable)
-const draggable = computed(() => props.node.draggable ?? store.nodesDraggable)
-const connectable = computed(() => props.node.connectable ?? store.nodesConnectable)
+const selectable = props.node.selectable ?? store.elementsSelectable
+const draggable = props.node.draggable ?? store.nodesDraggable
+const connectable = props.node.connectable ?? store.nodesConnectable
 
 const onMouseEnterHandler = () =>
   props.node.__rf?.isDragging && ((event: MouseEvent) => hooks.nodeMouseEnter.trigger({ event, node: props.node }))
@@ -116,21 +116,18 @@ onMounted(() => {
       })
     }),
   )
-})
 
-watch(
-  () => props.node.type,
-  () => {
-    store.updateNodeDimensions({
-      id: props.node.id,
-      nodeElement: nodeElement.value,
-      forceUpdate: true,
-    })
-  },
-)
-watch(
-  () => props.node.sourcePosition && props.node.targetPosition,
-  () => {
+  watch(
+    () => props.node.type,
+    () => {
+      store.updateNodeDimensions({
+        id: props.node.id,
+        nodeElement: nodeElement.value,
+        forceUpdate: true,
+      })
+    },
+  )
+  watch([() => props.node.sourcePosition, () => props.node.targetPosition], () => {
     nextTick(() => {
       store.updateNodeDimensions({
         id: props.node.id,
@@ -138,8 +135,8 @@ watch(
         forceUpdate: true,
       })
     })
-  },
-)
+  })
+})
 </script>
 
 <template>
diff --git a/src/components/Nodes/OutputNode.vue b/src/components/Nodes/OutputNode.vue
index 72c4b748..ca96fa77 100644
--- a/src/components/Nodes/OutputNode.vue
+++ b/src/components/Nodes/OutputNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Handle from '../Handle/Handle.vue'
-import { NodeProps, Position } from '../../types'
+import { NodeProps, Position } from '~/types'
 
 interface OutputNodeProps extends NodeProps {
   data?: NodeProps['data']
diff --git a/src/components/Nodes/utils.ts b/src/components/Nodes/utils.ts
index 1cd26309..163bbde6 100644
--- a/src/components/Nodes/utils.ts
+++ b/src/components/Nodes/utils.ts
@@ -1,5 +1,5 @@
-import { HandleElement, Position } from '../../types'
-import { getDimensions } from '../../utils'
+import { HandleElement, Position } from '~/types'
+import { getDimensions } from '~/utils'
 
 export const getHandleBoundsByHandleType = (
   selector: string,
diff --git a/src/components/NodesSelection/NodesSelection.vue b/src/components/NodesSelection/NodesSelection.vue
index d7765313..1cc9fabf 100644
--- a/src/components/NodesSelection/NodesSelection.vue
+++ b/src/components/NodesSelection/NodesSelection.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
-import { Node } from '../../types'
-import { getRectOfNodes, isNode } from '../../utils'
-import { useHooks, useStore } from '../../composables'
+import { Node } from '~/types'
+import { getRectOfNodes, isNode } from '~/utils'
+import { useHooks, useStore } from '~/composables'
 
 const store = useStore()
 const hooks = useHooks()
diff --git a/src/components/UserSelection/UserSelection.vue b/src/components/UserSelection/UserSelection.vue
index 9a873a24..3acc7fa1 100644
--- a/src/components/UserSelection/UserSelection.vue
+++ b/src/components/UserSelection/UserSelection.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { useStore } from '../../composables'
 import SelectionRect from './SelectionRect.vue'
 import { getMousePosition } from './utils'
+import { useStore } from '~/composables'
 
 const store = useStore()
 const el = templateRef('user-selection', null)
diff --git a/src/composables/useHandle.ts b/src/composables/useHandle.ts
index 062e88ef..8ec9de52 100644
--- a/src/composables/useHandle.ts
+++ b/src/composables/useHandle.ts
@@ -1,7 +1,7 @@
-import { getHostForElement } from '../utils'
-import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '../types'
 import useStore from './useStore'
 import useHooks from './useHooks'
+import { getHostForElement } from '~/utils'
+import { Connection, ConnectionMode, ElementId, HandleType, ValidConnectionFunc } from '~/types'
 
 type Result = {
   elementBelow: Element | null
diff --git a/src/composables/useHooks.ts b/src/composables/useHooks.ts
index 93c5d9e8..ae121c7e 100644
--- a/src/composables/useHooks.ts
+++ b/src/composables/useHooks.ts
@@ -1,15 +1,5 @@
-import {
-  Connection,
-  Edge,
-  Elements,
-  EmitFunc,
-  FlowHooks,
-  FlowTransform,
-  Node,
-  OnConnectStartParams,
-  FlowInstance,
-} from '../types'
-import { Hooks } from '../context'
+import { Connection, Edge, Elements, EmitFunc, FlowHooks, FlowTransform, Node, OnConnectStartParams, FlowInstance } from '~/types'
+import { Hooks } from '~/context'
 
 // flow event hooks
 const hooks = (): FlowHooks => {
diff --git a/src/composables/useKeyPress.ts b/src/composables/useKeyPress.ts
index 33cb4c06..ad76cb5e 100644
--- a/src/composables/useKeyPress.ts
+++ b/src/composables/useKeyPress.ts
@@ -1,7 +1,7 @@
 import { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
-import { KeyCode } from '../types'
 import useWindow from './useWindow'
+import { KeyCode } from '~/types'
 
 // todo cancel keypress for input dom nodes
 export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
diff --git a/src/composables/useStore.ts b/src/composables/useStore.ts
index 0ffcf01a..ad4109a1 100644
--- a/src/composables/useStore.ts
+++ b/src/composables/useStore.ts
@@ -1,6 +1,6 @@
-import { FlowOptions } from '../types'
-import { useFlowStore, initialState } from '../store'
-import { Store } from '../context'
+import { FlowOptions } from '~/types'
+import { useFlowStore, initialState } from '~/store'
+import { Store } from '~/context'
 
 export default (options?: Partial<FlowOptions>) => {
   let store = inject(Store)!
diff --git a/src/composables/useUpdateNodeInternals.ts b/src/composables/useUpdateNodeInternals.ts
index 7543d4d5..4c5d72fa 100644
--- a/src/composables/useUpdateNodeInternals.ts
+++ b/src/composables/useUpdateNodeInternals.ts
@@ -1,5 +1,5 @@
-import { ElementId, UpdateNodeInternals } from '../types'
 import useStore from './useStore'
+import { ElementId, UpdateNodeInternals } from '~/types'
 
 export default (store = useStore()): UpdateNodeInternals =>
   (id: ElementId) => {
diff --git a/src/composables/useZoomPanHelper.ts b/src/composables/useZoomPanHelper.ts
index e317318e..c985c19d 100644
--- a/src/composables/useZoomPanHelper.ts
+++ b/src/composables/useZoomPanHelper.ts
@@ -1,8 +1,8 @@
 // @ts-nocheck
 import { zoomIdentity } from 'd3-zoom'
-import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '../utils'
-import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '../types'
 import useStore from './useStore'
+import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils'
+import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '~/types'
 
 const DEFAULT_PADDING = 0.1
 
diff --git a/src/container/EdgeRenderer/EdgeRenderer.vue b/src/container/EdgeRenderer/EdgeRenderer.vue
index a585717a..db37fe31 100644
--- a/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { computed, CSSProperties } from 'vue'
-import Edge from '../../components/Edges/Edge.vue'
-import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
-import { ConnectionLineType, EdgeType } from '../../types'
-import { useStore } from '../../composables'
+import { CSSProperties } from 'vue'
 import MarkerDefinitions from './MarkerDefinitions.vue'
+import Edge from '~/components/Edges/Edge.vue'
+import ConnectionLine from '~/components/ConnectionLine/ConnectionLine.vue'
+import { ConnectionLineType, EdgeType } from '~/types'
+import { useStore } from '~/composables'
 
 interface EdgeRendererProps {
   edgeTypes: Record<string, EdgeType>
diff --git a/src/container/EdgeRenderer/utils.ts b/src/container/EdgeRenderer/utils.ts
index 63eba015..02d3d0f2 100644
--- a/src/container/EdgeRenderer/utils.ts
+++ b/src/container/EdgeRenderer/utils.ts
@@ -1,6 +1,6 @@
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
-import { rectToBox } from '../../utils'
-import { Edge, EdgePositions, EdgeType, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '../../types'
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
+import { rectToBox } from '~/utils'
+import { Edge, EdgePositions, EdgeType, ElementId, HandleElement, Node, Position, Transform, XYPosition } from '~/types'
 
 export function createEdgeTypes(edgeTypes: Record<string, EdgeType>): Record<string, EdgeType> {
   const standardTypes: Record<string, EdgeType> = {
diff --git a/src/container/Flow/Flow.vue b/src/container/Flow/Flow.vue
index 60201353..b41b15d3 100644
--- a/src/container/Flow/Flow.vue
+++ b/src/container/Flow/Flow.vue
@@ -1,9 +1,11 @@
 <script lang="ts" setup>
 import { CSSProperties, onBeforeUnmount } from 'vue'
-import ZoomPane from '../../container/ZoomPane/ZoomPane.vue'
-import SelectionPane from '../../container/SelectionPane/SelectionPane.vue'
-import NodeRenderer from '../../container/NodeRenderer/NodeRenderer.vue'
-import EdgeRenderer from '../../container/EdgeRenderer/EdgeRenderer.vue'
+import { createEdgeTypes } from '../EdgeRenderer/utils'
+import { createNodeTypes } from '../NodeRenderer/utils'
+import ZoomPane from '~/container/ZoomPane/ZoomPane.vue'
+import SelectionPane from '~/container/SelectionPane/SelectionPane.vue'
+import NodeRenderer from '~/container/NodeRenderer/NodeRenderer.vue'
+import EdgeRenderer from '~/container/EdgeRenderer/EdgeRenderer.vue'
 import {
   ConnectionLineType,
   ConnectionMode,
@@ -15,12 +17,10 @@ import {
   TranslateExtent,
   NodeExtent,
   FlowOptions,
-} from '../../types'
-import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
-import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '../../components/Edges'
-import { createEdgeTypes } from '../EdgeRenderer/utils'
-import { createNodeTypes } from '../NodeRenderer/utils'
-import { useHooks, useStore, createHooks } from '../../composables'
+} from '~/types'
+import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
+import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components/Edges'
+import { useHooks, useStore, createHooks } from '~/composables'
 
 export interface FlowProps extends FlowOptions {
   elements: Elements
diff --git a/src/container/NodeRenderer/NodeRenderer.vue b/src/container/NodeRenderer/NodeRenderer.vue
index 8266a663..e64e91e2 100644
--- a/src/container/NodeRenderer/NodeRenderer.vue
+++ b/src/container/NodeRenderer/NodeRenderer.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import Node from '../../components/Nodes/Node.vue'
-import { NodeType, Node as TNode } from '../../types'
-import { getNodesInside } from '../../utils'
-import { useStore } from '../../composables'
+import Node from '~/components/Nodes/Node.vue'
+import { NodeType, Node as TNode } from '~/types'
+import { getNodesInside } from '~/utils'
+import { useStore } from '~/composables'
 
 interface NodeRendererProps {
   nodeTypes: Record<string, NodeType>
diff --git a/src/container/NodeRenderer/utils.ts b/src/container/NodeRenderer/utils.ts
index 443e248d..ca941a5b 100644
--- a/src/container/NodeRenderer/utils.ts
+++ b/src/container/NodeRenderer/utils.ts
@@ -1,5 +1,5 @@
-import { DefaultNode, InputNode, OutputNode } from '../../components/Nodes'
-import { NodeType } from '../../types'
+import { DefaultNode, InputNode, OutputNode } from '~/components/Nodes'
+import { NodeType } from '~/types'
 
 export function createNodeTypes(nodeTypes: Record<string, NodeType>): Record<string, NodeType> {
   const standardTypes: Record<string, NodeType> = {
diff --git a/src/container/SelectionPane/SelectionPane.vue b/src/container/SelectionPane/SelectionPane.vue
index b8efeae8..cff6a6d3 100644
--- a/src/container/SelectionPane/SelectionPane.vue
+++ b/src/container/SelectionPane/SelectionPane.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { ElementId, FlowElement, KeyCode } from '../../types'
-import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
-import UserSelection from '../../components/UserSelection/UserSelection.vue'
-import { getConnectedEdges, isNode } from '../../utils'
-import { useHooks, useStore, useKeyPress } from '../../composables'
+import { ElementId, FlowElement, KeyCode } from '~/types'
+import NodesSelection from '~/components/NodesSelection/NodesSelection.vue'
+import UserSelection from '~/components/UserSelection/UserSelection.vue'
+import { getConnectedEdges, isNode } from '~/utils'
+import { useHooks, useStore, useKeyPress } from '~/composables'
 
 interface SelectionPaneProps {
   selectionKeyCode?: KeyCode
diff --git a/src/container/ZoomPane/ZoomPane.vue b/src/container/ZoomPane/ZoomPane.vue
index d415976c..6ad4238b 100644
--- a/src/container/ZoomPane/ZoomPane.vue
+++ b/src/container/ZoomPane/ZoomPane.vue
@@ -2,9 +2,9 @@
 import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
 import { get } from '@vueuse/core'
 import { pointer, select } from 'd3-selection'
-import { FlowTransform, KeyCode, PanOnScrollMode } from '../../types'
-import { useHooks, useKeyPress, useStore, useUpdateNodeInternals, useZoomPanHelper } from '../../composables'
-import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '../../utils'
+import { FlowTransform, KeyCode, PanOnScrollMode } from '~/types'
+import { useHooks, useKeyPress, useStore, useUpdateNodeInternals, useZoomPanHelper } from '~/composables'
+import { clamp, onLoadGetElements, onLoadProject, onLoadToObject } from '~/utils'
 
 interface ZoomPaneProps {
   selectionKeyCode?: KeyCode
@@ -190,24 +190,22 @@ watch(height, (val) => (store.dimensions.height = val))
 watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))
 
 const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()
-onMounted(() => {
-  watchOnce(
-    () => width.value && height.value,
-    () => {
-      hooks.load.trigger({
-        fitView: (params = { padding: 0.1 }) => fitView(params),
-        zoomIn,
-        zoomOut,
-        zoomTo,
-        setTransform,
-        updateNodeInternals: useUpdateNodeInternals(store),
-        project: onLoadProject(store),
-        getElements: onLoadGetElements(store),
-        toObject: onLoadToObject(store),
-      })
-    },
-  )
-})
+watchOnce(
+  () => width.value && height.value,
+  () => {
+    hooks.load.trigger({
+      fitView: (params = { padding: 0.1 }) => fitView(params),
+      zoomIn,
+      zoomOut,
+      zoomTo,
+      setTransform,
+      updateNodeInternals: useUpdateNodeInternals(store),
+      project: onLoadProject(store),
+      getElements: onLoadGetElements(store),
+      toObject: onLoadToObject(store),
+    })
+  },
+)
 </script>
 <template>
   <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
diff --git a/src/context/index.ts b/src/context/index.ts
index 5c9eb567..405cdeb8 100644
--- a/src/context/index.ts
+++ b/src/context/index.ts
@@ -1,5 +1,5 @@
 import { InjectionKey } from 'vue'
-import { ElementId, FlowHooks, FlowStore } from '../types'
+import { ElementId, FlowHooks, FlowStore } from '~/types'
 
 export const Store: InjectionKey<FlowStore> = Symbol('store')
 export const Hooks: InjectionKey<FlowHooks> = Symbol('hooks')
diff --git a/src/plugin/nuxt.ts b/src/plugin/nuxt.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/store/index.ts b/src/store/index.ts
index da4cc75a..d7f28009 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,4 +1,4 @@
-import { ConnectionMode, FlowState } from '../types'
+import { ConnectionMode, FlowState } from '~/types'
 
 export const initialState = (): FlowState => ({
   dimensions: {
diff --git a/src/store/useFlowStore.ts b/src/store/useFlowStore.ts
index 2a221186..959e3e74 100644
--- a/src/store/useFlowStore.ts
+++ b/src/store/useFlowStore.ts
@@ -1,6 +1,6 @@
 import { setActivePinia, createPinia, defineStore, StoreDefinition } from 'pinia'
 import isEqual from 'fast-deep-equal'
-import { Edge, FlowState, Node, FlowActions } from '../types'
+import { Edge, FlowState, Node, FlowActions } from '~/types'
 import {
   clampPosition,
   getDimensions,
@@ -11,8 +11,8 @@ import {
   isNode,
   parseEdge,
   parseNode,
-} from '../utils'
-import { getHandleBounds } from '../components/Nodes/utils'
+} from '~/utils'
+import { getHandleBounds } from '~/components/Nodes/utils'
 
 type NextElements = {
   nextNodes: Node[]
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index 3926a3ac..3ea16347 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -12,8 +12,8 @@ import {
   NodeExtent,
   Dimensions,
   FlowStore,
-} from '../types'
-import { useWindow } from '../composables'
+} from '~/types'
+import { useWindow } from '~/composables'
 
 export const isInputDOMNode = (e: KeyboardEvent | MouseEvent): boolean => {
   const target = e.target as HTMLElement
diff --git a/tsconfig.json b/tsconfig.json
index 4a5f0776..01e99b65 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,6 +20,11 @@
     "types": [
       "vite/client"
     ],
+    "paths": {
+      "~/*": [
+        "src/*"
+      ]
+    }
   },
   "include": ["src"],
   "exclude": [
diff --git a/vite.config.ts b/vite.config.ts
index b48ffc3b..54e9c0a8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,6 +8,9 @@ import pkg from './package.json'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  alias: {
+    '~': resolve('src'),
+  },
   resolve: {
     dedupe: ['vue'],
     extensions: ['.ts', '.vue'],
diff --git a/yarn.lock b/yarn.lock
index 9472d4a3..a7ec97d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -651,6 +651,11 @@
     "@types/d3-transition" "*"
     "@types/d3-zoom" "*"
 
+"@types/dagre@^0.7.46":
+  version "0.7.46"
+  resolved "https://registry.yarnpkg.com/@types/dagre/-/dagre-0.7.46.tgz#c51ffcc62ca8a9affa07f5e06842acd840d3d442"
+  integrity sha512-ku3y+F8sPqmiB5Ugl22NpukI2dLAViJiWwdtueXLeuF4fxZozl+bytPSFVlLu/gDgaKiwobu3LBXXRWktIMiIA==
+
 "@types/estree@0.0.39":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -928,6 +933,11 @@
     "@vue/compiler-dom" "3.2.21"
     "@vue/shared" "3.2.21"
 
+"@vue/devtools-api@^6.0.0-beta.18":
+  version "6.0.0-beta.20"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.tgz#b5405c9a84fb44687d05e7c4c7854b1639141106"
+  integrity sha512-21u2jFOk8jbAneeGpDwZQ0W66RJa0IBDUyVl6SgKnn2cRFjLWzKj+ukXjpLhYr1KASyCe5E5U4jXwChVo0YUAw==
+
 "@vue/devtools-api@^6.0.0-beta.19":
   version "6.0.0-beta.19"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.19.tgz#f8e88059daa424515992426a0c7ea5cde07e99bf"
@@ -1850,6 +1860,14 @@ d3@^7.1.1:
     d3-transition "3"
     d3-zoom "3"
 
+dagre@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/dagre/-/dagre-0.8.5.tgz#ba30b0055dac12b6c1fcc247817442777d06afee"
+  integrity sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==
+  dependencies:
+    graphlib "^2.1.8"
+    lodash "^4.17.15"
+
 date-fns@^1.27.2:
   version "1.30.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
@@ -2864,6 +2882,13 @@ graceful-fs@^4.1.2, graceful-fs@^4.2.4:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
   integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
 
+graphlib@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.8.tgz#5761d414737870084c92ec7b5dbcb0592c9d35da"
+  integrity sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==
+  dependencies:
+    lodash "^4.17.15"
+
 hard-rejection@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
@@ -2985,6 +3010,11 @@ ignore@^5.0.5, ignore@^5.1.1, ignore@^5.1.4, ignore@^5.1.8:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3513,6 +3543,13 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
 lines-and-columns@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
@@ -3579,6 +3616,13 @@ local-pkg@^0.1.0:
   dependencies:
     mlly "^0.2.2"
 
+localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -3626,7 +3670,7 @@ lodash.zip@^4.2.0:
   resolved "https://registry.yarnpkg.com/lodash.zip/-/lodash.zip-4.2.0.tgz#ec6662e4896408ed4ab6c542a3990b72cc080020"
   integrity sha1-7GZi5IlkCO1KtsVCo5kLcswIACA=
 
-lodash@^4.17.12, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.17.12, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5463,6 +5507,13 @@ vue-eslint-parser@^7.10.0:
     lodash "^4.17.21"
     semver "^6.3.0"
 
+vue-router@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
+  integrity sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.18"
+
 vue-tsc@^0.28.7:
   version "0.28.7"
   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.28.7.tgz#a6fa746dd0cafc1aea06cde74d22b3e71ed7266f"