vue-window-size - npm Package Compare versions

Comparing version 1.0.0-5 to 1.0.0-6

package.json

 {
   "name": "vue-window-size",
-  "version": "1.0.0-5",
+  "version": "1.0.0-6",
   "description": "Reactivity window size for Vue.js.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -11,15 +11,74 @@ # vue-window-size
 
+### for Vue v3
+
+The following command installs vue-window-size v1.
+
 ```bash
+$ yarn add vue-window-size@next
+// or
+$ npm i vue-window-size@next
+```
+
+### for Vue v2
+
+The following command installs vue-window-seize v0.
+
+```bash
 $ yarn add vue-window-size
+// or
+$ npm i vue-window-size
 ```
 
+---
+
+You can install v1 using the following command.  
+When using with vue v1 it depends on the [@vue/composition-api](https://github.com/vuejs/composition-api).
+And requires Vue.js v2.6 or higher.
+
+```bash
+$ yarn add vue-window-size@next @vue/composition-api
+// or
+$ npm i vue-window-size@next @vue/composition-api
+```
+
 ## Usage
 
-[Plugin](#Plugin) or [Mixin](#Mixin).
+[Composition API](#Composition_API) or [Plugin](#Plugin) or [Mixin](#Mixin).
 
-Plugin all components have window sizes.
+|                             | Composition API |     Plugin     |    Mixin    |
+| :-------------------------: | :-------------: | :------------: | :---------: |
+| has window sizes properties |   only in use   | all components | only in use |
+|     handle resize event     |   only in use   |   all times    |  all times  |
 
-Components with mixin have window sizes.
-Other components don't have window sizes.
+### Composition API
 
+Use with component.
+
+```JavaScript
+<template>
+  <div>
+    <p>window width: {{ windowWidth }}</p>
+    <p>window height: {{ windowHeight }}</p>
+  </div>
+</template>
+
+<script>
+import { useWindowSize } from 'vue-window-size';
+
+export default {
+  setup() {
+    const { width, height } = useWindowSize();
+    return {
+      windowWidth: width,
+      windowHeight: height,
+    };
+  },
+};
+</script>
+```
+
+> note: useWindowSize handles a Resize Event only when it is in use.
+> Even if it is called by multiple components, the Resize event is processed only once.
+> If it is not used, it will not be handled.
+
 ### Plugin
@@ -30,6 +89,8 @@
 ```JavaScript
-import Vue from 'vue';
-import VueWindowSize from 'vue-window-size';
+import { createApp } from 'vue';
+import App from "./App.vue";  // your App component
+import { VueWindowSizePlugin } from 'vue-window-size/option-api';
 
-Vue.use(VueWindowSize);
+const app = createApp(App);
+app.use(VueWindowSizePlugin);
 ```
@@ -42,4 +103,4 @@
   <div>
-    <p>window width: {{ windowWidth }}</p>
-    <p>window height: {{ windowHeight }}</p>
+    <p>window width: {{ $windowWidth }}</p>
+    <p>window height: {{ $windowHeight }}</p>
   </div>
@@ -56,4 +117,4 @@ </template>
   <div>
-    <p>window width: {{ windowWidth }}</p>
-    <p>window height: {{ windowHeight }}</p>
+    <p>window width: {{ $windowWidth }}</p>
+    <p>window height: {{ $windowHeight }}</p>
   </div>
@@ -63,6 +124,6 @@ </template>
 <script>
-import { vueWindowSizeMixin } from 'vue-window-size';
+import { vueWindowSizeMixin } from 'vue-window-size/option-api';
 
 export default {
-  mixins: [vueWindowSizeMixin],
+  mixins: [vueWindowSizeMixin()],
 };
@@ -72,3 +133,3 @@ </script>
 
-## Options
+## Config for Option API
 
@@ -86,6 +147,8 @@ ### `delay` (option)
 ```JavaScript
-import Vue from 'vue';
-import VueWindowSize from 'vue-window-size';
+import { createApp } from 'vue';
+import App from "./App.vue";  // your App component
+import { VueWindowSizePlugin } from 'vue-window-size/option-api';
 
-Vue.use(VueWindowSize, {
+const app = createApp(App);
+app.use(VueWindowSizePlugin, {
   delay: 100,
@@ -95,12 +158,14 @@ });
 
-## Public API
+## Public API for Option API
 
-### `setDelay(delay: number)`
+### `config(config: VueWindowSizeOptionApiConfig)`
 
-Same as delay option.
+Same as config for Option API.
 
 ```JavaScript
-import { vueWindowSize } from 'vue-window-size';
+import { vueWindowSizeAPI } from 'vue-window-size/option-api';
 
-vueWindowSize.setDelay(1000);
+vueWindowSizeAPI.config({
+  delay: 100,
+});
 ```
@@ -115,5 +180,5 @@
 ```JavaScript
-import { vueWindowSize } from 'vue-window-size';
+import { vueWindowSizeAPI } from 'vue-window-size/option-api';
 
-vueWindowSize.init();
+vueWindowSizeAPI.init();
 ```
@@ -126,5 +191,5 @@
 ```JavaScript
-import { vueWindowSize } from 'vue-window-size';
+import { vueWindowSizeAPI } from 'vue-window-size/option-api';
 
-vueWindowSize.destroy();
+vueWindowSizeAPI.destroy();
 ```
@@ -134,5 +199,14 @@
 
-### When is removeEventListener called?
+### Why is there no Config in the Composition API?
 
-This library add addEventListener only once, even if it is used in mixin.
+`useWindowSize` is a singleton and handles the resize event.
+Therefore, using `useWindowSize(config)` will affect all components in used.
+Due to the nature of the Composition API, this is not the desired behavior.
+I also think that there are not many use cases that need to be set individually.  
+If requested, I will create a `useAtomicWindowSize(config)` that can be set atomically, so please create an issue.
+Or create a factory function for `createUseWindowSize(config)`.
+
+### When is the removeEventListener called when using plugin and mixin??
+
+vue-window-size adds addEventListener only once, even if it is used in mixin.
 So basically you do not need to call removeEventListener.
@@ -139,0 +213,0 @@ If you want to call removeEventListener please call [destroy](#destroy) method.

No alert changes

Improved metrics

Total package byte prevSize

10707

28.34%

Number of lines in readme file

211

54.01%

No dependency changes