From ae0772b6d4e89c24ae75d35ae16d08994e2fd8d6 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 23 Oct 2021 16:29:42 +0200
Subject: [PATCH] update(docs): fix view height

---
 docs/app.vue                                  |   6 +-
 docs/assets/index.css                         |   3 +-
 docs/components/Flow.vue                      |   2 +-
 docs/components/Header.vue                    |   2 +-
 docs/nuxt.config.ts                           |   5 +-
 docs/package.json                             |   1 +
 docs/pages/examples/basic.vue                 |  10 +-
 docs/pages/examples/button-edge.vue           |   3 +-
 docs/pages/examples/custom-connectionline.vue |   2 +-
 docs/pages/examples/custom-node.vue           |   3 +-
 docs/pages/examples/drag-n-drop.vue           |   3 +-
 docs/pages/examples/edge-types.vue            |   3 +-
 docs/pages/examples/edges.vue                 |   3 +-
 docs/pages/examples/empty.vue                 |   3 +-
 docs/pages/examples/hidden.vue                |   2 +-
 docs/pages/examples/index.vue                 |   3 +-
 docs/pages/examples/interaction.vue           |   3 +-
 docs/pages/examples/layouting.vue             |   3 +-
 docs/pages/examples/node-type-change.vue      |   2 +-
 docs/pages/examples/node-types-id-change.vue  |   2 +-
 docs/pages/examples/provider.vue              |   3 +-
 docs/pages/examples/save-restore.vue          |   2 +-
 docs/pages/examples/stress.vue                |   3 +-
 docs/pages/examples/switch.vue                |   2 +-
 docs/pages/examples/unidirectional.vue        |   3 +-
 docs/pages/examples/updatable-edge.vue        |   3 +-
 docs/pages/examples/update-node-internals.vue |   3 +-
 docs/pages/examples/update-node.vue           |   2 +-
 docs/pages/examples/validation.vue            |   3 +-
 docs/pages/examples/zoom-pan-helper.vue       |   3 +-
 docs/yarn.lock                                |   5 +
 package.json                                  |   3 +-
 src/additional-components/MiniMap/MiniMap.vue |   6 +-
 src/auto-imports.d.ts                         |   4 +
 src/composables/index.ts                      |   2 +-
 src/composables/useKeyPress.ts                |  10 +-
 src/composables/useWindow.ts                  |   6 +
 src/composables/useZoom.ts                    | 174 ------------------
 src/index.ts                                  |   2 +-
 src/plugin/nuxt.ts                            |   0
 src/utils/graph.ts                            |   3 +
 yarn.lock                                     |   5 +
 42 files changed, 91 insertions(+), 220 deletions(-)
 create mode 100644 src/composables/useWindow.ts
 delete mode 100644 src/composables/useZoom.ts
 create mode 100644 src/plugin/nuxt.ts

diff --git a/docs/app.vue b/docs/app.vue
index 0ea02069..2aa57cb7 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -1,6 +1,6 @@
 <template>
   <Header />
-  <div class="flex h-full">
+  <div id="app" class="flex">
     <Sidebar />
     <div id="vue-flow-docs" class="flex-1">
       <NuxtPage />
@@ -10,4 +10,8 @@
 <style>
 @import 'assets/index.css';
 @import 'node_modules/@braks/vue-flow/dist/style.css';
+
+#app {
+  height: calc(100% - 92px);
+}
 </style>
diff --git a/docs/assets/index.css b/docs/assets/index.css
index 984967a3..11fe5d84 100644
--- a/docs/assets/index.css
+++ b/docs/assets/index.css
@@ -13,9 +13,10 @@ html,
 body,
 #root,
 #__nuxt {
+  height: 100vh;
   margin: 0;
-  height: 100%;
   color: #111;
