vue-window-size - npm Package Compare versions

Comparing version 2.0.0-beta.8 to 2.0.0-next

package.json

 {
   "name": "vue-window-size",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-next",
   "description": "Reactivity window size for Vue.js.",
@@ -52,3 +52,3 @@ "type": "module",
     "nx": "^15.5.1",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.3",
     "typescript": "^4.9.4"
@@ -55,0 +55,0 @@ },

README.md

@@ -5,12 +5,10 @@ # vue-window-size
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
-![CI Status](https://github.com/mya-ake/vue-window-size/workflows/Main%20Workflow/badge.svg)
+[![CI](https://github.com/mya-ake/vue-window-size/actions/workflows/ci.yml/badge.svg)](https://github.com/mya-ake/vue-window-size/actions/workflows/ci.yml)
 
-> Provides reactivity window size properties for Vue.js.
+> Provides reactivity window size properties for Vue.js. Supports Vue.js v3.x and v2.7 or higher.
 
 ## Install
 
-### for Vue v3
+The following command installs vue-window-size v2.
 
-The following command installs vue-window-size v1.
-
 ```bash
@@ -22,39 +20,4 @@ $ yarn add vue-window-size
 
-### for Vue v2
+Note: For use with v2.6, see [here](https://github.com/mya-ake/vue-window-size/tree/v1.2.1#for-vue-v2).
 
-The following command installs vue-window-seize v0.
-
-```bash
-$ yarn add vue-window-size@0.6.2
-// or
-$ npm i vue-window-size@0.6.2
-```
-
----
-
-You can install v1 using the following command.
-
-> note: v1.1.0 or later is for vue3 only
-
-#### Vue.js v2.6.x
-
-When using with vue-window-size v1.0.6 it depends on the [@vue/composition-api](https://github.com/vuejs/composition-api).
-And requires Vue.js v2.6.
-
-```bash
-$ yarn add vue-window-size@1.0.6 @vue/composition-api
-// or
-$ npm i vue-window-size@1.0.6 @vue/composition-api
-```
-
-#### Vue.js v2.7.x
-
-For Vue.js v2.7, please use vue-window-size v1.0.8 or higher.
-
-```bash
-$ yarn add vue-window-size@1.0.x
-// or
-$ npm i vue-window-size@1.0.x
-```
-
 ## Usage
@@ -73,14 +36,8 @@
 
-```JavaScript
-<template>
-  <div>
-    <p>window width: {{ windowWidth }}</p>
-    <p>window height: {{ windowHeight }}</p>
-  </div>
-</template>
-
-<script>
+```TypeScript
+<script lang="ts">
+import { defineComponent } from 'vue';
 import { useWindowSize } from 'vue-window-size';
 
-export default {
+export default defineComponent({
   setup() {
@@ -93,4 +50,11 @@ const { width, height } = useWindowSize();
   },
-};
+});
 </script>
+
+<template>
+  <div>
+    <p>window width: {{ windowWidth }}</p>
+    <p>window height: {{ windowHeight }}</p>
+  </div>
+</template>
 ```
@@ -106,6 +70,6 @@
 
-```JavaScript
+```TypeScript
 import { createApp } from 'vue';
 import App from "./App.vue";  // your App component
-import { VueWindowSizePlugin } from 'vue-window-size/option-api';
+import { VueWindowSizePlugin } from 'vue-window-size/plugin';
 
@@ -131,3 +95,12 @@ const app = createApp(App);
 
-```HTML
+```TypeScript
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { vueWindowSizeMixin } from 'vue-window-size/mixin';
+
+export default defineComponent({
+  mixins: [vueWindowSizeMixin()],
+});
+</script>
+
 <template>
@@ -139,10 +112,2 @@ <div>
 </template>
-
-<script>
-import { vueWindowSizeMixin } from 'vue-window-size/option-api';
-
-export default {
-  mixins: [vueWindowSizeMixin()],
-};
-</script>
 ```
@@ -162,6 +127,6 @@
 
-```JavaScript
+```TypeScript
 import { createApp } from 'vue';
 import App from "./App.vue";  // your App component
-import { VueWindowSizePlugin } from 'vue-window-size/option-api';
+import { VueWindowSizePlugin } from 'vue-window-size/plugin';
 
@@ -180,4 +145,4 @@ const app = createApp(App);
 
-```JavaScript
-import { vueWindowSizeAPI } from 'vue-window-size/option-api';
+```TypeScript
+import { vueWindowSizeAPI } from 'vue-window-size/plugin'; // or 'vue-window-size/mixin'
 
@@ -196,3 +161,3 @@ vueWindowSizeAPI.config({
 ```JavaScript
-import { vueWindowSizeAPI } from 'vue-window-size/option-api';
+import { vueWindowSizeAPI } from 'vue-window-size/plugin'; // or 'vue-window-size/mixin'
 
@@ -207,3 +172,3 @@ vueWindowSizeAPI.init();
 ```JavaScript
-import { vueWindowSizeAPI } from 'vue-window-size/option-api';
+import { vueWindowSizeAPI } from'vue-window-size/plugin'; // or 'vue-window-size/mixin'
 
@@ -210,0 +175,0 @@ vueWindowSizeAPI.destroy();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

23060

decreased by-1.34%

Number of lines in readme file

191

decreased by-15.49%

No dependency changes