From 019918f17854a9eb4ca1b03d12533cea94854d2f Mon Sep 17 00:00:00 2001
From: Salvatore Tedde <microcipcip@gmail.com>
Date: Sun, 23 Feb 2020 02:11:14 +0000
Subject: [PATCH 1/2] feat(useCookie): Adding useCookie function

---
 README.md                                     |  4 +-
 package-lock.json                             | 11 +++
 package.json                                  |  2 +
 src/components/useCookie/index.ts             |  1 +
 .../useCookie/stories/UseCookieDemo.vue       | 83 +++++++++++++++++++
 src/components/useCookie/stories/useCookie.md | 23 +++++
 .../useCookie/stories/useCookie.story.ts      | 28 +++++++
 src/components/useCookie/useCookie.spec.ts    | 12 +++
 src/components/useCookie/useCookie.ts         | 48 +++++++++++
 src/vue-use-kit.ts                            |  1 +
 10 files changed, 212 insertions(+), 1 deletion(-)
 create mode 100755 src/components/useCookie/index.ts
 create mode 100755 src/components/useCookie/stories/UseCookieDemo.vue
 create mode 100755 src/components/useCookie/stories/useCookie.md
 create mode 100755 src/components/useCookie/stories/useCookie.story.ts
 create mode 100755 src/components/useCookie/useCookie.spec.ts
 create mode 100755 src/components/useCookie/useCookie.ts

diff --git a/README.md b/README.md
index 05c8f22..bd41ae1 100755
--- a/README.md
+++ b/README.md
@@ -104,7 +104,9 @@ Vue.use(VueCompositionAPI);
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo)
 - Side Effects
   - [`useBeforeUnload`](./src/components/useBeforeUnload/stories/useBeforeUnload.md) &mdash; shows browser alert when user try to reload or close the page.
-    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-usebeforeunload--demo)
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usebeforeunload--demo)
+  - [`useCookie`](./src/components/useCookie/stories/useCookie.md) &mdash; provides way to read, update and delete a cookie.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/side-effects-usecookie--demo)
 - UI
   - [`useClickAway`](./src/components/useClickAway/stories/useClickAway.md) &mdash; triggers callback when user clicks outside target area.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/ui-useclickaway--demo)
diff --git a/package-lock.json b/package-lock.json
index 6735421..b512594 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -3720,6 +3720,12 @@
       "integrity": "sha512-Q5hTcfdudEL2yOmluA1zaSyPbzWPmJ3XfSWeP3RyoYvS9hnje1ZyagrZOuQ6+1nQC1Gw+7gap3pLNL3xL6UBug==",
       "dev": true
     },
+    "@types/js-cookie": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.4.tgz",
+      "integrity": "sha512-WTfSE1Eauak/Nrg6cA9FgPTFvVawejsai6zXoq0QYTQ3mxONeRtGhKxa7wMlUzWWmzrmTeV+rwLjHgsCntdrsA==",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
@@ -12571,6 +12577,11 @@
         "nopt": "~4.0.1"
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
diff --git a/package.json b/package.json
index 3d69244..fcd920a 100755
--- a/package.json
+++ b/package.json
@@ -93,6 +93,7 @@
     "@storybook/theming": "^5.3.13",
     "@storybook/vue": "^5.3.13",
     "@types/jest": "^23.3.2",
+    "@types/js-cookie": "^2.2.4",
     "@types/node": "^10.11.0",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
@@ -138,6 +139,7 @@
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
+    "js-cookie": "^2.2.1",
     "throttle-debounce": "^2.1.0"
   }
 }
diff --git a/src/components/useCookie/index.ts b/src/components/useCookie/index.ts
new file mode 100755
index 0000000..cb8a8a9
--- /dev/null
+++ b/src/components/useCookie/index.ts
@@ -0,0 +1 @@
+export * from './useCookie'
diff --git a/src/components/useCookie/stories/UseCookieDemo.vue b/src/components/useCookie/stories/UseCookieDemo.vue
new file mode 100755
index 0000000..1111cd6
--- /dev/null
+++ b/src/components/useCookie/stories/UseCookieDemo.vue
@@ -0,0 +1,83 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>cookie</td>
+        <td>{{ cookie }}</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button
+            class="button is-primary"
+            @click="counter++ && updateCookie(`count${counter}`)"
+          >
+            Update cookie
+          </button>
+          <button class="button is-danger" @click="deleteCookie()">
+            Delete cookie
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td>jsonCookie</td>
+        <td>{{ jsonCookie }}</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button
+            class="button is-primary"
+            @click="
+              counter++ &&
+                jsonUpdateCookie({
+                  counter: counter,
+                  counterTest: `test${counter}`
+                })
+            "
+          >
+            Update json cookie
+          </button>
+          <button class="button is-danger" @click="jsonDeleteCookie()">
+            Delete json cookie
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref } from '@vue/composition-api'
+import { useCookie } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseCookieDemo',
+  setup() {
+    const counter = ref(0)
+
+    const { cookie, updateCookie, deleteCookie } = useCookie('normalCookie')
+
+    const {
+      cookie: jsonCookie,
+      updateCookie: jsonUpdateCookie,
+      deleteCookie: jsonDeleteCookie
+    } = useCookie('jsonCookie')
+
+    return {
+      cookie,
+      updateCookie,
+      deleteCookie,
+      jsonCookie,
+      jsonUpdateCookie,
+      jsonDeleteCookie,
+      counter
+    }
+  }
+})
+</script>
diff --git a/src/components/useCookie/stories/useCookie.md b/src/components/useCookie/stories/useCookie.md
new file mode 100755
index 0000000..a54767e
--- /dev/null
+++ b/src/components/useCookie/stories/useCookie.md
@@ -0,0 +1,23 @@
+# useCookie
+
+Vue function that provides way to read, update and delete a cookie.
+
+## Reference
+
+```typescript
+// function useCookie()
+```
+
+### Parameters
+
+- `value: string` lorem ipsa
+
+### Returns
+
+- `value: Ref<string>` lorem ipsa
+
+## Usage
+
+```html
+<template></template>
+```
diff --git a/src/components/useCookie/stories/useCookie.story.ts b/src/components/useCookie/stories/useCookie.story.ts
new file mode 100755
index 0000000..b972f34
--- /dev/null
+++ b/src/components/useCookie/stories/useCookie.story.ts
@@ -0,0 +1,28 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseCookieDemo from './UseCookieDemo.vue'
+
+const functionName = 'useCookie'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseCookieDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseCookieDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro></template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('side effects|useCookie', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)
diff --git a/src/components/useCookie/useCookie.spec.ts b/src/components/useCookie/useCookie.spec.ts
new file mode 100755
index 0000000..e534b76
--- /dev/null
+++ b/src/components/useCookie/useCookie.spec.ts
@@ -0,0 +1,12 @@
+// import { mount } from '@src/helpers/test'
+// import { useCookie } from '@src/vue-use-kit'
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('useCookie', () => {
+  it('should do something', () => {
+    // Add test here
+  })
+})
diff --git a/src/components/useCookie/useCookie.ts b/src/components/useCookie/useCookie.ts
new file mode 100755
index 0000000..577f544
--- /dev/null
+++ b/src/components/useCookie/useCookie.ts
@@ -0,0 +1,48 @@
+import Cookies from 'js-cookie'
+import { ref, Ref } from '@vue/composition-api'
+
+type CookieValueType = string | JSON
+
+const tryParse = (val: string, enableParsing: boolean) => {
+  if (!enableParsing) return val
+  try {
+    return JSON.parse(val)
+  } catch (err) {
+    return val
+  }
+}
+
+const tryStringify = (val: CookieValueType, enableParsing: boolean) => {
+  if (!enableParsing) return val
+  try {
+    return JSON.stringify(val)
+  } catch (err) {
+    return val
+  }
+}
+
+export function useCookie(cookieName: string, enableParseJSON = false) {
+  const getCookie = () => {
+    const cookieVal = Cookies.get(cookieName)
+    if (typeof cookieVal === 'undefined') return null
+    return tryParse(cookieVal, enableParseJSON)
+  }
+
+  const cookie = ref(getCookie())
+
+  const updateCookie = (
+    newVal: CookieValueType,
+    options?: Cookies.CookieAttributes
+  ) => {
+    const newCookieValue = tryStringify(newVal, enableParseJSON)
+    Cookies.set(cookieName, newCookieValue, options)
+    cookie.value = newVal
+  }
+
+  const deleteCookie = (options?: Cookies.CookieAttributes) => {
+    Cookies.remove(cookieName, options)
+    cookie.value = null
+  }
+
+  return { cookie, updateCookie, deleteCookie }
+}
diff --git a/src/vue-use-kit.ts b/src/vue-use-kit.ts
index 7b42b77..abe589e 100755
--- a/src/vue-use-kit.ts
+++ b/src/vue-use-kit.ts
@@ -24,3 +24,4 @@ export * from './components/useTimeoutFn'
 export * from './components/useTimeout'
 // Site Effects
 export * from './components/useBeforeUnload'