+  overflow: hidden;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
diff --git a/docs/components/Flow.vue b/docs/components/Flow.vue
index 173746ef..8e856d6d 100644
--- a/docs/components/Flow.vue
+++ b/docs/components/Flow.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Background, Connection, Elements, Edge, removeElements, addEdge } from '@braks/vue-flow'
+import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '@braks/vue-flow'
 const initialElements: Elements = [
   { 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' },
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index 261bf888..1ff95673 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="flex items-center py-4 px-8 text-white">
+  <header class="flex items-center py-4 px-8 text-white h-[92px]">
     <div class="flex flex-col">
       <a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
       <span class="text-xs text-gray-800 mt-2"
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 91292342..3265d6e7 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -5,7 +5,8 @@ export default defineNuxtConfig({
     title: 'Vue Flow',
     description: 'Vue Flow Documentation',
   },
-  target: 'client',
-  ssr: false,
+  router: {
+    base: '/',
+  },
   buildModules: ['nuxt-windicss'],
 })
diff --git a/docs/package.json b/docs/package.json
index b7c8469b..dd100546 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,6 +11,7 @@
     "localforage": "^1.10.0"
   },
   "devDependencies": {
+    "@nuxt/nitro": "^0.10.0",
     "@types/dagre": "^0.7.46",
     "nuxt-windicss": "^2.0.4",
     "nuxt3": "latest"
diff --git a/docs/pages/examples/basic.vue b/docs/pages/examples/basic.vue
index c4676f67..e8b7f7ee 100644
--- a/docs/pages/examples/basic.vue
+++ b/docs/pages/examples/basic.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,
@@ -26,12 +27,9 @@ const elements = ref<Elements>([
 ])
 const rfInstance = ref<FlowInstance | null>(null)
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
-const onConnect = (params: Edge | Connection) => {
-  elements.value = addEdge(params, elements.value)
-  console.log(params)
-}
+const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
 const onLoad = (flowInstance: FlowInstance) => {
-  flowInstance.fitView({ padding: 0.1 })
+  flowInstance?.fitView({ padding: 0.1 })
   rfInstance.value = flowInstance
 }
 
diff --git a/docs/pages/examples/button-edge.vue b/docs/pages/examples/button-edge.vue
index d31ac3ab..fc83aea5 100644
--- a/docs/pages/examples/button-edge.vue
+++ b/docs/pages/examples/button-edge.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   Background,
   Connection,
diff --git a/docs/pages/examples/custom-connectionline.vue b/docs/pages/examples/custom-connectionline.vue
index b8a1c08e..5f66a65c 100644
--- a/docs/pages/examples/custom-connectionline.vue
+++ b/docs/pages/examples/custom-connectionline.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '@braks/vue-flow'
+import { Flow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '@braks/vue-flow'
 import CustomConnectionLine from '../../components/CustomConnectionLine.vue'
 
 const elements = ref<Elements>([
diff --git a/docs/pages/examples/custom-node.vue b/docs/pages/examples/custom-node.vue
index a286bacf..4b49994e 100644
--- a/docs/pages/examples/custom-node.vue
+++ b/docs/pages/examples/custom-node.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   isEdge,
   removeElements,
   addEdge,
diff --git a/docs/pages/examples/drag-n-drop.vue b/docs/pages/examples/drag-n-drop.vue
index 699871bd..2b2177a9 100644
--- a/docs/pages/examples/drag-n-drop.vue
+++ b/docs/pages/examples/drag-n-drop.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   removeElements,
   Controls,
diff --git a/docs/pages/examples/edge-types.vue b/docs/pages/examples/edge-types.vue
index b3ce0ff1..b0e31637 100644
--- a/docs/pages/examples/edge-types.vue
+++ b/docs/pages/examples/edge-types.vue
@@ -2,7 +2,8 @@
 /**
  * Example for checking the different edge types and source and target positions
  */
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,
diff --git a/docs/pages/examples/edges.vue b/docs/pages/examples/edges.vue
index 6048e018..eab8b76a 100644
--- a/docs/pages/examples/edges.vue
+++ b/docs/pages/examples/edges.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,
diff --git a/docs/pages/examples/empty.vue b/docs/pages/examples/empty.vue
index c6567529..0259a4c0 100644
--- a/docs/pages/examples/empty.vue
+++ b/docs/pages/examples/empty.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,
diff --git a/docs/pages/examples/hidden.vue b/docs/pages/examples/hidden.vue
index e3081069..51e08dfe 100644
--- a/docs/pages/examples/hidden.vue
+++ b/docs/pages/examples/hidden.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { MiniMap, Controls, Connection, Edge, Elements, addEdge } from '@braks/vue-flow'
+import { Flow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
diff --git a/docs/pages/examples/index.vue b/docs/pages/examples/index.vue
index 4d625ec7..756ceed2 100644
--- a/docs/pages/examples/index.vue
+++ b/docs/pages/examples/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,
diff --git a/docs/pages/examples/interaction.vue b/docs/pages/examples/interaction.vue
index 56d9aee7..a68498dd 100644
--- a/docs/pages/examples/interaction.vue
+++ b/docs/pages/examples/interaction.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   MiniMap,
   Controls,
diff --git a/docs/pages/examples/layouting.vue b/docs/pages/examples/layouting.vue
index 7f637ea0..bc92dba2 100644
--- a/docs/pages/examples/layouting.vue
+++ b/docs/pages/examples/layouting.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import dagre from 'dagre'
-import Flow, {
+import {
+  Flow,
   Controls,
   addEdge,
   ConnectionMode,
diff --git a/docs/pages/examples/node-type-change.vue b/docs/pages/examples/node-type-change.vue
index 55610ebf..2f3ab6af 100644
--- a/docs/pages/examples/node-type-change.vue
+++ b/docs/pages/examples/node-type-change.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, { addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
+import { Flow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   {
diff --git a/docs/pages/examples/node-types-id-change.vue b/docs/pages/examples/node-types-id-change.vue
index 802c8847..fc91beac 100644
--- a/docs/pages/examples/node-types-id-change.vue
+++ b/docs/pages/examples/node-types-id-change.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, { Elements, Position, NodeType, Connection, Edge, addEdge } from '@braks/vue-flow'
+import { Flow, Elements, Position, NodeType, Connection, Edge, addEdge } from '@braks/vue-flow'
 import NodeA from '../../components/NodeA.vue'
 import NodeB from '../../components/NodeB.vue'
 
diff --git a/docs/pages/examples/provider.vue b/docs/pages/examples/provider.vue
index a19d280e..892d0845 100644
--- a/docs/pages/examples/provider.vue
+++ b/docs/pages/examples/provider.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   removeElements,
   Controls,
diff --git a/docs/pages/examples/save-restore.vue b/docs/pages/examples/save-restore.vue
index 30db0de0..c36913b7 100644
--- a/docs/pages/examples/save-restore.vue
+++ b/docs/pages/examples/save-restore.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '@braks/vue-flow'
+import { Flow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '@braks/vue-flow'
 import Controls from '../../components/SaveControls.vue'
 
 const initialElements: Elements = [
diff --git a/docs/pages/examples/stress.vue b/docs/pages/examples/stress.vue
index 5fc332e2..c415d192 100644
--- a/docs/pages/examples/stress.vue
+++ b/docs/pages/examples/stress.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,
diff --git a/docs/pages/examples/switch.vue b/docs/pages/examples/switch.vue
index 322a21d2..8167f8c3 100644
--- a/docs/pages/examples/switch.vue
+++ b/docs/pages/examples/switch.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '@braks/vue-flow'
+import { Flow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '@braks/vue-flow'
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)
diff --git a/docs/pages/examples/unidirectional.vue b/docs/pages/examples/unidirectional.vue
index b1aa9c17..673b8be1 100644
--- a/docs/pages/examples/unidirectional.vue
+++ b/docs/pages/examples/unidirectional.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,
diff --git a/docs/pages/examples/updatable-edge.vue b/docs/pages/examples/updatable-edge.vue
index 3957a814..d25c044a 100644
--- a/docs/pages/examples/updatable-edge.vue
+++ b/docs/pages/examples/updatable-edge.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   Controls,
   updateEdge,
   addEdge,
diff --git a/docs/pages/examples/update-node-internals.vue b/docs/pages/examples/update-node-internals.vue
index bf7f6fe7..7f8bfb04 100644
--- a/docs/pages/examples/update-node-internals.vue
+++ b/docs/pages/examples/update-node-internals.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,
diff --git a/docs/pages/examples/update-node.vue b/docs/pages/examples/update-node.vue
index efe55aba..3d34bb16 100644
--- a/docs/pages/examples/update-node.vue
+++ b/docs/pages/examples/update-node.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Elements } from '@braks/vue-flow'
+import { Flow, Elements } from '@braks/vue-flow'
 
 const initialElements: Elements = [
   { id: '1', data: { label: '-' }, position: { x: 100, y: 100 } },
diff --git a/docs/pages/examples/validation.vue b/docs/pages/examples/validation.vue
index 781844d3..0ffe8637 100644
--- a/docs/pages/examples/validation.vue
+++ b/docs/pages/examples/validation.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   Handle,
   Connection,
diff --git a/docs/pages/examples/zoom-pan-helper.vue b/docs/pages/examples/zoom-pan-helper.vue
index d30c777e..aa112dc8 100644
--- a/docs/pages/examples/zoom-pan-helper.vue
+++ b/docs/pages/examples/zoom-pan-helper.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   Background,
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 658aef65..9913e1dd 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -369,6 +369,11 @@
     unctx "^1.0.2"
     untyped "^0.2.9"
 
+"@nuxt/nitro@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@nuxt/nitro/-/nitro-0.10.0.tgz#e2157be377f6131ec72484153d56908da8704094"
+  integrity sha512-3ffdZMD0WK7UNgrkBhOyPr3fyOfmy2nPMxDOaX6eUCamr5NuY7cHQhWnum/BwSm1vIOm4b9/rnd/cgYcg9qiag==
+
 "@nuxt/nitro@npm:@nuxt/nitro-edge@3.0.0-27249044.7d918e1":
   version "3.0.0-27249044.7d918e1"
   resolved "https://registry.yarnpkg.com/@nuxt/nitro-edge/-/nitro-edge-3.0.0-27249044.7d918e1.tgz#340dc19a58d295a0009add91ca2467a2598d8072"
diff --git a/package.json b/package.json
index 92149646..a3aeb0c7 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,8 @@
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
     "fast-deep-equal": "^3.1.3",
-    "pinia": "^2.0.0-rc.14"
+    "pinia": "^2.0.0-rc.14",
+    "ssr-window": "^4.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",
diff --git a/src/additional-components/MiniMap/MiniMap.vue b/src/additional-components/MiniMap/MiniMap.vue
index a5bbede8..fcbb2aaf 100644
--- a/src/additional-components/MiniMap/MiniMap.vue
+++ b/src/additional-components/MiniMap/MiniMap.vue
@@ -2,7 +2,7 @@
 import { HTMLAttributes } from 'vue'
 import { getBoundsofRects, getRectOfNodes } from '../../utils'
 import { Node } from '../../types'
-import { useStore } from '../../composables'
+import { useStore, useWindow } from '../../composables'
 import MiniMapNode from './MiniMapNode.vue'
 
 type StringFunc = (node: Node) => string
@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<MiniMapProps>(), {
 })
 
 const attrs: any = useAttrs()
+const window = useWindow()
 
 const defaultWidth = 200
 const defaultHeight = 150
@@ -41,8 +42,7 @@ const nodeStrokeColorFunc: StringFunc =
 
 const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
 
-const shapeRendering: ShapeRendering =
-  (window && typeof window === 'undefined') || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
+const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
 const viewBox = computed(() => {
   const bb = getRectOfNodes(store.nodes)
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index d1726519..bdc99f7f 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -17,8 +17,11 @@ declare global {
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const EffectScope: typeof import('vue')['EffectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
@@ -39,6 +42,7 @@ declare global {
   const onMounted: typeof import('vue')['onMounted']
   const onRenderTracked: typeof import('vue')['onRenderTracked']
   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
diff --git a/src/composables/index.ts b/src/composables/index.ts
index 62157777..87f9bbd7 100644
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -3,6 +3,6 @@ export { default as useHooks } from './useHooks'
 export * from './useHooks'
 export { default as useKeyPress } from './useKeyPress'
 export { default as useUpdateNodeInternals } from './useUpdateNodeInternals'
-export { default as useZoom } from './useZoom'
 export { default as useZoomPanHelper } from './useZoomPanHelper'
 export { default as useStore } from './useStore'
+export { default as useWindow } from './useWindow'
diff --git a/src/composables/useKeyPress.ts b/src/composables/useKeyPress.ts
index 56db5eb6..33cb4c06 100644
--- a/src/composables/useKeyPress.ts
+++ b/src/composables/useKeyPress.ts
@@ -1,9 +1,11 @@
 import { Ref } from 'vue'
 import { onKeyDown, onKeyPressed, onKeyUp } from '@vueuse/core'
 import { KeyCode } from '../types'
+import useWindow from './useWindow'
 
 // todo cancel keypress for input dom nodes
 export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref<boolean> => {
+  const window = useWindow()
   const isPressed = controlledRef<boolean>(false, {
     onBeforeChange(val, oldVal) {
       if (val === oldVal) return false
@@ -37,11 +39,9 @@ export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref
     },
   )
 
-  if (window && typeof window !== 'undefined') {
-    useEventListener(window, 'blur', () => {
-      isPressed.value = false
-    })
-  }
+  useEventListener(window, 'blur', () => {
+    isPressed.value = false
+  })
 
   if (onChange && typeof onChange === 'function') onChange(isPressed.value)
 
diff --git a/src/composables/useWindow.ts b/src/composables/useWindow.ts
new file mode 100644
index 00000000..64512cd3
--- /dev/null
+++ b/src/composables/useWindow.ts
@@ -0,0 +1,6 @@
+import { ssrWindow } from 'ssr-window'
+
+export default (): Window & typeof globalThis & { chrome?: any } => {
+  if (typeof window !== 'undefined') return window
+  else return ssrWindow as any
+}
diff --git a/src/composables/useZoom.ts b/src/composables/useZoom.ts
deleted file mode 100644
index de86f78d..00000000
--- a/src/composables/useZoom.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import { D3ZoomEvent, zoom, zoomIdentity, ZoomTransform } from 'd3-zoom'
-import { pointer, select } from 'd3-selection'
-import { Ref } from 'vue'
-import { get } from '@vueuse/core'
-import { FlowTransform, PanOnScrollMode, UseZoom, UseZoomOptions } from '../types'
-import { clamp } from '../utils'
-import useKeyPress from './useKeyPress'
-import useHooks from './useHooks'
-import useStore from './useStore'
-
-const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
-  prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k
-
-const eventToFlowTransform = (eventTransform: ZoomTransform): FlowTransform => ({
-  x: eventTransform.x,
-  y: eventTransform.y,
-  zoom: eventTransform.k,
-})
-
-export default (el: Ref<HTMLDivElement>, options: UseZoomOptions): UseZoom => {
-  const {
-    selectionKeyCode = 'Shift',
-    zoomActivationKeyCode = 'Meta',
-    defaultZoom = 1,
-    defaultPosition = [0, 0],
-    zoomOnScroll = true,
-    zoomOnPinch = true,
-    zoomOnDoubleClick = true,
-    panOnScroll = false,
-    panOnScrollSpeed = 0.5,
-    panOnScrollMode = PanOnScrollMode.Free,
-    paneMoveable = true,
-  } = options
-  const hooks = useHooks()
-  const store = useStore()
-  const prevTransform = ref<FlowTransform>({ x: 0, y: 0, zoom: 0 })
-
-  const clampedX = clamp(defaultPosition[0], store.translateExtent[0][0], store.translateExtent[1][0])
-  const clampedY = clamp(defaultPosition[1], store.translateExtent[0][1], store.translateExtent[1][1])
-  const clampedZoom = clamp(defaultZoom, store.minZoom, store.maxZoom)
-  const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
-  biSyncRef(transform, prevTransform)
-
-  const d3Zoom = ref(
-    zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent),
-  )
-  const d3Selection = ref()
-
-  until(el)
-    .toBeTruthy()
-    .then(() => {
-      const d3z = get(d3Zoom)!
-      d3Selection.value = select(el.value).call(d3z)
-      const d3s = get(d3Selection)!
-      const d3ZoomHandler = d3s.on('wheel.zoom')
-
-      const updatedTransform = zoomIdentity.translate(clampedX, clampedY).scale(clampedZoom)
-      d3z.transform(d3s, updatedTransform)
-      store.initD3Zoom({ d3Zoom: d3z, d3Selection: d3s, d3ZoomHandler })
-      store.transform = [updatedTransform.x, updatedTransform.y, updatedTransform.k]
-
-      const applyZoomHandlers = () => {
-        d3z.on('start', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-          if (viewChanged(prevTransform.value, event.transform)) {
-            const flowTransform = eventToFlowTransform(event.transform)
-            prevTransform.value = flowTransform
-
-            hooks.moveStart.trigger(flowTransform)
-          }
-        })
-
-        d3z.on('end', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-          if (viewChanged(prevTransform.value, event.transform)) {
-            const flowTransform = eventToFlowTransform(event.transform)
-            prevTransform.value = flowTransform
-
-            hooks.moveEnd.trigger(flowTransform)
-          }
-        })
-
-        useKeyPress(selectionKeyCode, (keyPress) => {
-          if (keyPress) {
-            d3z.on('zoom', null)
-          } else {
-            d3z.on('zoom', (event: D3ZoomEvent<HTMLDivElement, any>) => {
-              const flowTransform = eventToFlowTransform(event.transform)
-              prevTransform.value = flowTransform
-
-              hooks.move.trigger(flowTransform)
-            })
-          }
-        })
-
-        useKeyPress(zoomActivationKeyCode, (keyPress) => {
-          if (panOnScroll && keyPress) {
-            d3s
-              ?.on('wheel', (event: WheelEvent) => {
-                event.preventDefault()
-                event.stopImmediatePropagation()
-
-                const currentZoom = d3s?.property('__zoom').k || 1
-
-                if (event.ctrlKey && zoomOnPinch) {
-                  const point = pointer(event)
-                  // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
-                  const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10
-                  const zoom = currentZoom * Math.pow(2, pinchDelta)
-                  if (d3s) d3z.scaleTo(d3s, zoom, point)
-
-                  return
-                }
-
-                // increase scroll speed in firefox
-                // firefox: deltaMode === 1; chrome: deltaMode === 0
-                const deltaNormalize = event.deltaMode === 1 ? 20 : 1
-                const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize
-                const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize
-
-                if (d3s && panOnScrollSpeed)
-                  d3z?.translateBy(d3s, -(deltaX / currentZoom) * panOnScrollSpeed, -(deltaY / currentZoom) * panOnScrollSpeed)
-              })
-              .on('wheel.zoom', null)
-          } else if (typeof d3ZoomHandler !== 'undefined') {
-            d3s?.on('wheel', null).on('wheel.zoom', d3ZoomHandler)
-          }
-        })
-      }
-
-      const applyZoomFilter = () => {
-        const keyPress = useKeyPress(selectionKeyCode)
-        d3z.filter((event: MouseEvent) => {
-          const zoomScroll = zoomOnScroll
-          const pinchZoom = zoomOnPinch && event.ctrlKey
-
-          // if all interactions are disabled, we prevent all zoom events
-          if (!paneMoveable && !zoomScroll && !panOnScroll && !zoomOnDoubleClick && !zoomOnPinch) return false
-
-          // during a selection we prevent all other interactions
-          if (keyPress.value) return false
-
-          // if zoom on double click is disabled, we prevent the double click event
-          if (!zoomOnDoubleClick && event.type === 'dblclick') return false
-
-          if ((event.target as Element).closest('.nowheel') && event.type === 'wheel') return false
-
-          // when the target element is a node, we still allow zooming
-          if (
-            ((event.target as Element).closest('.vue-flow__node') || (event.target as Element).closest('.vue-flow__edge')) &&
-            event.type !== 'wheel'
-          )
-            return false
-
-          // when the target element is a node selection, we still allow zooming
-          if ((event.target as Element).closest('.vue-flow__nodesselection') && event.type !== 'wheel') return false
-
-          if (!zoomOnPinch && event.ctrlKey && event.type === 'wheel') return false
-
-          // when there is no scroll handling enabled, we prevent all wheel events
-          if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') return false
-
-          // if the pane is not movable, we prevent dragging it with mousestart or touchstart
-          if (!paneMoveable && (event.type === 'mousedown' || event.type === 'touchstart')) return false
-
-          // default filter for d3-zoom
-          return (!event.ctrlKey || event.type === 'wheel') && !event.button
-        })
-      }
-
-      applyZoomHandlers()
-      applyZoomFilter()
-    })
-
-  return { transform, d3Zoom, d3Selection }
-}
diff --git a/src/index.ts b/src/index.ts
index 3f2bc34d..e2984ea2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-export { default } from './container/Flow/Flow.vue'
+export { default as Flow } from './container/Flow/Flow.vue'
 export { default as Handle } from './components/Handle/Handle.vue'
 export { default as EdgeText } from './components/Edges/EdgeText.vue'
 export { getBezierPath, getSmoothStepPath, getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils'
diff --git a/src/plugin/nuxt.ts b/src/plugin/nuxt.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/utils/graph.ts b/src/utils/graph.ts
index 37fe05c0..4978db39 100644
--- a/src/utils/graph.ts
+++ b/src/utils/graph.ts
@@ -13,6 +13,7 @@ import {
   Dimensions,
   FlowStore,
 } from '../types'
+import { useWindow } from '../composables'
 
 export const isInputDOMNode = (e: KeyboardEvent | MouseEvent): boolean => {
   const target = e.target as HTMLElement
@@ -33,6 +34,8 @@ export const clampPosition = (position: XYPosition, extent: NodeExtent): XYPosit
 
 export const getHostForElement = (element: HTMLElement): Document => {
   const doc = element.getRootNode() as Document
+  const window = useWindow()
+
   if ('getElementFromPoint' in doc) return doc
   else return window.document
 }
diff --git a/yarn.lock b/yarn.lock
index 5b1a89c4..e4414ee4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4815,6 +4815,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+ssr-window@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-4.0.0.tgz#4ee82fc360c5f88a022f321740bcfec59ada1a61"
+  integrity sha512-qCg6wJNeGNTVcPK2KFNfwtHU1gA3UZDZdxogu+Ys5+Ue5PMOENxUb7sscpAWWo4mWOBkJRCwQ50IlyA7qZ0hxw==
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"