{"_id":"@cardo500/vue-media-query","_rev":"1-9e8d6cc99792281930b6a612afee5b86","name":"@cardo500/vue-media-query","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@cardo500/vue-media-query","version":"0.0.1","description":"Minimalist vue media query helper","author":{"name":"Renato Cardoso","email":"re2005@gmail.com"},"main":"dist/vue-media-query.umd.min.js","dependencies":{"vue":"^2.6.10"},"devDependencies":{},"license":"GPL-3.0-or-later","typings":"types/main.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/re2005/vue-media-query.git"},"keywords":["vue","media-query","plugin"],"bugs":{"url":"https://github.com/re2005/vue-media-query/issues"},"homepage":"https://github.com/re2005/vue-media-query#readme","gitHead":"fa95061a7bda99b46d282cd34dcc608c44988213","_id":"@cardo500/vue-media-query@0.0.1","_nodeVersion":"10.18.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-Fo/8dft26Q4099g1Fc6OaUkR6xN0/LRKNT0ALtqpQOrr65LoW7Go4V4ycr6xH+5Rn/AssYri5Jmxgvy3gQOOfA==","shasum":"29dc14692ad7a1453d3b002430178b58c4280c2c","tarball":"https://registry.npmjs.org/@cardo500/vue-media-query/-/vue-media-query-0.0.1.tgz","fileCount":6,"unpackedSize":40270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKYkICRA9TVsSAnZWagAAI6QP/irgRbuDf+2AhX6mvUw7\nw/Qso5xOMlCXv3lZQlg7OEByBaw0nIg9OJOb9qVY7+zH8aLIOd25nONAbS0J\ngC+izV3j9Y/uuVjr7yxRZZYIt/moQbDhKgGm8NFh/xlTWdRCZutZ9bGGFuTP\nVY5LTI3l1w+pdqQtKehGWkpiVhWHBAjntbUczPVlEk4zYgIV02GkH3SBb3/X\nvleEP5IoLg8sJAWWVK2iBwLF/QcYwPzXIOL9d8spMFJXAPHACRbo4Wwag99T\nomdDLUqHxF6OvTYeGPmCyEZtzjlt1YQuVIJbguGHV3EONfeItaoQJc1mtgeA\nQesgfOJS29793BMgUD8XjdWG8gUAfq5FwUe3D1N5UeVElss30ulHM3npEF2i\nfb2yXMPr81jBgMShYmEAX14K3b6obddvNtH9LrR6vbJHb+zR+RnfoCCgccKO\nI3/zSDdkB2PeRQMRWJZbLx119LBvYXbwcqhjcVQhhV8D2Z1hWEQ8K2PC6BO+\nUZx+DgjssVxRgrHIGzkdfpOzL7zw7S9xtwWuOkescdSvSpis0XT9hGFmxGkg\nFYoaACy0UpGagT3rxI6I4sELqyricciRz3V/V46ARy0nQskMVeFQbFLHdLTs\nVrFgkBjLNuMaeqXp+94m6RTwD5sDVJWZd5TdqN/PZTTeOF9F9ryaeRRuiccs\nVd8O\r\n=BocM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcwwjtxG1GvVA420pKeC0v/ri9h6sefhE0TrQoRVeuawIhANHkcEv2baekFjl2/oiZNi9jtRV9q1EoJ2OIVsKnBxqV"}]},"maintainers":[{"name":"cardo500","email":"re2005@gmail.com"}],"_npmUser":{"name":"cardo500","email":"re2005@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-media-query_0.0.1_1579780360034_0.5624597885727183"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-23T11:52:39.996Z","0.0.1":"2020-01-23T11:52:40.211Z","modified":"2022-04-04T21:51:26.716Z"},"maintainers":[{"name":"cardo500","email":"re2005@gmail.com"}],"description":"Minimalist vue media query helper","homepage":"https://github.com/re2005/vue-media-query#readme","keywords":["vue","media-query","plugin"],"repository":{"type":"git","url":"git+https://github.com/re2005/vue-media-query.git"},"author":{"name":"Renato Cardoso","email":"re2005@gmail.com"},"bugs":{"url":"https://github.com/re2005/vue-media-query/issues"},"license":"GPL-3.0-or-later","readme":"# Vue Media Query\n\n\nThis is a minimimalistc vue plugin to help frontenders building cool UI by managing what should be visible on each screen size.\n\n  - Type some Markdown on the left\n  - See HTML in the right\n  - Magic\n\n# Features!\n\n  - Display current media size (xs, sm, md and lg)\n  - Medias sizes configurable\n\n### Installation\n\nInstall the dependencies and devDependencies and start the server.\n\n```sh\n$ npm i vue-media-query --save\n```\n\nUsage\n\n```js\nimport Vue from 'vue'\nimport VueMediaQuery from 'vue-media-query'\n\nVue.use(VueMediaQuery, {\n    xs: 425,\n    sm: 769,\n    md: 992,\n    lg: Infinity\n});\n```\n\nIf no options is passed VueMediaQuery will use default values\n\n### Usage\n\nInside your template you can simply do\n\n```\n<template>\n    <div>\n        Will be true when matches the media size you have defined\n        {{ $vmq.xs }} \n        {{ $vmq.sm }}\n        {{ $vmq.md }}\n        {{ $vmq.lg }}\n        {{ $vmq.size }} -> Returns the current screen witdh\n    <div>\n</template>\n```\n\nUsing as computed property\n\n```js\n<script lang=\"ts\">\n    import {Component, Vue} from 'vue-property-decorator';\n\n    @Component\n    export default class App extends Vue {\n        console.log(this.$vmq.sm)\n        // Will console TRUE whem media size is the defined SM\n    }\n</script>\n```\n\n### Development\n\nWant to contribute? Please submit a PR or report issues.\n\n### Todos\n\n - Write Tests\n - Test on more browsers\n\n## License\n\n - GPL3\n\n","readmeFilename":"readme.md"}