docs: fix wrong example and code section

Author: pikax

docs/composable/_template.md

@@ -43,12 +43,12 @@ const { remove } = useOnScroll();
 
 ## Example
 
-```vue
-
-```
-
-### Code
-
 <ClientOnly>
 <on-scroll-example/>
 </ClientOnly>
+
+### Code
+
+```vue
+
+```

docs/composable/event/event.md

@@ -16,46 +16,46 @@ const { remove } = useEvent(element, name, listener);
 
 ## Example
 
+<ClientOnly>
+<event-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div ref="elref">
     Mouse
-    <p>x: {{state.x}}</p>
-    <p>y: {{state.y}}</p>
+    <p>x: {{ state.x }}</p>
+    <p>y: {{ state.y }}</p>
 
     <button @click="remove">remove</button>
   </div>
 </template>
 
 <script>
-import { reactive, ref } from '@vue/composition-api';
+import { reactive, ref } from "@vue/composition-api";
 import { useEvent } from "vue-composable";
 
 export default {
-  name: 'event-example',
-  setup(_){
+  name: "event-example",
+  setup(_) {
     const elref = ref(null);
     const state = reactive({
       x: 0,
       y: 0
-    })
-    const remove = useEvent(elref, 'mousemove', e=> {
+    });
+    const remove = useEvent(elref, "mousemove", e => {
       state.x = e.x;
       state.y = e.y;
-    })
+    });
 
     return {
       elref,
       remove,
       state
-    }
+    };
   }
-}
+};
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<event-example/>
-</ClientOnly>

docs/composable/event/onMouseMove.md

@@ -33,6 +33,12 @@ const { remove } = useOnMouseMove();
 
 ## Example
 
+<ClientOnly>
+<on-mouse-move-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div ref="elref">
@@ -65,9 +71,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<on-mouse-move-example/>
-</ClientOnly>

docs/composable/event/onResize.md

@@ -35,12 +35,18 @@ const { remove } = useOnResize();
 
 ## Example
 
+<ClientOnly>
+<on-resize-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div>
     Window Resize
-    <p>height: {{height}}</p>
-    <p>width: {{width}}</p>
+    <p>height: {{ height }}</p>
+    <p>width: {{ width }}</p>
 
     <button @click="remove">remove</button>
   </div>
@@ -64,9 +70,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<on-resize-example/>
-</ClientOnly>

docs/composable/event/onScroll.md

@@ -33,6 +33,12 @@ const { remove } = useOnScroll();
 
 ## Example
 
+<ClientOnly>
+<on-scroll-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div>
@@ -69,9 +75,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<on-scroll-example/>
-</ClientOnly>

docs/composable/external/axios.md

@@ -14,7 +14,6 @@ yarn add @vue-composable/axios
 npm install @vue-composable/axios
 ```
 
-
 ## State
 
 The `useAxios` function exposes the following reactive state:
@@ -62,6 +61,12 @@ const { exec } = useAxios();
 
 ## Example
 
+<ClientOnly>
+<axios-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div>
@@ -105,9 +110,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<axios-example/>
-</ClientOnly>

docs/composable/misc/breakpoint.md

@@ -43,6 +43,12 @@ const { remove } = useBreakpoint();
 
 ## Example
 
+<ClientOnly>
+<breakpoint-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div>
@@ -65,9 +71,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<breakpoint-example/>
-</ClientOnly>

docs/composable/misc/localStorage.md

@@ -33,6 +33,12 @@ const { remove, clear } = useLocalStorage(key);
 
 ## Example
 
+<ClientOnly>
+<local-storage-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div>
@@ -63,9 +69,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<local-storage-example/>
-</ClientOnly>

docs/composable/misc/matchMedia.md

@@ -45,10 +45,18 @@ const { remove } = useMatchMedia();
 
 ## Example
 
+<ClientOnly>
+<match-media-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div>
-    <p>Screen less than 600px: <b>{{ matches }}</b></p>
+    <p>
+      Screen less than 600px: <b>{{ matches }}</b>
+    </p>
   </div>
 </template>
 
@@ -63,9 +71,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<match-media-example/>
-</ClientOnly>

docs/composable/pagination/arrayPagination.md

@@ -47,6 +47,12 @@ const { next, prev, first, last } = useArrayPagination();
 
 ## Example
 
+<ClientOnly>
+<array-pagination-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div>
@@ -64,10 +70,10 @@ const { next, prev, first, last } = useArrayPagination();
 </template>
 
 <script>
-import { useArrayPagination } from 'vue-composable';
+import { useArrayPagination } from "vue-composable";
 
 export default {
-  name:"array-pagination-example",
+  name: "array-pagination-example",
   setup() {
     const array = new Array(1000).fill(0).map((_, i) => i);
     const { result, next, prev, currentPage, lastPage } = useArrayPagination(
@@ -82,9 +88,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<array-pagination-example/>
-</ClientOnly>

docs/composable/pagination/pagination.md

@@ -39,6 +39,12 @@ const { next, prev, first, last } = usePagination();
 
 ## Example
 
+<ClientOnly>
+<pagination-example/>
+</ClientOnly>
+
+### Code
+
 Array pagination
 
 ```vue
@@ -94,9 +100,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<pagination-example/>
-</ClientOnly>

docs/composable/promise/cancellablePromise.md

@@ -41,6 +41,12 @@ const { exec, cancel } = useCancellablePromise();
 
 ## Example
 
+<ClientOnly>
+<cancellable-promise-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div>
@@ -97,9 +103,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<cancellable-promise-example/>
-</ClientOnly>

docs/composable/promise/promise.md

@@ -35,6 +35,12 @@ const { exec } = usePromise();
 
 ## Example
 
+<ClientOnly>
+<promise-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div>
@@ -86,9 +92,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<promise-example/>
-</ClientOnly>

docs/composable/promise/retry.md

@@ -36,6 +36,12 @@ const { cancel, exec } = useRetry();
 
 ## Example
 
+<ClientOnly>
+<retry-example/>
+</ClientOnly>
+
+### Code
+
 ```vue
 <template>
   <div>
@@ -128,9 +134,3 @@ export default {
 };
 </script>
 ```
-
-### Code
-
-<ClientOnly>
-<retry-example/>
-</ClientOnly>