vue-screen
Advanced tools
vue-screen - npm Package Compare versions
Comparing version 0.1.0 to 1.0.0
| { | ||
| "name": "vue-screen", | ||
| "version": "0.1.0", | ||
| "version": "1.0.0", | ||
| "description": "Reactive window size and media query states for Vue components. Integrates with most UI frameworks.", | ||
@@ -36,2 +36,3 @@ "main": "src/index.js", | ||
| "husky": "^2.2.0", | ||
| "install-peers": "^1.0.3", | ||
| "mocha": "^6.1.4", | ||
@@ -38,0 +39,0 @@ "puppeteer": "^1.14.0", |
@@ -0,4 +1,9 @@ | ||
| [](https://travis-ci.org/matteo-rigon/vue-screen) | ||
| [](https://img.shields.io/badge/vue-2.x-brightgreen.svg) | ||
| # VueScreen | ||
| A Vue plugin that provides reactive window size and media query states. Supports your favourite UI framework grid breakpoints out of the box, and can be configured with any custom breakpoints. | ||
| Reactive window size and media query states for VueJS. Supports your favourite UI framework grid breakpoints out of the box, and can be configured with any custom breakpoints. | ||
| [https://matteo-rigon.github.io/vue-screen/](https://matteo-rigon.github.io/vue-screen/) | ||
| ## Features | ||
@@ -9,3 +14,3 @@ - reactive and debounced window innerWidth and innerHeight | ||
| - breakpoints for most common ui frameworks provided out of the box: Tailwind, Bootstrap, Bulma, Foundation, Materialize, Semantic UI | ||
| - SSR compatible | ||
| - SSR compatible (Nuxt module and Gridsome plugin coming soon) | ||
@@ -20,3 +25,3 @@ ## Requirements | ||
| ```js | ||
| <script src=""></script> | ||
| <script src="https://unpkg.com/vue-screen/dist/vue-screen.min.js"></script> | ||
| ``` | ||
@@ -87,6 +92,5 @@ | ||
| After registering, the new property `$screen` will be injected on the Vue prototype. You can access it in every component using `this.$screen` | ||
| After registering, the new property `$screen` will be injected on the Vue prototype. You can access it in every component using `this.$screen`.<br> | ||
| Available properties on the `$screen` object: | ||
| Available properties on the $screen object: | ||
| #### width | ||
@@ -111,4 +115,15 @@ *Number*<br> | ||
| ## Browser support | ||
| All browsers that support MatchMedia API | ||
| <p class="ciu_embed" data-feature="matchmedia" data-periods="current,past_1,past_2" data-accessible-colours="false"> | ||
| <a href="http://caniuse.com/#feat=matchmedia" target="_blank"> | ||
| <picture> | ||
| <source type="image/webp" srcset="https://res.cloudinary.com/ireaderinokun/image/upload/v1557132257/caniuse-embed/matchmedia-2019-5-6.webp"> | ||
| <source type="image/png" srcset="https://res.cloudinary.com/ireaderinokun/image/upload/v1557132257/caniuse-embed/matchmedia-2019-5-6.png"> | ||
| <source type="image/jpeg" srcset="https://res.cloudinary.com/ireaderinokun/image/upload/v1557132257/caniuse-embed/matchmedia-2019-5-6.jpg"> | ||
| <img src="https://res.cloudinary.com/ireaderinokun/image/upload/v1557132257/caniuse-embed/matchmedia-2019-5-6.png" alt="Data on support for the matchmedia feature across the major browsers from caniuse.com"> | ||
| </picture> | ||
| </a> | ||
| </p> |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by99.54%
47110
- Number of package files
- increased by19.05%
25
- Lines of code
- increased by73.62%
816
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by13.51%
126
Worsened metrics
- Dev dependency count
- increased by5.88%
18