feat: add nuxtJS and SSR support (#109)

* feat: add nuxtJS and SSR support * fix tests * more SSR support * changelog
pikax · Jan 30, 2020 · 4d73885 · 4d73885
1 parent ebd89e5
commit 4d73885
Show file tree

Hide file tree

Showing 46 changed files with 289 additions and 221 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [BroadcastChannel](https://pikax.me/vue-composable/composable/web/broadcastChannel) - reactive `BroadcastChannel API`
 - [sharedRef](https://pikax.me/vue-composable/composable/misc/sharedRef.md) - cross-tab reactive `ref`
 - [Geolocation API](https://pikax.me/vue-composable/composable/web/geolocation)
+- NuxtJS SSR support
 
 ### Changed
 

diff --git a/docs/.vuepress/components/OnResizeExample.vue b/docs/.vuepress/components/OnResizeExample.vue
@@ -10,12 +10,14 @@
 
 <script>
 import { reactive, ref } from "@vue/composition-api";
-import { useOnResize } from "vue-composable";
+import { useOnResize, isClient } from "vue-composable";
 
 export default {
   name: "on-resize-example",
   setup(_) {
-    const { height, width, remove } = useOnResize(document.body);
+    const { height, width, remove } = useOnResize(
+      (isClient && document.body) || null
+    );
 
     return {
       height,

diff --git a/docs/README.md b/docs/README.md
@@ -133,6 +133,6 @@ export default {
 
 ### Pagination example
 
-<ClientOnly>
+
 <array-pagination-example/>
-</ClientOnly>
+
diff --git a/docs/composable/_template.md b/docs/composable/_template.md
@@ -45,9 +45,9 @@ const { remove } = useOnScroll();
 
 ## Example
 
-<ClientOnly>
+
 <on-scroll-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/event/event.md b/docs/composable/event/event.md
@@ -16,9 +16,9 @@ const { remove } = useEvent(element, name, listener);
 
 ## Example
 
-<ClientOnly>
+
 <event-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/event/onMouseMove.md b/docs/composable/event/onMouseMove.md
@@ -33,9 +33,9 @@ const { remove } = useOnMouseMove();
 
 ## Example
 
-<ClientOnly>
+
 <on-mouse-move-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/event/onResize.md b/docs/composable/event/onResize.md
@@ -35,9 +35,9 @@ const { remove } = useOnResize();
 
 ## Example
 
-<ClientOnly>
+
 <on-resize-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/event/onScroll.md b/docs/composable/event/onScroll.md
@@ -33,9 +33,9 @@ const { remove } = useOnScroll();
 
 ## Example
 
-<ClientOnly>
+
 <on-scroll-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/external/axios.md b/docs/composable/external/axios.md
@@ -90,9 +90,9 @@ const { exec, cancel } = useAxios();
 
 ## Example
 
-<ClientOnly>
+
 <axios-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/misc/breakpoint.md b/docs/composable/misc/breakpoint.md
@@ -43,9 +43,9 @@ const { remove } = useBreakpoint();
 
 ## Example
 
-<ClientOnly>
+
 <breakpoint-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/misc/matchMedia.md b/docs/composable/misc/matchMedia.md
@@ -21,13 +21,14 @@ The `useMatchMedia` function exposes the following reactive state:
 ```js
 import { useMatchMedia } from "vue-composable";
 
-const { scrollTop, matches } = useMatchMedia();
+const { supported, mediaQueryList, matches } = useMatchMedia();
 ```
 
 | State          | Type                                                                              | Description                                                                                          |
 | -------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| supported      | `Boolean`                                                                         | Is MatchMedia supported                                                                              |
 | mediaQueryList | [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList) | List of objects stores information on a media query                                                  |
-| matches        | `Boolean`                                                                         | A Boolean that returns true if the document currently matches the media query list, or false if not. |
+| matches        | `Ref<Boolean>`                                                                    | A Boolean that returns true if the document currently matches the media query list, or false if not. |
 
 ## Methods
 
@@ -45,9 +46,9 @@ const { remove } = useMatchMedia();
 
 ## Example
 
-<ClientOnly>
+
 <match-media-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/misc/sharedRef.md b/docs/composable/misc/sharedRef.md
@@ -114,13 +114,13 @@ If the master instance gets destroyed (the component unmounted or tab closed) a
 
 ## Example
 
-<ClientOnly>
+
 <shared-ref-video/>
-</ClientOnly>
 
-<ClientOnly>
+
+
 <shared-ref-example/>
-</ClientOnly>
+
 
 ### Code
 
@@ -200,9 +200,9 @@ const myShared = useSharedRef();
 
 ### Example
 
-<ClientOnly>
+
 <ref-shared-example/>
-</ClientOnly>
+
 
 #### Code
 

diff --git a/docs/composable/pagination/arrayPagination.md b/docs/composable/pagination/arrayPagination.md
@@ -47,9 +47,9 @@ const { next, prev, first, last } = useArrayPagination();
 
 ## Example
 
-<ClientOnly>
+
 <array-pagination-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/pagination/pagination.md b/docs/composable/pagination/pagination.md
@@ -39,9 +39,9 @@ const { next, prev, first, last } = usePagination();
 
 ## Example
 
-<ClientOnly>
+
 <pagination-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/promise/cancellablePromise.md b/docs/composable/promise/cancellablePromise.md
@@ -56,9 +56,9 @@ const { exec, cancel } = useCancellablePromise();
 
 ## Example
 
-<ClientOnly>
+
 <cancellable-promise-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/promise/promise.md b/docs/composable/promise/promise.md
@@ -48,9 +48,9 @@ const { exec } = usePromise();
 
 ## Example
 
-<ClientOnly>
+
 <promise-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/promise/retry.md b/docs/composable/promise/retry.md
@@ -36,9 +36,9 @@ const { cancel, exec } = useRetry();
 
 ## Example
 
-<ClientOnly>
+
 <retry-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/storage/localStorage.md b/docs/composable/storage/localStorage.md
@@ -50,9 +50,9 @@ const { remove, clear, setSync } = useLocalStorage(key);
 
 ![Local Storage Cross tab](/vue-composable/localStorage.gif)
 
-<ClientOnly>
+
 <local-storage-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/storage/sessionStorage.md b/docs/composable/storage/sessionStorage.md
@@ -48,9 +48,9 @@ const { remove, clear, setSync } = useSessionStorage(key);
 
 ## Example
 
-<ClientOnly>
+
 <Session-storage-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/storage/storage.md b/docs/composable/storage/storage.md
@@ -10,9 +10,9 @@ This is recommended if you want to support safari users using private mode.
 
 ## Example
 
-<ClientOnly>
+
 <storage-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/web/broadcastChannel.md b/docs/composable/web/broadcastChannel.md
@@ -59,9 +59,9 @@ const { send, close, addListener } = useBroadcastChannel();
 
 ## Example
 
-<ClientOnly>
+
 <broadcast-channel-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/web/fetch.md b/docs/composable/web/fetch.md
@@ -42,9 +42,9 @@ const { exec } = useFetch();
 
 ## Example
 
-<ClientOnly>
+
 <fetch-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/web/geolocation.md b/docs/composable/web/geolocation.md
@@ -48,9 +48,9 @@ const { refresh } = useGeolocation();
 
 ## Example
 
-<ClientOnly>
+
 <geolocation-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/web/intersectionObserver.md b/docs/composable/web/intersectionObserver.md
@@ -9,13 +9,16 @@ The `useIntersectionObserver` function exposes the following reactive state:
 ```js
 import { useIntersectionObserver } from "vue-composable";
 
-const { elements, isIntersecting } = useIntersectionObserver(options);
+const { supported, elements, isIntersecting } = useIntersectionObserver(
+  options
+);
 ```
 
-| State          | Type                          | Description                                                                                             |
-| -------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------- |
-| elements       | `IntersectionObserverEntry[]` | [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
-| isIntersecting | `Boolean`                     | Returns true if **all** observed elements are intersection                                              |
+| State          | Type                               | Description                                                                                             |
+| -------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| supported      | `Boolean`                          | Is supported                                                                                            |
+| elements       | `Ref<IntersectionObserverEntry[]>` | [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry) |
+| isIntersecting | `Ref<Boolean?`                     | Returns true if **all** observed elements are intersection                                              |
 
 ## Methods
 
@@ -37,9 +40,7 @@ const { observe, unobserve, disconnect, debug } = useIntersectionObserver();
 
 ## Example
 
-<ClientOnly>
 <intersection-observer-example/>
-</ClientOnly>
 
 ### Code
 

diff --git a/docs/composable/web/language.md b/docs/composable/web/language.md
@@ -23,9 +23,9 @@ The `useLanguage` function exposes the following methods:
 
 ## Example
 
-<ClientOnly>
+
 <language-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/web/networkInformation.md b/docs/composable/web/networkInformation.md
@@ -51,9 +51,9 @@ const { remove } = useNetworkInformation();
 
 ## Example
 
-<ClientOnly>
+
 <network-information-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/web/online.md b/docs/composable/web/online.md
@@ -23,9 +23,9 @@ const { supported, online } = useOnline();
 
 ## Example
 
-<ClientOnly>
+
 <online-example/>
-</ClientOnly>
+
 
 ### Code
 

diff --git a/docs/composable/web/pageVisibility.md b/docs/composable/web/pageVisibility.md
@@ -19,9 +19,9 @@ const { visibility, hidden } = usePageVisibility();
 
 ## Example
 
-<ClientOnly>
+
 <page-visibility-example/>
-</ClientOnly>
+
 
 ### Code