+export * from './components/useCookie'

From 95eeb1cead3541b745962275da480c0c75b0d823 Mon Sep 17 00:00:00 2001
From: Salvatore Tedde <microcipcip@gmail.com>
Date: Tue, 25 Feb 2020 01:17:50 +0000
Subject: [PATCH 2/2] improvement(useCookie): Adding tests and documentation,
 and also adding the @src/api file

---
 package-lock.json                             | 28 +++---
 package.json                                  |  3 +-
 src/api.ts                                    |  2 +
 .../stories/UseBeforeUnloadDemo.vue           |  2 +-
 .../stories/useBeforeUnload.md                |  2 +-
 .../useBeforeUnload/useBeforeUnload.spec.ts   |  2 +-
 .../useBeforeUnload/useBeforeUnload.ts        |  2 +-
 .../useClickAway/stories/UseClickAwayDemo.vue |  2 +-
 .../useClickAway/stories/useClickAway.md      |  2 +-
 .../useClickAway/useClickAway.spec.ts         |  2 +-
 src/components/useClickAway/useClickAway.ts   |  2 +-
 .../useCookie/stories/UseCookieDemo.vue       | 59 ++++++-----
 src/components/useCookie/stories/useCookie.md | 55 ++++++++++-
 src/components/useCookie/useCookie.spec.ts    | 97 ++++++++++++++++++-
 src/components/useCookie/useCookie.ts         | 60 +++++-------
 .../stories/UseFullscreenDemo.vue             |  2 +-
 .../useFullscreen/stories/useFullscreen.md    |  2 +-
 .../useFullscreen/useFullscreen.spec.ts       |  2 +-
 src/components/useFullscreen/useFullscreen.ts |  2 +-
 .../useGeolocation/useGeolocation.ts          |  2 +-
 .../useHover/stories/UseHoverDemo.vue         |  2 +-
 src/components/useHover/stories/useHover.md   |  2 +-
 src/components/useHover/useHover.spec.ts      |  2 +-
 src/components/useHover/useHover.ts           |  2 +-
 .../useIdle/stories/UseIdleDemo.vue           |  2 +-
 src/components/useIdle/useIdle.ts             |  2 +-
 .../stories/UseIntersectionElementDemo.vue    |  2 +-
 .../stories/useIntersection.md                |  2 +-
 .../useIntersection/useIntersection.spec.ts   |  2 +-
 .../useIntersection/useIntersection.ts        |  2 +-
 src/components/useInterval/useInterval.ts     |  2 +-
 .../stories/UseIntervalFnDemo.vue             |  2 +-
 .../useIntervalFn/stories/useIntervalFn.md    |  2 +-
 .../useIntervalFn/useIntervalFn.spec.ts       |  2 +-
 src/components/useIntervalFn/useIntervalFn.ts |  2 +-
 src/components/useLocation/useLocation.ts     |  2 +-
 .../useMedia/stories/UseMediaAdvancedDemo.vue |  2 +-
 src/components/useMedia/useMedia.ts           |  2 +-
 .../useMediaDevices/useMediaDevices.ts        |  2 +-
 .../useMouse/stories/UseMouseAdvancedDemo.vue |  2 +-
 src/components/useMouse/useMouse.ts           |  2 +-
 .../stories/UseMouseElementDemo.vue           |  2 +-
 .../useMouseElement/useMouseElement.spec.ts   |  2 +-
 .../useMouseElement/useMouseElement.ts        |  2 +-
 .../useMouseLeavePage/useMouseLeavePage.ts    |  2 +-
 src/components/useRaf/stories/UseRafDemo.vue  |  2 +-
 src/components/useRaf/useRaf.ts               |  2 +-
 .../useRafFn/stories/UseRafFnAdvancedDemo.vue |  2 +-
 .../useRafFn/stories/UseRafFnDemo.vue         |  2 +-
 src/components/useRafFn/stories/useRafFn.md   |  2 +-
 src/components/useRafFn/useRafFn.spec.ts      |  2 +-
 src/components/useRafFn/useRafFn.ts           |  9 +-
 .../useSampleComponent/useSampleComponent.ts  |  2 +-
 .../stories/UseSearchParamsDemo.vue           |  2 +-
 .../useSearchParams/useSearchParams.ts        |  3 +-
 .../useTimeout/stories/UseTimeoutDemo.vue     |  2 +-
 src/components/useTimeout/useTimeout.spec.ts  |  2 +-
 src/components/useTimeout/useTimeout.ts       |  2 +-
 .../useTimeoutFn/stories/UseTimeoutFnDemo.vue |  2 +-
 .../useTimeoutFn/stories/useTimeoutFn.md      |  2 +-
 .../useTimeoutFn/useTimeoutFn.spec.ts         |  2 +-
 src/components/useTimeoutFn/useTimeoutFn.ts   |  2 +-
 src/helpers/test.ts                           |  2 +-
 tsconfig.json                                 |  1 +
 64 files changed, 271 insertions(+), 154 deletions(-)
 create mode 100755 src/api.ts

diff --git a/package-lock.json b/package-lock.json
index b512594..984c754 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -3690,6 +3690,11 @@
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
       "dev": true
     },
+    "@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
+    },
     "@types/eslint-visitor-keys": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -3720,12 +3725,6 @@
       "integrity": "sha512-Q5hTcfdudEL2yOmluA1zaSyPbzWPmJ3XfSWeP3RyoYvS9hnje1ZyagrZOuQ6+1nQC1Gw+7gap3pLNL3xL6UBug==",
       "dev": true
     },
-    "@types/js-cookie": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.4.tgz",
-      "integrity": "sha512-WTfSE1Eauak/Nrg6cA9FgPTFvVawejsai6zXoq0QYTQ3mxONeRtGhKxa7wMlUzWWmzrmTeV+rwLjHgsCntdrsA==",
-      "dev": true
-    },
     "@types/json-schema": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
@@ -6664,8 +6663,7 @@
     "cookie": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
-      "dev": true
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
     },
     "cookie-signature": {
       "version": "1.0.6",
@@ -6673,6 +6671,15 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
+    "cookie-universal": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/cookie-universal/-/cookie-universal-2.1.1.tgz",
+      "integrity": "sha512-WolLEtABR5E6NLIgpgP0LT53C85iJmxqTF3YAx4tCIWl0mkwivzjQaVbXDQbUxKz4HRwiYLW1D8vh1SJIAkl8A==",
+      "requires": {
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
+      }
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -12577,11 +12584,6 @@
         "nopt": "~4.0.1"
       }
     },
-    "js-cookie": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
-    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
diff --git a/package.json b/package.json
index fcd920a..3d2955d 100755
--- a/package.json
+++ b/package.json
@@ -93,7 +93,6 @@
     "@storybook/theming": "^5.3.13",
     "@storybook/vue": "^5.3.13",
     "@types/jest": "^23.3.2",
-    "@types/js-cookie": "^2.2.4",
     "@types/node": "^10.11.0",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
@@ -139,7 +138,7 @@
     "vue-template-compiler": "^2.6.11"
   },
   "dependencies": {
-    "js-cookie": "^2.2.1",
+    "cookie-universal": "^2.1.1",
     "throttle-debounce": "^2.1.0"
   }
 }
diff --git a/src/api.ts b/src/api.ts
new file mode 100755
index 0000000..9787866
--- /dev/null
+++ b/src/api.ts
@@ -0,0 +1,2 @@
+export * from '@vue/composition-api'
+export { default } from '@vue/composition-api'
diff --git a/src/components/useBeforeUnload/stories/UseBeforeUnloadDemo.vue b/src/components/useBeforeUnload/stories/UseBeforeUnloadDemo.vue
index ada7bbe..7ce2394 100755
--- a/src/components/useBeforeUnload/stories/UseBeforeUnloadDemo.vue
+++ b/src/components/useBeforeUnload/stories/UseBeforeUnloadDemo.vue
@@ -31,7 +31,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref, watch } from '@vue/composition-api'
+import { ref, watch } from '@src/api'
 import { useBeforeUnload } from '@src/vue-use-kit'
 
 export default Vue.extend({
diff --git a/src/components/useBeforeUnload/stories/useBeforeUnload.md b/src/components/useBeforeUnload/stories/useBeforeUnload.md
index f66a7ad..0561489 100755
--- a/src/components/useBeforeUnload/stories/useBeforeUnload.md
+++ b/src/components/useBeforeUnload/stories/useBeforeUnload.md
@@ -45,7 +45,7 @@ function useBeforeUnload(
 
 <script lang="ts">
   import Vue from 'vue'
-  import { ref, watch } from '@vue/composition-api'
+  import { ref, watch } from '@src/api'
   import { useBeforeUnload } from 'vue-use-kit'
 
   export default Vue.extend({
diff --git a/src/components/useBeforeUnload/useBeforeUnload.spec.ts b/src/components/useBeforeUnload/useBeforeUnload.spec.ts
index e9e2254..259a2b4 100755
--- a/src/components/useBeforeUnload/useBeforeUnload.spec.ts
+++ b/src/components/useBeforeUnload/useBeforeUnload.spec.ts
@@ -4,7 +4,7 @@ import {
   checkOnStartEvents,
   checkOnStopEvents
 } from '@src/helpers/test'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useBeforeUnload } from '@src/vue-use-kit'
 
 afterEach(() => {
diff --git a/src/components/useBeforeUnload/useBeforeUnload.ts b/src/components/useBeforeUnload/useBeforeUnload.ts
index 93cc7df..57bef36 100755
--- a/src/components/useBeforeUnload/useBeforeUnload.ts
+++ b/src/components/useBeforeUnload/useBeforeUnload.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export function useBeforeUnload(isPageDirty: Ref<boolean>, runOnMount = true) {
   const isTracking = ref(false)
diff --git a/src/components/useClickAway/stories/UseClickAwayDemo.vue b/src/components/useClickAway/stories/UseClickAwayDemo.vue
index 452b102..8eeb89d 100755
--- a/src/components/useClickAway/stories/UseClickAwayDemo.vue
+++ b/src/components/useClickAway/stories/UseClickAwayDemo.vue
@@ -25,7 +25,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useClickAway } from '@src/vue-use-kit'
 
 export default Vue.extend({
diff --git a/src/components/useClickAway/stories/useClickAway.md b/src/components/useClickAway/stories/useClickAway.md
index d623e4b..a97d484 100755
--- a/src/components/useClickAway/stories/useClickAway.md
+++ b/src/components/useClickAway/stories/useClickAway.md
@@ -30,7 +30,7 @@ function useClickAway(
 
 <script lang="ts">
   import Vue from 'vue'
-  import { ref } from '@vue/composition-api'
+  import { ref } from '@src/api'
   import { useClickAway } from 'vue-use-kit'
 
   export default Vue.extend({
diff --git a/src/components/useClickAway/useClickAway.spec.ts b/src/components/useClickAway/useClickAway.spec.ts
index 871e79f..b1addc6 100755
--- a/src/components/useClickAway/useClickAway.spec.ts
+++ b/src/components/useClickAway/useClickAway.spec.ts
@@ -1,5 +1,5 @@
 import { checkOnMountAndUnmountEvents, mount } from '@src/helpers/test'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useClickAway } from '@src/vue-use-kit'
 
 afterEach(() => {
diff --git a/src/components/useClickAway/useClickAway.ts b/src/components/useClickAway/useClickAway.ts
index ae97b11..462a87e 100755
--- a/src/components/useClickAway/useClickAway.ts
+++ b/src/components/useClickAway/useClickAway.ts
@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { onMounted, onUnmounted, Ref } from '@src/api'
 
 const defaultEvents = ['mousedown', 'touchstart']
 
diff --git a/src/components/useCookie/stories/UseCookieDemo.vue b/src/components/useCookie/stories/UseCookieDemo.vue
index 1111cd6..5b46943 100755
--- a/src/components/useCookie/stories/UseCookieDemo.vue
+++ b/src/components/useCookie/stories/UseCookieDemo.vue
@@ -13,14 +13,11 @@
       </tr>
       <tr>
         <td colspan="2">
-          <button
-            class="button is-primary"
-            @click="counter++ && updateCookie(`count${counter}`)"
-          >
-            Update cookie
+          <button class="button is-primary" @click="handleSetCookie">
+            Set / Update cookie
           </button>
-          <button class="button is-danger" @click="deleteCookie()">
-            Delete cookie
+          <button class="button is-danger" @click="removeCookie()">
+            Remove cookie
           </button>
         </td>
       </tr>
@@ -30,20 +27,11 @@
       </tr>
       <tr>
         <td colspan="2">
-          <button
-            class="button is-primary"
-            @click="
-              counter++ &&
-                jsonUpdateCookie({
-                  counter: counter,
-                  counterTest: `test${counter}`
-                })
-            "
-          >
-            Update json cookie
+          <button class="button is-primary" @click="handleSetJsonCookie">
+            Set / Update JSON cookie
           </button>
-          <button class="button is-danger" @click="jsonDeleteCookie()">
-            Delete json cookie
+          <button class="button is-danger" @click="jsonRemoveCookie()">
+            Remove JSON cookie
           </button>
         </td>
       </tr>
@@ -53,29 +41,40 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref } from '@vue/composition-api'
 import { useCookie } from '@src/vue-use-kit'
 
 export default Vue.extend({
   name: 'UseCookieDemo',
   setup() {
-    const counter = ref(0)
-
-    const { cookie, updateCookie, deleteCookie } = useCookie('normalCookie')
+    const { cookie, setCookie, removeCookie } = useCookie('normalCookie')
 
     const {
       cookie: jsonCookie,
-      updateCookie: jsonUpdateCookie,
-      deleteCookie: jsonDeleteCookie
+      setCookie: jsonSetCookie,
+      removeCookie: jsonRemoveCookie
     } = useCookie('jsonCookie')
 
+    let counter = 0
+    const handleSetCookie = () => {
+      counter++
+      setCookie(`count${counter}`)
+    }
+
+    const handleSetJsonCookie = () => {
+      counter++
+      jsonSetCookie({
+        counter: counter,
+        counterTest: `test${counter}`
+      })
+    }
+
     return {
       cookie,
-      updateCookie,
-      deleteCookie,
+      handleSetCookie,
+      removeCookie,
       jsonCookie,
-      jsonUpdateCookie,
-      jsonDeleteCookie,
+      handleSetJsonCookie,
+      jsonRemoveCookie,
       counter
     }
   }
diff --git a/src/components/useCookie/stories/useCookie.md b/src/components/useCookie/stories/useCookie.md
index a54767e..86ec705 100755
--- a/src/components/useCookie/stories/useCookie.md
+++ b/src/components/useCookie/stories/useCookie.md
@@ -1,23 +1,68 @@
 # useCookie
 
-Vue function that provides way to read, update and delete a cookie.
+Vue function that provides way to read, set and remove a cookie.
 
 ## Reference
 
 ```typescript
-// function useCookie()
+function useCookie(
+  cookieName: string,
+  enableParseJSON?: boolean,
+  runOnMount?: boolean
+): {
+  cookie: Ref<any>
+  getCookie: () => void
+  setCookie: (newVal: any, options?: CookieSerializeOptions | undefined) => void
+  removeCookie: (options?: CookieSerializeOptions | undefined) => void
+}
 ```
 
 ### Parameters
 
-- `value: string` lorem ipsa
+- `cookieName: string` the cookie name you wish to get/set/remove
+- `enableParseJSON: boolean` whether to enable JSON parsing or not, `false` by default
+- `runOnMount: boolean` whether to get the cookie on mount or not, `true` by default
 
 ### Returns
 
-- `value: Ref<string>` lorem ipsa
+- `cookie: Ref<any>` the cookie value, it can be null, a string or a JSON object/array
+- `getCookie: Function` get the cookie value
+- `setCookie: Function` set the cookie value
+  - `newVal: any`: the value to set, can be a string or an object/array
+  - `options?: CookieSerializeOptions`: a [cookie](https://github.com/jshttp/cookie#options-1) options object
+- `removeCookie: Function` delete the cookie
+  - `options?: CookieSerializeOptions`: a [cookie](https://github.com/jshttp/cookie#options-1) options object
 
 ## Usage
 
 ```html
-<template></template>
+<template>
+  <div>
+    Cookie: {{ cookie }}
+
+    <button @click="getCookie">Get cookie</button>
+    <button @click="setCookie('Value here')">Set cookie</button>
+    <button @click="removeCookie">Remove cookie</button>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { useCookie } from 'vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseCookieDemo',
+  setup() {
+    const {
+      cookie, getCookie, setCookie, removeCookie
+    } = useCookie('i_love_cookies')
+
+    return {
+      cookie,
+      getCookie,
+      setCookie,
+      removeCookie,
+    }
+  }
+})
 ```
diff --git a/src/components/useCookie/useCookie.spec.ts b/src/components/useCookie/useCookie.spec.ts
index e534b76..4bd5853 100755
--- a/src/components/useCookie/useCookie.spec.ts
+++ b/src/components/useCookie/useCookie.spec.ts
@@ -1,12 +1,101 @@
-// import { mount } from '@src/helpers/test'
-// import { useCookie } from '@src/vue-use-kit'
+import { mount } from '@src/helpers/test'
+import { useCookie } from '@src/vue-use-kit'
+import { computed } from '@src/api'
 
 afterEach(() => {
+  document.cookie = ''
   jest.clearAllMocks()
 })
 
+const testComponent = (
+  cookieName = 'cookieName',
+  cookieValue: any = '',
+  parseJson = false,
+  onMount = true
+) => ({
+  template: `
+    <div>
+      <div id="cookie">{{ cookie }}</div>
+      <div id="cookieJson">{{ cookieValue1 }} - {{ cookieValue2 }}</div>
+      <button id="getCookie" @click="getCookie"></button>
+      <button id="setCookie" @click="setCookie(cookieValue)"></button>
+      <button id="removeCookie" @click="removeCookie"></button>
+    </div>
+  `,
+  setup() {
+    const { cookie, getCookie, setCookie, removeCookie } = useCookie(
+      cookieName,
+      parseJson,
+      onMount
+    )
+
+    const isObj = (objToCheck: any) =>
+      Object.prototype.toString.call(objToCheck) === '[object Object]'
+
+    const cookieValue1 = computed(
+      () => isObj(cookie.value) && cookie.value.value1
+    )
+    const cookieValue2 = computed(
+      () => isObj(cookie.value) && cookie.value.value2
+    )
+
+    return {
+      cookie,
+      getCookie,
+      setCookie,
+      removeCookie,
+      cookieValue,
+      cookieValue1,
+      cookieValue2
+    }
+  }
+})
+
 describe('useCookie', () => {
-  it('should do something', () => {
-    // Add test here
+  it('should get a cookie with the given value', async () => {
+    const cookieName = 'cookieName'
+    const cookieValue = 'cookieValue'
+    document.cookie = `${cookieName}=${cookieValue}`
+    const wrapper = mount(testComponent(cookieName))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.html()).toContain(cookieValue)
+  })
+
+  it('should set a cookie with the given value', async () => {
+    const cookieName = 'cookieName'
+    const cookieValue = 'cookieValue'
+    const wrapper = mount(testComponent(cookieName, cookieValue))
+    await wrapper.vm.$nextTick()
+    expect(document.cookie).toContain(cookieName)
+    expect(document.cookie).toContain(cookieValue)
+  })
+
+  it('should remove a cookie with the given value', async () => {
+    const cookieName = 'cookieName'
+    const cookieValue = 'cookieValue'
+    const wrapper = mount(testComponent(cookieName, cookieValue))
+    await wrapper.vm.$nextTick()
+    expect(document.cookie).toContain(cookieName)
+    expect(document.cookie).toContain(cookieValue)
+    wrapper.find('#removeCookie').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(document.cookie).not.toContain(cookieName)
+    expect(document.cookie).not.toContain(cookieValue)
+  })
+
+  it('should correctly get and set the parseToJson object', async () => {
+    const cookieName = 'cookieName'
+    const cookieValue = { value1: 'testValue1', value2: 'testValue2' }
+    const wrapper = mount(testComponent(cookieName, cookieValue, true))
+    wrapper.find('#setCookie').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#cookieJson').html()).toContain(cookieValue.value1)
+    expect(wrapper.find('#cookieJson').html()).toContain(cookieValue.value2)
+
+    // Also check that when clicking #getCookie we still get a proper JSON object
+    wrapper.find('#getCookie').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#cookieJson').html()).toContain(cookieValue.value1)
+    expect(wrapper.find('#cookieJson').html()).toContain(cookieValue.value2)
   })
 })
diff --git a/src/components/useCookie/useCookie.ts b/src/components/useCookie/useCookie.ts
index 577f544..702e7f6 100755
--- a/src/components/useCookie/useCookie.ts
+++ b/src/components/useCookie/useCookie.ts
@@ -1,48 +1,36 @@
-import Cookies from 'js-cookie'
-import { ref, Ref } from '@vue/composition-api'
+import Cookies from 'cookie-universal'
+import { CookieSerializeOptions } from 'cookie'
+import { ref, onMounted, Ref } from '@src/api'
+
+export function useCookie(
+  cookieName: string,
+  enableParseJSON = false,
+  runOnMount = true
+) {
+  const cookieLib = Cookies(undefined, undefined, enableParseJSON)
+  const cookie: Ref<any> = ref(null)
 
-type CookieValueType = string | JSON
-
-const tryParse = (val: string, enableParsing: boolean) => {
-  if (!enableParsing) return val
-  try {
-    return JSON.parse(val)
-  } catch (err) {
-    return val
-  }
-}
-
-const tryStringify = (val: CookieValueType, enableParsing: boolean) => {
-  if (!enableParsing) return val
-  try {
-    return JSON.stringify(val)
-  } catch (err) {
-    return val
-  }
-}
-
-export function useCookie(cookieName: string, enableParseJSON = false) {
   const getCookie = () => {
-    const cookieVal = Cookies.get(cookieName)
-    if (typeof cookieVal === 'undefined') return null
-    return tryParse(cookieVal, enableParseJSON)
+    const cookieVal = cookieLib.get(cookieName)
+    if (typeof cookieVal !== 'undefined') cookie.value = cookieVal
   }
 
-  const cookie = ref(getCookie())
-
-  const updateCookie = (
-    newVal: CookieValueType,
-    options?: Cookies.CookieAttributes
+  const setCookie = (
+    // The user may pass a 'string', a 'number', or a valid JSON object/array
+    // so it is better to set allowed cookie value as 'any'
+    newVal: any,
+    options?: CookieSerializeOptions
   ) => {
-    const newCookieValue = tryStringify(newVal, enableParseJSON)
-    Cookies.set(cookieName, newCookieValue, options)
+    cookieLib.set(cookieName, newVal, options)
     cookie.value = newVal
   }
 
-  const deleteCookie = (options?: Cookies.CookieAttributes) => {
-    Cookies.remove(cookieName, options)
+  const removeCookie = (options?: CookieSerializeOptions) => {
+    cookieLib.remove(cookieName, options)
     cookie.value = null
   }
 
-  return { cookie, updateCookie, deleteCookie }
+  onMounted(() => runOnMount && getCookie())
+
+  return { cookie, getCookie, setCookie, removeCookie }
 }
diff --git a/src/components/useFullscreen/stories/UseFullscreenDemo.vue b/src/components/useFullscreen/stories/UseFullscreenDemo.vue
index 2079cbc..9c2c17e 100755
--- a/src/components/useFullscreen/stories/UseFullscreenDemo.vue
+++ b/src/components/useFullscreen/stories/UseFullscreenDemo.vue
@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useFullscreen } from '@src/vue-use-kit'
 
 export default Vue.extend({
diff --git a/src/components/useFullscreen/stories/useFullscreen.md b/src/components/useFullscreen/stories/useFullscreen.md
index a500753..1f5b1bd 100755
--- a/src/components/useFullscreen/stories/useFullscreen.md
+++ b/src/components/useFullscreen/stories/useFullscreen.md
@@ -37,7 +37,7 @@ function useFullscreen(
 
 <script lang="ts">
   import Vue from 'vue'
-  import { ref } from '@vue/composition-api'
+  import { ref } from '@src/api'
   import { useFullscreen } from 'vue-use-kit'
 
   export default Vue.extend({
diff --git a/src/components/useFullscreen/useFullscreen.spec.ts b/src/components/useFullscreen/useFullscreen.spec.ts
index 37f1242..b9017f1 100755
--- a/src/components/useFullscreen/useFullscreen.spec.ts
+++ b/src/components/useFullscreen/useFullscreen.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@src/helpers/test'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useFullscreen } from '@src/vue-use-kit'
 
 // This feature is difficult to test therefore
diff --git a/src/components/useFullscreen/useFullscreen.ts b/src/components/useFullscreen/useFullscreen.ts
index b5e422d..6bb000f 100755
--- a/src/components/useFullscreen/useFullscreen.ts
+++ b/src/components/useFullscreen/useFullscreen.ts
@@ -1,4 +1,4 @@
-import { ref, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onUnmounted, Ref } from '@src/api'
 
 export function useFullscreen(elRef: Ref<null | HTMLElement>) {
   const isFullscreen = ref(false)
diff --git a/src/components/useGeolocation/useGeolocation.ts b/src/components/useGeolocation/useGeolocation.ts
index 827f50f..4a283db 100755
--- a/src/components/useGeolocation/useGeolocation.ts
+++ b/src/components/useGeolocation/useGeolocation.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export interface UseGeolocation {
   loading: boolean
diff --git a/src/components/useHover/stories/UseHoverDemo.vue b/src/components/useHover/stories/UseHoverDemo.vue
index 70b019b..e9b3594 100755
--- a/src/components/useHover/stories/UseHoverDemo.vue
+++ b/src/components/useHover/stories/UseHoverDemo.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useHover } from '@src/vue-use-kit'
 
 export default Vue.extend({
diff --git a/src/components/useHover/stories/useHover.md b/src/components/useHover/stories/useHover.md
index 6a6111e..bb43184 100755
--- a/src/components/useHover/stories/useHover.md
+++ b/src/components/useHover/stories/useHover.md
@@ -28,7 +28,7 @@ function useHover(elRef: Ref<null | HTMLElement>): Ref<boolean>
 
 <script lang="ts">
   import Vue from 'vue'
-  import { ref } from '@vue/composition-api'
+  import { ref } from '@src/api'
   import { useHover } from 'vue-use-kit'
 
   export default Vue.extend({
diff --git a/src/components/useHover/useHover.spec.ts b/src/components/useHover/useHover.spec.ts
index 1cd2e1f..c8a94fb 100755
--- a/src/components/useHover/useHover.spec.ts
+++ b/src/components/useHover/useHover.spec.ts
@@ -1,5 +1,5 @@
 import { checkOnMountAndUnmountEvents, mount } from '@src/helpers/test'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useHover } from '@src/vue-use-kit'
 
 afterEach(() => {
diff --git a/src/components/useHover/useHover.ts b/src/components/useHover/useHover.ts
index dd1a208..e116796 100755
--- a/src/components/useHover/useHover.ts
+++ b/src/components/useHover/useHover.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export function useHover(elRef: Ref<null | HTMLElement>) {
   const isHovered = ref(false)
diff --git a/src/components/useIdle/stories/UseIdleDemo.vue b/src/components/useIdle/stories/UseIdleDemo.vue
index 0f2369f..0758761 100755
--- a/src/components/useIdle/stories/UseIdleDemo.vue
+++ b/src/components/useIdle/stories/UseIdleDemo.vue
@@ -31,7 +31,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useIdle } from '@src/vue-use-kit'
 
 export default Vue.extend({
diff --git a/src/components/useIdle/useIdle.ts b/src/components/useIdle/useIdle.ts
index 32eb0f7..5c8625a 100755
--- a/src/components/useIdle/useIdle.ts
+++ b/src/components/useIdle/useIdle.ts
@@ -1,5 +1,5 @@
 import { throttle } from 'throttle-debounce'
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export const idleEventsList = [
   'mousemove',
diff --git a/src/components/useIntersection/stories/UseIntersectionElementDemo.vue b/src/components/useIntersection/stories/UseIntersectionElementDemo.vue
index c6c97f0..eb29336 100755
--- a/src/components/useIntersection/stories/UseIntersectionElementDemo.vue
+++ b/src/components/useIntersection/stories/UseIntersectionElementDemo.vue
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref, watch } from '@vue/composition-api'
+import { ref, watch } from '@src/api'
 import { useIntersection } from '@src/vue-use-kit'
 export default Vue.extend({
   name: 'UseIntersectionElementDemo',
diff --git a/src/components/useIntersection/stories/useIntersection.md b/src/components/useIntersection/stories/useIntersection.md
index f70abb5..72ee964 100755
--- a/src/components/useIntersection/stories/useIntersection.md
+++ b/src/components/useIntersection/stories/useIntersection.md
@@ -43,7 +43,7 @@ First we have to define the intersection component, named `UseIntersectionElDemo
 
 <script lang="ts">
   import Vue from 'vue'
-  import { ref, watch } from '@vue/composition-api'
+  import { ref, watch } from '@src/api'
   import { useIntersection } from 'vue-use-kit'
 
   export default Vue.extend({
diff --git a/src/components/useIntersection/useIntersection.spec.ts b/src/components/useIntersection/useIntersection.spec.ts
index c867cfb..8244f7c 100755
--- a/src/components/useIntersection/useIntersection.spec.ts
+++ b/src/components/useIntersection/useIntersection.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@src/helpers/test'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useIntersection } from '@src/vue-use-kit'
 
 let observe: any
diff --git a/src/components/useIntersection/useIntersection.ts b/src/components/useIntersection/useIntersection.ts
index ea75138..6b8b739 100755
--- a/src/components/useIntersection/useIntersection.ts
+++ b/src/components/useIntersection/useIntersection.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 const errorMsg =
   'IntersectionObserver is not supported, please install a polyfill'
diff --git a/src/components/useInterval/useInterval.ts b/src/components/useInterval/useInterval.ts
index 5fe917b..b56ad1d 100755
--- a/src/components/useInterval/useInterval.ts
+++ b/src/components/useInterval/useInterval.ts
@@ -1,4 +1,4 @@
-import { ref, Ref } from '@vue/composition-api'
+import { ref, Ref } from '@src/api'
 import { useIntervalFn } from '@src/components/useIntervalFn'
 
 export function useInterval(ms = 0, runOnMount = true) {
diff --git a/src/components/useIntervalFn/stories/UseIntervalFnDemo.vue b/src/components/useIntervalFn/stories/UseIntervalFnDemo.vue
index b495299..fe87e2b 100755
--- a/src/components/useIntervalFn/stories/UseIntervalFnDemo.vue
+++ b/src/components/useIntervalFn/stories/UseIntervalFnDemo.vue
@@ -27,7 +27,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useIntervalFn } from '@src/vue-use-kit'
 
 export default Vue.extend({
diff --git a/src/components/useIntervalFn/stories/useIntervalFn.md b/src/components/useIntervalFn/stories/useIntervalFn.md
index 12626b8..c39bbcd 100755
--- a/src/components/useIntervalFn/stories/useIntervalFn.md
+++ b/src/components/useIntervalFn/stories/useIntervalFn.md
@@ -42,7 +42,7 @@ function useIntervalFn(
 
 <script lang="ts">
   import Vue from 'vue'
-  import { ref } from '@vue/composition-api'
+  import { ref } from '@src/api'
   import { useIntervalFn } from 'vue-use-kit'
 
   export default Vue.extend({
diff --git a/src/components/useIntervalFn/useIntervalFn.spec.ts b/src/components/useIntervalFn/useIntervalFn.spec.ts
index 740bc4a..7e0c783 100755
--- a/src/components/useIntervalFn/useIntervalFn.spec.ts
+++ b/src/components/useIntervalFn/useIntervalFn.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@src/helpers/test'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useIntervalFn } from '@src/vue-use-kit'
 
 beforeEach(() => {
diff --git a/src/components/useIntervalFn/useIntervalFn.ts b/src/components/useIntervalFn/useIntervalFn.ts
index 0e78207..8f89ab8 100755
--- a/src/components/useIntervalFn/useIntervalFn.ts
+++ b/src/components/useIntervalFn/useIntervalFn.ts
@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, ref, Ref } from '@vue/composition-api'
+import { onMounted, onUnmounted, ref, Ref } from '@src/api'
 
 export function useIntervalFn(callback: Function, ms = 0, runOnMount = true) {
   const isRunning = ref(false)
diff --git a/src/components/useLocation/useLocation.ts b/src/components/useLocation/useLocation.ts
index 451d429..c0d6a71 100755
--- a/src/components/useLocation/useLocation.ts
+++ b/src/components/useLocation/useLocation.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 import { patchHistoryMethodsOnce } from '@src/utils'
 
 export interface UseLocationState {
diff --git a/src/components/useMedia/stories/UseMediaAdvancedDemo.vue b/src/components/useMedia/stories/UseMediaAdvancedDemo.vue
index 5467dbc..ad5a047 100755
--- a/src/components/useMedia/stories/UseMediaAdvancedDemo.vue
+++ b/src/components/useMedia/stories/UseMediaAdvancedDemo.vue
@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { computed } from '@vue/composition-api'
+import { computed } from '@src/api'
 import { getQuery, useMedia } from '@src/vue-use-kit'
 
 // breakpoints
diff --git a/src/components/useMedia/useMedia.ts b/src/components/useMedia/useMedia.ts
index 5312525..7f80e21 100755
--- a/src/components/useMedia/useMedia.ts
+++ b/src/components/useMedia/useMedia.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export function useMedia(query: string, defaultState = false) {
   let mql: MediaQueryList
diff --git a/src/components/useMediaDevices/useMediaDevices.ts b/src/components/useMediaDevices/useMediaDevices.ts
index 3b2cf76..f927d2c 100755
--- a/src/components/useMediaDevices/useMediaDevices.ts
+++ b/src/components/useMediaDevices/useMediaDevices.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export interface UseMediaDevicesState {
   deviceId: string
diff --git a/src/components/useMouse/stories/UseMouseAdvancedDemo.vue b/src/components/useMouse/stories/UseMouseAdvancedDemo.vue
index ee881d5..344a574 100755
--- a/src/components/useMouse/stories/UseMouseAdvancedDemo.vue
+++ b/src/components/useMouse/stories/UseMouseAdvancedDemo.vue
@@ -27,7 +27,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref, computed, onMounted, onUnmounted } from '@vue/composition-api'
+import { ref, computed, onMounted, onUnmounted } from '@src/api'
 import { useMouse } from '@src/vue-use-kit'
 
 const toInt = (n: number) => Math.round(n)
diff --git a/src/components/useMouse/useMouse.ts b/src/components/useMouse/useMouse.ts
index aa332db..3c93f49 100755
--- a/src/components/useMouse/useMouse.ts
+++ b/src/components/useMouse/useMouse.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export function useMouse() {
   const docX = ref(0)
diff --git a/src/components/useMouseElement/stories/UseMouseElementDemo.vue b/src/components/useMouseElement/stories/UseMouseElementDemo.vue
index e3dab14..d5bb2fa 100755
--- a/src/components/useMouseElement/stories/UseMouseElementDemo.vue
+++ b/src/components/useMouseElement/stories/UseMouseElementDemo.vue
@@ -49,7 +49,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref, computed, onMounted, onUnmounted } from '@vue/composition-api'
+import { ref, computed, onMounted, onUnmounted } from '@src/api'
 import { useMouseElement } from '@src/vue-use-kit'
 
 const toInt = (n: number) => Math.round(n)
diff --git a/src/components/useMouseElement/useMouseElement.spec.ts b/src/components/useMouseElement/useMouseElement.spec.ts
index 2cbf5ed..34cc328 100755
--- a/src/components/useMouseElement/useMouseElement.spec.ts
+++ b/src/components/useMouseElement/useMouseElement.spec.ts
@@ -1,5 +1,5 @@
 import { checkOnMountAndUnmountEvents, mount } from '@src/helpers/test'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useMouseElement } from '@src/vue-use-kit'
 
 afterEach(() => {
diff --git a/src/components/useMouseElement/useMouseElement.ts b/src/components/useMouseElement/useMouseElement.ts
index 7fcef8c..d6c0f0b 100755
--- a/src/components/useMouseElement/useMouseElement.ts
+++ b/src/components/useMouseElement/useMouseElement.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export function useMouseElement(elRef: Ref<null | HTMLElement>) {
   const docX = ref(0)
diff --git a/src/components/useMouseLeavePage/useMouseLeavePage.ts b/src/components/useMouseLeavePage/useMouseLeavePage.ts
index 0c5b6cd..e6f4ece 100755
--- a/src/components/useMouseLeavePage/useMouseLeavePage.ts
+++ b/src/components/useMouseLeavePage/useMouseLeavePage.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export function useMouseLeavePage(runOnMount = true) {
   const isTracking = ref(false)
diff --git a/src/components/useRaf/stories/UseRafDemo.vue b/src/components/useRaf/stories/UseRafDemo.vue
index 378ec76..5c353d3 100755
--- a/src/components/useRaf/stories/UseRafDemo.vue
+++ b/src/components/useRaf/stories/UseRafDemo.vue
@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref, computed } from '@vue/composition-api'
+import { ref, computed } from '@src/api'
 import { useRaf } from '@src/vue-use-kit'
 
 const pad = (n: number) => (n < 10 ? '0' + n : n)
diff --git a/src/components/useRaf/useRaf.ts b/src/components/useRaf/useRaf.ts
index 679abf1..4aa9651 100755
--- a/src/components/useRaf/useRaf.ts
+++ b/src/components/useRaf/useRaf.ts
@@ -1,4 +1,4 @@
-import { ref, Ref } from '@vue/composition-api'
+import { ref, Ref } from '@src/api'
 import { TFps, useRafFn } from '@src/components/useRafFn'
 
 const fpsLimit = 60
diff --git a/src/components/useRafFn/stories/UseRafFnAdvancedDemo.vue b/src/components/useRafFn/stories/UseRafFnAdvancedDemo.vue
index daf2ba8..d3fadce 100755
--- a/src/components/useRafFn/stories/UseRafFnAdvancedDemo.vue
+++ b/src/components/useRafFn/stories/UseRafFnAdvancedDemo.vue
@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref, computed } from '@vue/composition-api'
+import { ref, computed } from '@src/api'
 import { useRafFn } from '@src/vue-use-kit'
 
 const spriteOpts = {
diff --git a/src/components/useRafFn/stories/UseRafFnDemo.vue b/src/components/useRafFn/stories/UseRafFnDemo.vue
index 40b555c..dd0dfc7 100755
--- a/src/components/useRafFn/stories/UseRafFnDemo.vue
+++ b/src/components/useRafFn/stories/UseRafFnDemo.vue
@@ -52,7 +52,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useRafFn } from '@src/vue-use-kit'
 
 export default Vue.extend({
diff --git a/src/components/useRafFn/stories/useRafFn.md b/src/components/useRafFn/stories/useRafFn.md
index 19afb9e..55646eb 100755
--- a/src/components/useRafFn/stories/useRafFn.md
+++ b/src/components/useRafFn/stories/useRafFn.md
@@ -52,7 +52,7 @@ function useRafFn(
 
 <script lang="ts">
   import Vue from 'vue'
-  import { ref } from '@vue/composition-api'
+  import { ref } from '@src/api'
   import { useRafFn } from 'vue-use-kit'
 
   export default Vue.extend({
diff --git a/src/components/useRafFn/useRafFn.spec.ts b/src/components/useRafFn/useRafFn.spec.ts
index 7f97857..be0c711 100755
--- a/src/components/useRafFn/useRafFn.spec.ts
+++ b/src/components/useRafFn/useRafFn.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@src/helpers/test'
-import { ref } from '@vue/composition-api'
+import { ref } from '@src/api'
 import { useRafFn } from '@src/vue-use-kit'
 
 let rafSpy: any = null
diff --git a/src/components/useRafFn/useRafFn.ts b/src/components/useRafFn/useRafFn.ts
index e0743d6..55d9e01 100755
--- a/src/components/useRafFn/useRafFn.ts
+++ b/src/components/useRafFn/useRafFn.ts
@@ -1,11 +1,4 @@
-import {
-  ref,
-  isRef,
-  computed,
-  onMounted,
-  onUnmounted,
-  Ref
-} from '@vue/composition-api'
+import { ref, isRef, computed, onMounted, onUnmounted, Ref } from '@src/api'
 
 export type TFps = number | Ref<number>
 
diff --git a/src/components/useSampleComponent/useSampleComponent.ts b/src/components/useSampleComponent/useSampleComponent.ts
index 67f06eb..8933efd 100755
--- a/src/components/useSampleComponent/useSampleComponent.ts
+++ b/src/components/useSampleComponent/useSampleComponent.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 
 export function useSampleComponent() {
   const isMounted = ref(false)
diff --git a/src/components/useSearchParams/stories/UseSearchParamsDemo.vue b/src/components/useSearchParams/stories/UseSearchParamsDemo.vue
index d83898b..336f070 100755
--- a/src/components/useSearchParams/stories/UseSearchParamsDemo.vue
+++ b/src/components/useSearchParams/stories/UseSearchParamsDemo.vue
@@ -37,7 +37,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref, watch } from '@vue/composition-api'
+import { ref, watch } from '@src/api'
 import { useSearchParams } from '@src/vue-use-kit'
 import Field from './Field.vue'
 
diff --git a/src/components/useSearchParams/useSearchParams.ts b/src/components/useSearchParams/useSearchParams.ts
index 736fb10..df71c83 100755
--- a/src/components/useSearchParams/useSearchParams.ts
+++ b/src/components/useSearchParams/useSearchParams.ts
@@ -1,5 +1,4 @@
-import { ref, onMounted, onUnmounted, Ref } from '@vue/composition-api'
-import { UnwrapRef } from '@vue/composition-api/dist/reactivity'
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
 import { patchHistoryMethodsOnce, normalizeEntriesData } from '@src/utils'
 
 const normalizeParams = (urlParamsObj: { [key: string]: string }) => (
diff --git a/src/components/useTimeout/stories/UseTimeoutDemo.vue b/src/components/useTimeout/stories/UseTimeoutDemo.vue
index fec7a42..a5fc8e5 100755
--- a/src/components/useTimeout/stories/UseTimeoutDemo.vue
+++ b/src/components/useTimeout/stories/UseTimeoutDemo.vue
@@ -29,7 +29,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { computed, ref } from '@vue/composition-api'
+import { computed, ref } from '@src/api'
 import { useTimeout } from '@src/vue-use-kit'
 
 export default Vue.extend({
diff --git a/src/components/useTimeout/useTimeout.spec.ts b/src/components/useTimeout/useTimeout.spec.ts
index f34caa1..14331e3 100755
--- a/src/components/useTimeout/useTimeout.spec.ts
+++ b/src/components/useTimeout/useTimeout.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@src/helpers/test'
-import { computed } from '@vue/composition-api'
+import { computed } from '@src/api'
 import { useTimeout } from '@src/vue-use-kit'
 
 beforeEach(() => {
diff --git a/src/components/useTimeout/useTimeout.ts b/src/components/useTimeout/useTimeout.ts
index 87b0d62..82e3804 100755
--- a/src/components/useTimeout/useTimeout.ts
+++ b/src/components/useTimeout/useTimeout.ts
@@ -1,4 +1,4 @@
-import { Ref } from '@vue/composition-api'
+import { Ref } from '@src/api'
 import { useTimeoutFn } from '@src/components/useTimeoutFn'
 
 const noop = () => null
diff --git a/src/components/useTimeoutFn/stories/UseTimeoutFnDemo.vue b/src/components/useTimeoutFn/stories/UseTimeoutFnDemo.vue
index bfea02b..974262c 100755
--- a/src/components/useTimeoutFn/stories/UseTimeoutFnDemo.vue
+++ b/src/components/useTimeoutFn/stories/UseTimeoutFnDemo.vue
@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { ref, watch, computed } from '@vue/composition-api'
+import { ref, watch, computed } from '@src/api'
 import { useTimeoutFn } from '@src/vue-use-kit'
 
 export default Vue.extend({
diff --git a/src/components/useTimeoutFn/stories/useTimeoutFn.md b/src/components/useTimeoutFn/stories/useTimeoutFn.md
index 05a8eb3..8d340c3 100755
--- a/src/components/useTimeoutFn/stories/useTimeoutFn.md
+++ b/src/components/useTimeoutFn/stories/useTimeoutFn.md
@@ -46,7 +46,7 @@ function useTimeoutFn(
 
 <script lang="ts">
   import Vue from 'vue'
-  import { ref } from '@vue/composition-api'
+  import { ref } from '@src/api'
   import { useTimeoutFn } from 'vue-use-kit'
 
   export default Vue.extend({
diff --git a/src/components/useTimeoutFn/useTimeoutFn.spec.ts b/src/components/useTimeoutFn/useTimeoutFn.spec.ts
index d05bfac..882da83 100755
--- a/src/components/useTimeoutFn/useTimeoutFn.spec.ts
+++ b/src/components/useTimeoutFn/useTimeoutFn.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@src/helpers/test'
-import { ref, computed } from '@vue/composition-api'
+import { ref, computed } from '@src/api'
 import { useTimeoutFn } from '@src/vue-use-kit'
 
 beforeEach(() => {
diff --git a/src/components/useTimeoutFn/useTimeoutFn.ts b/src/components/useTimeoutFn/useTimeoutFn.ts
index 8988676..0cec95a 100755
--- a/src/components/useTimeoutFn/useTimeoutFn.ts
+++ b/src/components/useTimeoutFn/useTimeoutFn.ts
@@ -1,4 +1,4 @@
-import { onMounted, onUnmounted, ref, Ref } from '@vue/composition-api'
+import { onMounted, onUnmounted, ref, Ref } from '@src/api'
 
 export function useTimeoutFn(callback: Function, ms = 0, runOnMount = true) {
   const isReady = ref<boolean | null>(null)
diff --git a/src/helpers/test.ts b/src/helpers/test.ts
index ca47c39..25794db 100755
--- a/src/helpers/test.ts
+++ b/src/helpers/test.ts
@@ -6,7 +6,7 @@ import {
   shallowMount as vueShallowMount,
   ShallowMountOptions
 } from '@vue/test-utils'
-import VueCompositionAPI from '@vue/composition-api'
+import VueCompositionAPI from '@src/api'
 
 const localVue = createLocalVue()
 localVue.use(VueCompositionAPI)
diff --git a/tsconfig.json b/tsconfig.json
index e6ec554..d728719 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,6 +8,7 @@
     "strict": true,
     "sourceMap": true,
     "declaration": true,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,