diff --git a/.gitignore b/.gitignore
index 52eadcb1..d718f84d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -95,3 +95,5 @@ hasura/db_data/
 
 # Codegen types
 types/types.ts
+
+build
diff --git a/package.json b/package.json
index eec99509..c7852894 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
   },
   "license": "MIT",
   "author": "Burak Cakmakoglu",
-  "main": "dist/revue-flow.es.js",
+  "main": "dist/index.js",
+  "module": "dist/revue-flow.es.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
@@ -18,6 +19,7 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build && yarn build:dist",
     "build:dist": "rollup -c --environment NODE_ENV:production",
+    "build:app": "vite build -c vite.config.app.ts",
     "serve": "vite preview",
     "prepublishOnly": "yarn build",
     "test": "exit 0;",
@@ -31,7 +33,7 @@
     "d3-zoom": "^3.0.0",
     "fast-deep-equal": "^3.1.3",
     "pinia": "^2.0.0-beta.3",
-    "vue": "^3.0.5"
+    "vue-demi": "latest"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
@@ -67,7 +69,12 @@
     "rollup-plugin-typescript2": "^0.30.0",
     "typescript": "^4.3.5",
     "vite": "^2.3.8",
-    "vue-tsc": "^0.0.24"
+    "vue-tsc": "^0.0.24",
+    "vue": "^3.0.5"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.13",
+    "vue": "^2.6.0 || >=3.0.5"
   },
   "publishConfig": {
     "access": "public",
diff --git a/rollup.config.js b/rollup.config.js
index 524a1428..7a5e7fa0 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -14,7 +14,7 @@ const processEnv = isProd || isTesting ? 'production' : 'development';
 
 export const baseConfig = ({ injectCSS = true } = {}) => ({
   input: 'src/index.ts',
-  external: ['vue', (id) => id.includes('@babel/runtime')],
+  external: ['vue-demi', (id) => id.includes('@babel/runtime')],
   onwarn(warning, rollupWarn) {
     if (warning.code !== 'CIRCULAR_DEPENDENCY') {
       rollupWarn(warning);
diff --git a/src/App.vue b/src/App.vue
index 06efe323..9392ce97 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue-demi';
 import Basic from './Basic';
 
 export default defineComponent({
diff --git a/src/Basic.tsx b/src/Basic.tsx
index 317cbd33..177f3fc1 100644
--- a/src/Basic.tsx
+++ b/src/Basic.tsx
@@ -2,7 +2,7 @@ import { Connection, Edge, Elements, FlowElement, Node, OnLoadParams } from './t
 import { addEdge, isNode, removeElements } from './utils/graph';
 import RevueFlow from './container/RevueFlow';
 import { MiniMap, Controls, Background } from './additional-components';
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref } from 'vue-demi';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element);
diff --git a/src/additional-components/Background/index.tsx b/src/additional-components/Background/index.tsx
index 6abff8f2..9ba97e56 100644
--- a/src/additional-components/Background/index.tsx
+++ b/src/additional-components/Background/index.tsx
@@ -1,6 +1,6 @@
 import { BackgroundVariant } from '../../types';
 import { createGridDotsPath, createGridLinesPath } from './utils';
-import { computed, defineComponent, HTMLAttributes, PropType } from 'vue';
+import { computed, defineComponent, HTMLAttributes, PropType } from 'vue-demi';
 import store from '../../store';
 
 export interface BackgroundProps extends HTMLAttributes {
diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx
index 02de356c..2f4a9984 100644
--- a/src/additional-components/Controls/index.tsx
+++ b/src/additional-components/Controls/index.tsx
@@ -1,6 +1,6 @@
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 import { FitViewParams } from '../../types';
-import { defineComponent, HTMLAttributes, onMounted, PropType, ref } from 'vue';
+import { defineComponent, HTMLAttributes, onMounted, PropType, ref } from 'vue-demi';
 import store from '../../store';
 
 export interface ControlProps extends HTMLAttributes {
diff --git a/src/additional-components/MiniMap/MiniMapNode.tsx b/src/additional-components/MiniMap/MiniMapNode.tsx
index 9399aa9f..af2da9de 100644
--- a/src/additional-components/MiniMap/MiniMapNode.tsx
+++ b/src/additional-components/MiniMap/MiniMapNode.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 
 interface MiniMapNodeProps {
   x: number;
diff --git a/src/additional-components/MiniMap/index.tsx b/src/additional-components/MiniMap/index.tsx
index 3d4e2759..804cac15 100644
--- a/src/additional-components/MiniMap/index.tsx
+++ b/src/additional-components/MiniMap/index.tsx
@@ -1,7 +1,7 @@
 import { getRectOfNodes, getBoundsofRects } from '../../utils/graph';
 import { Node, Rect } from '../../types';
 import MiniMapNode from './MiniMapNode';
-import { computed, defineComponent, HTMLAttributes, PropType } from 'vue';
+import { computed, defineComponent, HTMLAttributes, PropType } from 'vue-demi';
 import store from '../../store';
 
 type StringFunc = (node: Node) => string;
diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx
index ef3731d8..1136ba13 100644
--- a/src/components/ConnectionLine/index.tsx
+++ b/src/components/ConnectionLine/index.tsx
@@ -1,4 +1,4 @@
-import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue';
+import { ref, defineComponent, CSSProperties, PropType, computed } from 'vue-demi';
 
 import { getBezierPath } from '../Edges/BezierEdge';
 import { getSmoothStepPath } from '../Edges/SmoothStepEdge';
diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx
index 40339d5c..ad271a85 100644
--- a/src/components/Edges/BezierEdge.tsx
+++ b/src/components/Edges/BezierEdge.tsx
@@ -1,4 +1,4 @@
-import { computed, CSSProperties, defineComponent, PropType } from 'vue';
+import { computed, CSSProperties, defineComponent, PropType } from 'vue-demi';
 
 import EdgeText from './EdgeText';
 
diff --git a/src/components/Edges/EdgeAnchor.tsx b/src/components/Edges/EdgeAnchor.tsx
index ef115c03..44412a31 100644
--- a/src/components/Edges/EdgeAnchor.tsx
+++ b/src/components/Edges/EdgeAnchor.tsx
@@ -1,5 +1,5 @@
 import { Position } from '../../types';
-import { defineComponent, HTMLAttributes, PropType } from 'vue';
+import { defineComponent, HTMLAttributes, PropType } from 'vue-demi';
 
 const shiftX = (x: number, shift: number, position: Position): number => {
   if (position === Position.Left) return x - shift;
diff --git a/src/components/Edges/EdgeText.tsx b/src/components/Edges/EdgeText.tsx
index dbe77585..9693d784 100644
--- a/src/components/Edges/EdgeText.tsx
+++ b/src/components/Edges/EdgeText.tsx
@@ -1,5 +1,5 @@
 import { EdgeTextProps, Rect } from '../../types';
-import { defineComponent, PropType, ref, watch } from 'vue';
+import { defineComponent, PropType, ref, watch } from 'vue-demi';
 
 const EdgeText = defineComponent({
   props: {
diff --git a/src/components/Edges/SmoothStepEdge.tsx b/src/components/Edges/SmoothStepEdge.tsx
index c3c2d806..af8a30c4 100644
--- a/src/components/Edges/SmoothStepEdge.tsx
+++ b/src/components/Edges/SmoothStepEdge.tsx
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue-demi';
 
 import EdgeText from './EdgeText';
 import { getMarkerEnd, getCenter } from './utils';
diff --git a/src/components/Edges/StepEdge.tsx b/src/components/Edges/StepEdge.tsx
index 19466a41..9dbbcb08 100644
--- a/src/components/Edges/StepEdge.tsx
+++ b/src/components/Edges/StepEdge.tsx
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue-demi';
 
 import { EdgeSmoothStepProps } from '../../types';
 import SmoothStepEdge from './SmoothStepEdge';
diff --git a/src/components/Edges/StraightEdge.tsx b/src/components/Edges/StraightEdge.tsx
index e0a1f910..44785b0b 100644
--- a/src/components/Edges/StraightEdge.tsx
+++ b/src/components/Edges/StraightEdge.tsx
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent } from 'vue-demi';
 
 import EdgeText from './EdgeText';
 import { getMarkerEnd } from './utils';
diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
index b0756095..d2f0e210 100644
--- a/src/components/Edges/wrapEdge.tsx
+++ b/src/components/Edges/wrapEdge.tsx
@@ -1,4 +1,4 @@
-import { Component, computed, defineComponent, ref } from 'vue';
+import { Component, computed, defineComponent, ref } from 'vue-demi';
 
 import store from '../../store';
 import { Edge, EdgeProps, Position, WrapEdgeProps } from '../../types';
diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx
index e7609635..91a34549 100644
--- a/src/components/Handle/index.tsx
+++ b/src/components/Handle/index.tsx
@@ -1,6 +1,6 @@
 import { Connection, ElementId, Position } from '../../types';
 import { onMouseDown, ValidConnectionFunc } from './handler';
-import { defineComponent, inject, PropType } from 'vue';
+import { defineComponent, inject, PropType } from 'vue-demi';
 import store from '../../store';
 
 const alwaysValid = () => true;
diff --git a/src/components/Nodes/DefaultNode.tsx b/src/components/Nodes/DefaultNode.tsx
index 0f541422..2bc252c8 100644
--- a/src/components/Nodes/DefaultNode.tsx
+++ b/src/components/Nodes/DefaultNode.tsx
@@ -1,6 +1,6 @@
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 
 const DefaultNode = defineComponent({
   name: 'DefaultNode',
diff --git a/src/components/Nodes/InputNode.tsx b/src/components/Nodes/InputNode.tsx
index 548e68eb..896bb4d1 100644
--- a/src/components/Nodes/InputNode.tsx
+++ b/src/components/Nodes/InputNode.tsx
@@ -1,6 +1,6 @@
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 
 const InputNode = defineComponent({
   name: 'InputNode',
diff --git a/src/components/Nodes/OutputNode.tsx b/src/components/Nodes/OutputNode.tsx
index 1a0fb900..056446c5 100644
--- a/src/components/Nodes/OutputNode.tsx
+++ b/src/components/Nodes/OutputNode.tsx
@@ -1,6 +1,6 @@
 import Handle from '../../components/Handle';
 import { NodeProps, Position } from '../../types';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 
 const OutputNode = defineComponent({
   name: 'OutputNode',
diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 155233b4..d8c771b4 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -1,5 +1,5 @@
 import { Node, WrapNodeProps } from '../../types';
-import { computed, CSSProperties, defineComponent, onMounted, provide, ref } from 'vue';
+import { computed, CSSProperties, defineComponent, onMounted, provide, ref } from 'vue-demi';
 import store from '../../store';
 
 export default (NodeComponent: any) => {
diff --git a/src/components/UserSelection/index.tsx b/src/components/UserSelection/index.tsx
index 3d7de3ae..453b4fd1 100644
--- a/src/components/UserSelection/index.tsx
+++ b/src/components/UserSelection/index.tsx
@@ -2,7 +2,7 @@
  * The user selection rectangle gets displayed when a user drags the mouse while pressing shift
  */
 import { XYPosition } from '../../types';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 import store from '../../store';
 
 type UserSelectionProps = {
diff --git a/src/container/EdgeRenderer/MarkerDefinitions.tsx b/src/container/EdgeRenderer/MarkerDefinitions.tsx
index cd8a8b01..4fd728dd 100644
--- a/src/container/EdgeRenderer/MarkerDefinitions.tsx
+++ b/src/container/EdgeRenderer/MarkerDefinitions.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 
 interface MarkerProps {
   id: string;
diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx
index d2189527..c962dff3 100644
--- a/src/container/EdgeRenderer/index.tsx
+++ b/src/container/EdgeRenderer/index.tsx
@@ -13,7 +13,7 @@ import {
   Transform,
   OnEdgeUpdateFunc
 } from '../../types';
-import { computed, CSSProperties, defineComponent, PropType } from 'vue';
+import { computed, CSSProperties, defineComponent, PropType } from 'vue-demi';
 import store from '../../store';
 
 interface EdgeRendererProps {
diff --git a/src/container/EdgeRenderer/utils.ts b/src/container/EdgeRenderer/utils.ts
index c070e82e..b035b89a 100644
--- a/src/container/EdgeRenderer/utils.ts
+++ b/src/container/EdgeRenderer/utils.ts
@@ -3,7 +3,7 @@ import wrapEdge from '../../components/Edges/wrapEdge';
 import { rectToBox } from '../../utils/graph';
 
 import { EdgeTypesType, EdgeProps, Position, Node, XYPosition, ElementId, HandleElement, Transform, Edge } from '../../types';
-import { Component } from 'vue';
+import { Component } from 'vue-demi';
 
 export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
   const standardTypes: EdgeTypesType = {
diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx
index e357fe3d..bb81644c 100644
--- a/src/container/FlowRenderer/index.tsx
+++ b/src/container/FlowRenderer/index.tsx
@@ -1,7 +1,7 @@
 import { GraphViewProps } from '../GraphView';
 import ZoomPane from '../ZoomPane';
 import UserSelection from '../../components/UserSelection';
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType } from 'vue-demi';
 import store from '../../store';
 
 type FlowRendererProps = Omit<
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 85a6bb21..9677d680 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -4,7 +4,7 @@ import EdgeRenderer from '../EdgeRenderer';
 import { onLoadProject, onLoadGetElements, onLoadToObject } from '../../utils/graph';
 import { RevueFlowProps } from '../RevueFlow';
 import { NodeTypesType, EdgeTypesType, ConnectionLineType, KeyCode } from '../../types';
-import { CSSProperties, defineComponent, onBeforeMount, onMounted, PropType, ref } from 'vue';
+import { CSSProperties, defineComponent, onBeforeMount, onMounted, PropType, ref } from 'vue-demi';
 import store from '../../store';
 import useZoomPanHelper from '../../hooks/useZoomPanHelper';
 
diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index 68a511c4..955437a0 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -1,6 +1,6 @@
 import { getNodesInside } from '../../utils/graph';
 import { Node, NodeTypesType, Edge } from '../../types';
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue-demi';
 import store from '../../store';
 
 interface NodeRendererProps {
diff --git a/src/container/RevueFlow/index.tsx b/src/container/RevueFlow/index.tsx
index aeca7911..25e06462 100644
--- a/src/container/RevueFlow/index.tsx
+++ b/src/container/RevueFlow/index.tsx
@@ -1,4 +1,4 @@
-import { computed, CSSProperties, defineComponent, HTMLAttributes, onUpdated, PropType } from 'vue';
+import { computed, CSSProperties, defineComponent, HTMLAttributes, onUpdated, PropType } from 'vue-demi';
 import GraphView from '../GraphView';
 import DefaultNode from '../../components/Nodes/DefaultNode';
 import InputNode from '../../components/Nodes/InputNode';
diff --git a/src/container/ZoomPane/index.tsx b/src/container/ZoomPane/index.tsx
index 179fa4bf..76c4a8a2 100644
--- a/src/container/ZoomPane/index.tsx
+++ b/src/container/ZoomPane/index.tsx
@@ -3,7 +3,7 @@ import { select, pointer } from 'd3-selection';
 
 import { clamp } from '../../utils';
 import { FlowTransform, TranslateExtent, PanOnScrollMode, KeyCode } from '../../types';
-import { defineComponent, onMounted, PropType, ref, watch } from 'vue';
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue-demi';
 import store from '../../store';
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
diff --git a/src/hooks/useGlobalKeyHandler.ts b/src/hooks/useGlobalKeyHandler.ts
index 5f027a54..48f305ad 100644
--- a/src/hooks/useGlobalKeyHandler.ts
+++ b/src/hooks/useGlobalKeyHandler.ts
@@ -2,7 +2,7 @@ import useKeyPress from './useKeyPress';
 import { isNode, getConnectedEdges } from '../utils/graph';
 import { Elements, KeyCode, ElementId, FlowElement } from '../types';
 import store from '../store';
-import { onMounted } from 'vue';
+import { onMounted } from 'vue-demi';
 
 interface HookParams {
   deleteKeyCode: KeyCode;
diff --git a/src/hooks/useKeyPress.ts b/src/hooks/useKeyPress.ts
index 571784b1..ba5016b6 100644
--- a/src/hooks/useKeyPress.ts
+++ b/src/hooks/useKeyPress.ts
@@ -1,6 +1,6 @@
 import { isInputDOMNode } from '../utils';
 import { KeyCode } from '../types';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue-demi';
 
 export default (keyCode?: KeyCode): boolean => {
   const keyPressed = ref<boolean>(false);
diff --git a/src/main.ts b/src/main.ts
index a9f733c7..21dc9fe3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import { createApp } from 'vue';
+import { createApp } from 'vue-demi';
 import App from './App.vue';
 
 const app = createApp(App);
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 9a8de2df..bdbd00b7 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,5 +1,5 @@
 declare module '*.vue' {
-  import { DefineComponent } from 'vue';
+  import { DefineComponent } from 'vue-demi';
   // eslint-disable-next-line @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>;
   export default component;
diff --git a/src/types/index.ts b/src/types/index.ts
index 89786b24..a8de90ea 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,5 @@
 import { Selection as D3Selection, ZoomBehavior } from 'd3';
-import { Component, HTMLAttributes, PropType, VNode } from 'vue';
+import { Component, HTMLAttributes, PropType, VNode } from 'vue-demi';
 
 export type ElementId = string;
 
diff --git a/vite.config.app.ts b/vite.config.app.ts
new file mode 100644
index 00000000..dd51ee42
--- /dev/null
+++ b/vite.config.app.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    outDir: 'build'
+  },
+  plugins: [
+    vue(),
+    vueJsx({
+      // options are passed on to @vue/babel-plugin-jsx
+    })
+  ]
+});
diff --git a/vite.config.ts b/vite.config.ts
index 9a6330d0..4c71a204 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,12 +13,12 @@ export default defineConfig({
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library
-      external: ['vue'],
+      external: ['vue-demi'],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {
-          'vue': 'Vue'
+          'vue-demi': 'VueDemi'
         },
         dir: 'dist',
         sourcemap: true,
@@ -28,7 +28,7 @@ export default defineConfig({
     }
   },
   optimizeDeps: {
-    exclude: ['vue']
+    exclude: ['vue-demi']
   },
   plugins: [
     vue(),
diff --git a/yarn.lock b/yarn.lock
index 7efe5e5e..24084748 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6599,9 +6599,9 @@ vite@^2.3.8:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vue@latest:
+vue-demi@latest:
   version "0.10.1"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-0.10.1.tgz#229b81395510f02f4ee255344557a12cc0120930"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.10.1.tgz#229b81395510f02f4ee255344557a12cc0120930"
   integrity sha512-L6Oi+BvmMv6YXvqv5rJNCFHEKSVu7llpWWJczqmAQYOdmPPw5PNYoz1KKS//Fxhi+4QP64dsPjtmvnYGo1jemA==
 
 vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.1.1, vue-eslint-parser@^7.6.0: