diff --git a/package.json b/package.json
index 014fa1a..4b50e21 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "dev": "webpack-dev-server --mode=development"
   },
   "peerDependencies": {
-    "vue": "^3.0.0-rc.12"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.1",
@@ -29,7 +29,7 @@
     "@rollup/plugin-replace": "^2.3.3",
     "@types/webpack": "^4.41.21",
     "@types/webpack-env": "^1.15.2",
-    "@vue/compiler-sfc": "^3.0.0-rc.12",
+    "@vue/compiler-sfc": "^3.0.0",
     "css-loader": "^4.2.0",
     "html-webpack-plugin": "^4.3.0",
     "rollup": "^2.23.0",
@@ -41,7 +41,7 @@
     "ts-loader": "^8.0.2",
     "ts-node": "^8.10.2",
     "typescript": "^3.9.7",
-    "vue": "^3.0.0-rc.12",
+    "vue": "^3.0.0",
     "vue-loader": "^16.0.0-beta.7",
     "webpack": "^4.44.1",
     "webpack-bundle-analyzer": "^3.8.0",
diff --git a/playground/App.vue b/playground/App.vue
index 6f1c45e..b79b474 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -57,12 +57,26 @@
 
     <div class="mt-6">
       <span class="font-semibold mr-4">Tippy component + change content and props realtime using component ref:</span>
-      <tippy ref="tippyComponent1">
+      <tippy
+        ref="tippyComponent1"
+        @create="log"
+        @hide="log"
+      >
         <button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">
           Tippy Component + h(SFC) content
         </button>
       </tippy>
     </div>
+
+    <div class="mt-6">
+      <span class="font-semibold mr-4">v-tippy:</span>
+      <button
+        class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
+        @mount="log"
+        v-tippy="{ content: 'Hello ' +  counter}"
+      >Tippy directive</button>
+
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -76,10 +90,9 @@ import {
   onUnmounted,
   watch,
 } from 'vue'
-import { useTippy, tippy, TippyOptions, TippyComponent } from '../src'
+import { useTippy, TippyOptions, TippyComponent } from '../src'
 import Counter from './Counter.vue'
 
-tippy.setDefaultProps({ placement: 'right' })
 function useMousePosition() {
   const x = ref(0)
   const y = ref(0)
@@ -210,6 +223,7 @@ export default defineComponent({
     })
 
     return {
+      counter,
       button,
       button2,
       button3,
@@ -218,6 +232,7 @@ export default defineComponent({
       button6,
       button6Inc,
       tippyComponent1,
+      log: console.log,
     }
   },
 })
diff --git a/playground/main.ts b/playground/main.ts
index 6ab5752..e51762f 100644
--- a/playground/main.ts
+++ b/playground/main.ts
@@ -1,9 +1,11 @@
 // necessary for webpack
 ///<reference path="../src/global.d.ts"/>
 import { createApp } from 'vue'
-import { Tippy } from '../src'
+import VueTippy from '../src'
 
 import App from './App.vue'
 const app = createApp(App)
-app.component('tippy', Tippy)
+app.use(VueTippy, {
+  defaultProps: { placement: 'right' },
+})
 app.mount('#app')
diff --git a/src/composables/useTippy.ts b/src/composables/useTippy.ts
index 50ed01a..e75917b 100644
--- a/src/composables/useTippy.ts
+++ b/src/composables/useTippy.ts
@@ -106,10 +106,7 @@ export function useTippy(
     }
 
     onUnmounted(() => {
-      if (instance.value) {
-        instance.value.destroy()
-      }
-      container = null
+      destroy()
     })
   } else {
     init()
@@ -129,11 +126,19 @@ export function useTippy(
     instance.value?.setProps(getProps(value))
   }
 
+  const destroy = () => {
+    if (instance.value) {
+      instance.value.destroy()
+    }
+    container = null
+  }
+
   return {
     tippy: instance,
     refresh,
     refreshContent,
     setContent,
     setProps,
+    destroy,
   }
 }
diff --git a/src/directive/index.ts b/src/directive/index.ts
new file mode 100644
index 0000000..e618004
--- /dev/null
+++ b/src/directive/index.ts
@@ -0,0 +1,77 @@
+import { useTippy } from '../composables'
+import { Directive } from 'vue'
+
+const directive: Directive = {
+  mounted(el, binding, vnode) {
+    const opts = binding.value || {}
+
+    if (vnode.props && vnode.props.onShow) {
+      opts.onShow = function (...args: any[]) {
+        return vnode.props?.onShow(...args)
+      }
+    }
+
+    if (vnode.props && vnode.props.onShown) {
+      opts.onShown = function (...args: any[]) {
+        return vnode.props?.onShown(...args)
+      }
+    }
+
+    if (vnode.props && vnode.props.onHidden) {
+      opts.onHidden = function (...args: any[]) {
+        return vnode.props?.onHidden(...args)
+      }
+    }
+
+    if (vnode.props && vnode.props.onHide) {
+      opts.onHide = function (...args: any[]) {
+        return vnode.props?.onHide(...args)
+      }
+    }
+
+    if (vnode.props && vnode.props.onMount) {
+      opts.onMount = function (...args: any[]) {
+        return vnode.props?.onMount(...args)
+      }
+    }
+
+    if (el.getAttribute('title') && !opts.content) {
+      opts.content = el.getAttribute('title')
+      el.removeAttribute('title')
+    }
+
+    if (el.getAttribute('content') && !opts.content) {
+      opts.content = el.getAttribute('content')
+    }
+
+    el.$tippy = useTippy(el, opts)
+  },
+  unmounted(el) {
+    if (el.$tippy) {
+      el.$tippy.destroy()
+    } else if (el._tippy) {
+      el._tippy.destroy()
+    }
+  },
+
+  updated(el, binding) {
+    const opts = binding.value || {}
+
+    if (el.getAttribute('title') && !opts.content) {
+      opts.content = el.getAttribute('title')
+      el.removeAttribute('title')
+    }
+
+    if (el.getAttribute('content') && !opts.content) {
+      opts.content = el.getAttribute('content')
+    }
+
+    if (el.$tippy) {
+      el.$tippy.setProps(opts || {})
+    } else if (el._tippy) {
+      el._tippy.setProps(opts || {})
+    }
+  },
+}
+
+export default directive
diff --git a/src/index.ts b/src/index.ts
index a918609..461d96d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,7 +4,11 @@ import tippy, {
   followCursor,
   animateFill,
 } from 'tippy.js'
+
 import Tippy from './components/Tippy'
+import directive from './directive'
+import plugin from './plugin'
+
 import { useTippy } from './composables/useTippy'
 import 'tippy.js/dist/tippy.css'
 
@@ -14,5 +18,7 @@ setDefaultProps({
   plugins: [sticky, inlinePositioning, followCursor, animateFill],
 })
 
-export { useTippy, tippy, setDefaultProps, Tippy }
+export { useTippy, tippy, setDefaultProps, Tippy, directive }
+
 export * from './types'
+export default plugin
diff --git a/src/plugin/index.ts b/src/plugin/index.ts
new file mode 100644
index 0000000..06d2ce7
--- /dev/null
+++ b/src/plugin/index.ts
@@ -0,0 +1,16 @@
+import TippyComponent from '../components/Tippy'
+import directive from '../directive'
+import { Plugin } from 'vue'
+import tippy from 'tippy.js'
+import { TippyPluginOptions } from '../types'
+
+const plugin: Plugin = {
+  install(app, options: TippyPluginOptions) {
+    tippy.setDefaultProps(options.defaultProps || {})
+
+    app.directive(options.directive || 'tippy', directive)
+    app.component(options.component || 'tippy', TippyComponent)
+  },
+}
+
+export default plugin
diff --git a/src/types/index.ts b/src/types/index.ts
index 3d2feba..fbd5d3a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,5 @@
 import Tippy from '../components/Tippy'
-import { Props, Content } from 'tippy.js'
+import { Props, Content, DefaultProps } from 'tippy.js'
 import { VNode, Ref, Component } from 'vue'
 
 export declare type TippyContent = Content | VNode | Component | Ref
@@ -11,3 +11,9 @@ export declare type TippyOptions = Partial<
 >
 
 export declare type TippyComponent = InstanceType<typeof Tippy>
+
+export interface TippyPluginOptions {
+  directive?: string
+  component?: string
+  defaultProps?: Partial<DefaultProps>
+}
diff --git a/yarn.lock b/yarn.lock
index d3d67a8..4adba8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -202,36 +202,36 @@
     "@types/webpack-sources" "*"
     source-map "^0.6.0"
 
-"@vue/compiler-core@3.0.0-rc.12":
-  version "3.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.0-rc.12.tgz#eb26ff2f7e0eb8b362606228b2dda59c0c914f63"
-  integrity sha512-TuOmPb5SXgK9qD/AAmy46j80CyKThiBppcgNIJTax1ZWLEtCU8JejXOJqXFcqDUrBJPy7WVtZWRjMsiZBjIlrQ==
+"@vue/compiler-core@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.0.tgz#25e4f079cf6c39f83bad23700f814c619105a0f2"
+  integrity sha512-XqPC7vdv4rFE77S71oCHmT1K4Ks3WE2Gi6Lr4B5wn0Idmp+NyQQBUHsCNieMDRiEpgtJrw+yOHslrsV0AfAsfQ==
   dependencies:
     "@babel/parser" "^7.11.5"
     "@babel/types" "^7.11.5"
-    "@vue/shared" "3.0.0-rc.12"
+    "@vue/shared" "3.0.0"
     estree-walker "^2.0.1"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.0.0-rc.12":
-  version "3.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.12.tgz#b8468cb3f81d43ca25592026482e1330b99f2b8c"
-  integrity sha512-bCbXtJRYDaQL0e8i54rzUhmlB991ad08TAHiXyRK6ngTj9pO6lpJNcaHIeeOEv9gaZ6iUC7pEYtmC0708KkqDg==
+"@vue/compiler-dom@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.0.tgz#4cbb48fcf1f852daef2babcf9953b681ac463526"
+  integrity sha512-ukDEGOP8P7lCPyStuM3F2iD5w2QPgUu2xwCW2XNeqPjFKIlR2xMsWjy4raI/cLjN6W16GtlMFaZdK8tLj5PRog==
   dependencies:
-    "@vue/compiler-core" "3.0.0-rc.12"
-    "@vue/shared" "3.0.0-rc.12"
+    "@vue/compiler-core" "3.0.0"
+    "@vue/shared" "3.0.0"
 
-"@vue/compiler-sfc@^3.0.0-rc.12":
-  version "3.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.12.tgz#eff29e9688b8ed840506d88b94336689cf2970f2"
-  integrity sha512-lHy0LK33KjVBeu6aCX0oLUSZtatOIY/1w927Fh5nFrN1SNnqA31q2wg/IDmvNU6+Y6F3s0MZyN5H6dyZgO5r/g==
+"@vue/compiler-sfc@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.0.tgz#efa38037984bd64aae315828aa5c1248c6eadca9"
+  integrity sha512-1Bn4L5jNRm6tlb79YwqYUGGe+Yc9PRoRSJi67NJX6icdhf84+tRMtESbx1zCLL9QixQXu2+7aLkXHxvh4RpqAA==
   dependencies:
     "@babel/parser" "^7.11.5"
     "@babel/types" "^7.11.5"
-    "@vue/compiler-core" "3.0.0-rc.12"
-    "@vue/compiler-dom" "3.0.0-rc.12"
-    "@vue/compiler-ssr" "3.0.0-rc.12"
-    "@vue/shared" "3.0.0-rc.12"
+    "@vue/compiler-core" "3.0.0"
+    "@vue/compiler-dom" "3.0.0"
+    "@vue/compiler-ssr" "3.0.0"
+    "@vue/shared" "3.0.0"
     consolidate "^0.16.0"
     estree-walker "^2.0.1"
     hash-sum "^2.0.0"
@@ -243,42 +243,42 @@
     postcss-selector-parser "^6.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.0.0-rc.12":
-  version "3.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.12.tgz#ea37bfb616d90c376a5ef40bc65c57514bb6fef3"
-  integrity sha512-mJkTLS91Ji7ahZT8tuYnXJ+C0dzpwq6uIILVx2e82jHzPQ2Yl0owK5wVGJR1Kuy5ZT+9AczyyBgvxGiZjsFzdw==
+"@vue/compiler-ssr@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.0.tgz#d717abcd23a89fb38d1497228633a21bcf9a0e28"
+  integrity sha512-Er41F9ZFyKB3YnNbE6JSTIGCVWve3NAQimgDOk4uP42OnckxBYKGBTutDeFNeqUZBMu/9vRHYrxlGFC9Z5jBVQ==
   dependencies:
-    "@vue/compiler-dom" "3.0.0-rc.12"
-    "@vue/shared" "3.0.0-rc.12"
+    "@vue/compiler-dom" "3.0.0"
+    "@vue/shared" "3.0.0"
 
-"@vue/reactivity@3.0.0-rc.12":
-  version "3.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.0-rc.12.tgz#9f5c6da78729fe80cc47d23bc8b6c09b36998a29"
-  integrity sha512-Cz2wwwH7QpG2BDmmZ9Lia+soji9i3QjzMf1Mko3kIEHHGkeid6OxOaMXBEMCJjAyiRt+1VTHBZv6FgsUJeaDAQ==
+"@vue/reactivity@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.0.tgz#fd15632a608650ce2a969c721787e27e2c80aa6b"
+  integrity sha512-mEGkztGQrAPZRhV7C6PorrpT3+NtuA4dY2QjMzzrW31noKhssWTajRZTwpLF39NBRrF5UU6cp9+1I0FfavMgEQ==
   dependencies:
-    "@vue/shared" "3.0.0-rc.12"
+    "@vue/shared" "3.0.0"
 
-"@vue/runtime-core@3.0.0-rc.12":
-  version "3.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.0-rc.12.tgz#021dbfabe5f50043790fb80d5235b6cedb3de4ac"
-  integrity sha512-RHt02volaaXwbkS3RJpLVSZm/qRQgqwB0ThWNlfb+FKcLwr1Bcyu08yrUXv2QI2mMbV4f/zInk6S44eUuuDcyg==
+"@vue/runtime-core@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.0.tgz#480febf1bfe32798b6abbd71a88f8e8b473a51c2"
+  integrity sha512-3ABMLeA0ZbeVNLbGGLXr+pNUwqXILOqz8WCVGfDWwQb+jW114Cm8djOHVVDoqdvRETQvDf8yHSUmpKHZpQuTkA==
   dependencies:
-    "@vue/reactivity" "3.0.0-rc.12"
-    "@vue/shared" "3.0.0-rc.12"
+    "@vue/reactivity" "3.0.0"
+    "@vue/shared" "3.0.0"
 
-"@vue/runtime-dom@3.0.0-rc.12":
-  version "3.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.12.tgz#cdc197736d6092bfcc39bdf50349a28f175d2103"
-  integrity sha512-CeJ+CxeE1nBIGd4OFiYHCyiXtnBZAvLCA+yq4IKnCn0IHwJVZJCpwXe8VvE7eU3eqNYatqN65kt6QgrYzu6m+Q==
+"@vue/runtime-dom@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.0.tgz#e0d1f7c7e22e1318696014cc3501e06b288c2e11"
+  integrity sha512-f312n5w9gK6mVvkDSj6/Xnot1XjlKXzFBYybmoy6ahAVC8ExbQ+LOWti1IZM/adU8VMNdKaw7Q53Hxz3y5jX8g==
   dependencies:
-    "@vue/runtime-core" "3.0.0-rc.12"
-    "@vue/shared" "3.0.0-rc.12"
+    "@vue/runtime-core" "3.0.0"
+    "@vue/shared" "3.0.0"
     csstype "^2.6.8"
 
-"@vue/shared@3.0.0-rc.12":
-  version "3.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.0-rc.12.tgz#b114d999d6f51191f4ff6b284fa7bddf4c8589bc"
-  integrity sha512-UwkiTl7XVQ3vu22t7JgUGLNXSxvsr500W43V2I1N4B3vxBRGB1OLzCjGPtXMIXtWhZlaaZzivEU1zmr5sqmgaw==
+"@vue/shared@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.0.tgz#ec089236629ecc0f10346b92f101ff4339169f1a"
+  integrity sha512-4XWL/avABGxU2E2ZF1eZq3Tj7fvksCMssDZUHOykBIMmh5d+KcAnQMC5XHMhtnA0NAvktYsA2YpdsVwVmhWzvA==
 
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
@@ -5697,14 +5697,14 @@ vue-loader@^16.0.0-beta.7:
     merge-source-map "^1.1.0"
     source-map "^0.6.1"
 
-vue@^3.0.0-rc.12:
-  version "3.0.0-rc.12"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0-rc.12.tgz#08849531c9255f290b552912ae52802c5bc323d5"
-  integrity sha512-T/oWhPRPzIRzPvTjf9mI8oENYlAPr9ThB4JAJXJE3dlRAN7lYzH+eh4yBGR9EsyC+pIEAabP/cnM19dcJBNl3A==
+vue@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0.tgz#cfb5df5c34efce319b113a1667d12b74dcfd9c90"
+  integrity sha512-ZMrAARZ32sGIaYKr7Fk2GZEBh/VhulSrGxcGBiAvbN4fhjl3tuJyNFbbbLFqGjndbLoBW66I2ECq8ICdvkKdJw==
   dependencies:
-    "@vue/compiler-dom" "3.0.0-rc.12"
-    "@vue/runtime-dom" "3.0.0-rc.12"
-    "@vue/shared" "3.0.0-rc.12"
+    "@vue/compiler-dom" "3.0.0"
+    "@vue/runtime-dom" "3.0.0"
+    "@vue/shared" "3.0.0"
 
 watchpack-chokidar2@^2.0.0:
   version "2.0.0"