{"_id":"@cwist/vue-match-media","_rev":"4-2f10712730cbd0ffd855bc80f2ac7c10","name":"@cwist/vue-match-media","dist-tags":{"latest":"3.0.3"},"versions":{"3.0.0":{"name":"@cwist/vue-match-media","version":"3.0.0","description":"React to media query changes in your Vue 3 application (useful for adaptive design).","homepage":"https://github.com/cwist2/vue-match-media","bugs":{"url":"https://github.com/cwist2/vue-match-media"},"repository":{"type":"git","url":"git+https://github.com/cwist2/vue-match-media.git"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prettier":"prettier \"**/*.js\" \"**/*.json\" \"**/*.md\" \"**/*.yml\"","prettier:check":"npm run prettier -- --check","prettier:fix":"npm run prettier -- --write","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Webqam"},"license":"MIT","devDependencies":{"@vue/cli-service":"^4.4.1","husky":"^4.2.1","lint-staged":"^10.0.2","prettier":"^1.19.1","typescript":"^3.9.5","vue":"^3.0.9"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,md}":["prettier --write"]},"dependencies":{},"keywords":["vue","match","media","vue3"],"gitHead":"a4021b43afa0312a9b29d33185ddf1ca5d560637","_id":"@cwist/vue-match-media@3.0.0","_nodeVersion":"11.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-H/03PEn5JuRungQ9fog1gYd3Vv0P7VczzDh+anuwFa9bHUNDT1InydU3zztfgceWvDTCqPSTG9dVl/LM+zfmEw==","shasum":"2a5d6282c127cea88132fa8167e90cd2db033a63","tarball":"https://registry.npmjs.org/@cwist/vue-match-media/-/vue-match-media-3.0.0.tgz","fileCount":7,"unpackedSize":15415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY0TTCRA9TVsSAnZWagAAd74QAIS7ok9wFm5sF/CSXMWx\nt9FTXkbnnxVb7hErKrQHtdakfXS7nvVDL18Gk/yL2USL+ql78R7JN9wHi1gu\nu+J3ks6L1H7YC5GciytsK7VITbcu8egdmTCcQIbb5fIAGgJam69AHHtaRP1t\nW6Q64vJhAZWbbTa9K+gzxWMSFDk2QBZ6TWXLgilWX/lFUjNCgoqoizIl+SeV\nfP6CFVbHm72eHY8p2/GjcRjGUx3wowR0sC9uTyjcR40aFa7ycf73R6R7j8Cp\nKVMxXbb2LzrOjdyQSi/wgoIdGkzXyLCCuLs1lFDRMQHGFPZ8Lgv4V1YI7iQP\n3FEIeinV3v3lbn+F3/ALSnANrAJkzop5iDrE4ChNBVMP1gcEsDoXEzxQc2Op\ngOULmueF5YlWbC6n58i/JHAiwmt7j7D9Y8EiBSthu+08W6un1kSXq6USlPGt\npv/Vtsv/t9Ul6xM6SsPxNMhd6zoXFmRij5b/4iCQRoU3Rj2z59c01xvrUYzW\nuQ7Lnq67eyFAAzJovqePb07VDrz6usVQuaHCicbg4xBu0/2vuIVkYq0q7Ee/\nF9hLEltwU7nDlhMzXPPsPo0KGFtKZTa3RU6dZ1zxCX0BitXsGVCpfbUhOsu2\nOAbIt/KFE+f7HfRGM11ievJ0zhEH7dofl+zxp2lodalIkCqm9E95RwMLle/X\n76xQ\r\n=KyGu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHa9oB/k7+IZujNdShzaI8tD+mydeNs/gZXVE1/003ltAiEA55TsRnX0iPM5s7IsvlqZgChD7FmhCuoI5rzgs9IjE4U="}]},"_npmUser":{"name":"cwist","email":"c.wist@free.fr"},"directories":{},"maintainers":[{"name":"cwist","email":"c.wist@free.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-match-media_3.0.0_1617118419326_0.8935361740733785"},"_hasShrinkwrap":false},"3.0.1":{"name":"@cwist/vue-match-media","version":"3.0.1","description":"React to media query changes in your Vue 3 application (useful for adaptive design).","homepage":"https://github.com/cwist2/vue-match-media","bugs":{"url":"https://github.com/cwist2/vue-match-media"},"repository":{"type":"git","url":"git+https://github.com/cwist2/vue-match-media.git"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prettier":"prettier \"**/*.js\" \"**/*.json\" \"**/*.md\" \"**/*.yml\"","prettier:check":"npm run prettier -- --check","prettier:fix":"npm run prettier -- --write","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Webqam"},"license":"MIT","devDependencies":{"@vue/cli-service":"^4.4.1","husky":"^4.2.1","lint-staged":"^10.0.2","prettier":"^1.19.1","typescript":"^3.9.5","vue":"^3.0.9"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,md}":["prettier --write"]},"dependencies":{},"keywords":["vue","match","media","vue3"],"gitHead":"edc3fc937fc0e35b608ce6f9385da449254f2ef7","_id":"@cwist/vue-match-media@3.0.1","_nodeVersion":"11.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-0zpLXi8941yKuankeLfbZO5xPUZxMfCmWT/GjvaTeKQ1S78WSxQdV1BBxMTVr2o1FACo7rlcrZn8zPei9kSSwA==","shasum":"91d47d7c327fe998737e6adf31239014359df40b","tarball":"https://registry.npmjs.org/@cwist/vue-match-media/-/vue-match-media-3.0.1.tgz","fileCount":7,"unpackedSize":15452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY0gSCRA9TVsSAnZWagAAO9IP/3qyyoRL9JYkA/9IOXFg\nRyU3QTZAjRO+oAvHU/echKU1QXJ+W4cVmG2fBdi6i9pZ62lZDqAEZxU7hGVU\niUzPFEMz/ROsXwPLZzBjYqJVqUYHC/hRVtrE3g3861Zo6n320wOtL+Y+ZkG9\nist7rg3zj0uo04+NSSm++STIyMcv6XPRqBevxPrAeStwFsOT7ctKaFMuH3YY\nmxLO9qSOrnmc7B+HNz9Z1kfyGzGA2t/QzA1P0qLz1vMme8lGWxH8VZunECdy\nSPuKJCYxCRGg5bSTwg1wf9Po3lKEISTvIbT27WZJxgc4GLHgq1+VE27hH6dY\nOHetP17PxLrrq753RMvBo9wkAoYO7XXb5eyLprxiImloDP7ocabqfHC5GZGQ\nsOg67YWLTwj9PzPy8vpAFaOpntcrcHoLsDPWAzIMkv80nLQw+1ej8Ng8M999\niDYcDJ37X7wqC4Rpbkv8zWvW1ulYQJTRMoo6C4BWrgmLHtBTxLFiy6Mm0FNK\n0Xcx8dXFuzGzVRQakWk7MXlGT7sQKq3wUTll4jHSOGPvFVTeZwEACgA5SX/l\nzQpytu4sZUARh9iwk1wHIJ7bCi+ZpKNMdnDmi9cL+bdglBQDFqfaRT6QH085\nEg66SbMG3k0gFQ1qncgz6+ZmiaN+kzZM6cX82MnrRtWAHXpwZirhDt2IXd29\nKi7v\r\n=huLY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDep3a5aJIsNpRM7n57vZ8ZJ3U9bOk1Gg3FnbxUv363wQIhAICcpBVUmgPu6VhUCHTiBkT1ijnZlWk/TvgnC96T5++S"}]},"_npmUser":{"name":"cwist","email":"c.wist@free.fr"},"directories":{},"maintainers":[{"name":"cwist","email":"c.wist@free.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-match-media_3.0.1_1617119249620_0.3217473129169037"},"_hasShrinkwrap":false},"3.0.2":{"name":"@cwist/vue-match-media","version":"3.0.2","description":"React to media query changes in your Vue 3 application (useful for adaptive design).","homepage":"https://github.com/cwist2/vue-match-media","bugs":{"url":"https://github.com/cwist2/vue-match-media"},"repository":{"type":"git","url":"git+https://github.com/cwist2/vue-match-media.git"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prettier":"prettier \"**/*.js\" \"**/*.json\" \"**/*.md\" \"**/*.yml\"","prettier:check":"npm run prettier -- --check","prettier:fix":"npm run prettier -- --write","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Webqam"},"license":"MIT","devDependencies":{"@vue/cli-service":"^4.4.1","husky":"^4.2.1","lint-staged":"^10.0.2","prettier":"^1.19.1","typescript":"^3.9.5","vue":"^3.0.9"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,md}":["prettier --write"]},"dependencies":{},"keywords":["vue","match","media","vue3"],"gitHead":"2f356ce0e6bce2682f3b7e0a32d4f904b68562e7","_id":"@cwist/vue-match-media@3.0.2","_nodeVersion":"11.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-BxJ+hcjoHoTks7ZSOJftHr7zCoxJN9krgfJLPW0W9p6o6TOecsfPIqMpDEI789OmY2nez6BXMa0JyPLpceLVZA==","shasum":"7743ae2bfe49cd0da3867bcdda43fa35ae609514","tarball":"https://registry.npmjs.org/@cwist/vue-match-media/-/vue-match-media-3.0.2.tgz","fileCount":8,"unpackedSize":15578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeZvXCRA9TVsSAnZWagAA7DUP/0QDkZwjk52NUfO9IOed\nyka33uxBG984OWV56By2enq+hQbpI/Mp7Lv9JaLzfR+aMnu6pSrOYXH0LY8q\nqy1kqLf2Qu+5SDhllb5YEi3h5YHCBHsEOEvWDolOSkr2JwzFxaWbUqxgX8/2\nOGHg1r+xac9+5xIthW5LtX1J9XLTmCCmKF+Sb7hxDQbNZkaMNnRxBQ4/BxXj\nYilq6DuNiA/VdE7hw+JxwwZ8Vg/bTR+/ge/KYp7/aTmBdU1itZbIsOrLpvcK\nvxRbDKFwRzGsOFQ/FvDmRz+sS8z0FoxMX3O7C541WNWKicXFroDhQGo/g4QL\n59vgurl5C7kInvTCidUP4UoV2DFf7rSgzHEQuDFuN4MIa3/PA7ZmZ3h8ZLYs\n1De+1HvSXMj3WYxl2Ph9XdupI6DyX6beniFdiJQffDkggUQ4jGG6pJ+484nz\nee8Ft+1BuYTmuzqdJFNGwX9cocfl04DsaWl41O8Ohj0VUTnGCmSdLiXCWM96\njDg4utgxZUlTSZEu/7GAYGHD3y6V89ozvMso82k+h+hPC96WNVQh0r0bvZZn\nXfdnqf4aKh6WE96aOjUk2JWk3HFEyvTG+wNwQayhuG/hPGCNLgfDlj4BMSqG\ncEUCRBBPkPj21U25ThhlTAVe3ubdFkcrqkSGPE5zWuUerxOWwAC73OZ4b4Mi\n/5UN\r\n=kPot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnzBH5YlESbnOADe+JnScEfVRSxyC7VbHxxt/T37KZVAIhAPpogO99FFc4ieh/yO6x/qrBfRBlZjmZR5CB1NON8RWz"}]},"_npmUser":{"name":"cwist","email":"c.wist@free.fr"},"directories":{},"maintainers":[{"name":"cwist","email":"c.wist@free.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-match-media_3.0.2_1618582487294_0.7352883676038369"},"_hasShrinkwrap":false},"3.0.3":{"name":"@cwist/vue-match-media","version":"3.0.3","description":"React to media query changes in your Vue 3 application (useful for adaptive design).","homepage":"https://github.com/cwist2/vue-match-media","bugs":{"url":"https://github.com/cwist2/vue-match-media"},"repository":{"type":"git","url":"git+https://github.com/cwist2/vue-match-media.git"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","prettier":"prettier \"**/*.js\" \"**/*.json\" \"**/*.md\" \"**/*.yml\"","prettier:check":"npm run prettier -- --check","prettier:fix":"npm run prettier -- --write","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Webqam"},"license":"MIT","devDependencies":{"@vue/cli-service":"^4.4.1","husky":"^4.2.1","lint-staged":"^10.0.2","prettier":"^1.19.1","typescript":"^3.9.5","vue":"^3.0.9"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,md}":["prettier --write"]},"dependencies":{},"keywords":["vue","match","media","vue3"],"gitHead":"087b29b854d02128ec864fba1d465e0555b91ad4","_id":"@cwist/vue-match-media@3.0.3","_nodeVersion":"11.15.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-2YE+OsMk65F/7/7HBenrIwYN8tQEwXn1w5wGGamvEI89XSU26qr59TZCHDqW78f8BDGSg8mO8aGpP4McUqZykQ==","shasum":"c89e329c66464a78ab958da6fdd210bae46343ee","tarball":"https://registry.npmjs.org/@cwist/vue-match-media/-/vue-match-media-3.0.3.tgz","fileCount":10,"unpackedSize":15956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeZ63CRA9TVsSAnZWagAA1JUP/0+SyBY2zWjVB++Qmeam\nFbkXeIMFbwzSjCZH9VcuGOH8XEnz610JLqCCidiGSpOMyx/u2+N7e3yOiCF5\nDP/AUMQewqMrU5ysmGgUutxuwDxBGjNUj3chG71fJZJejCFxIcKEN8es3ITE\nw64W7RDKuh/FAHuVGICNcYIeucqLxlgvfcI7ANi508Ev6Gta1vQ1rX4rvryr\nIKhP0gMmAFKEzCKh2QXb71EF6JXSoCpaC07RqnWVGw7KKIPsT92Th7uoaxmc\nyykvca12qmwQOiciLMii2fpS4wC59wEo4Z7iodxV+4Wo3Uzk3tWKY5xQKODK\nnaBD0EULmxKOUNGl55DV+IcvcRoUk591SgtoT0mXXoVUggIRJlpuB4MpziVl\nO5VF9JiFWZAgSqzY8bAMA1i1uHFm4OImgmSu6mH3aqMI/SMkMgjAB5LcBvem\nADi0kzKxtWxy2+PNR51wuoJ0d/O5MqDhLpL9X20KissYWYbxKpo9tqyUsFDM\neXKKnYe5emhQis5vuU31gPgVxlRcqnzzOao56cEGftBjHVYo058jFc7m20Dq\nBTzOH2yMaLsdLLuW3nLCg5DpGcyAdXeEfAEF/afMd6IS6WTv39Ahmp0MG6qF\nNzSD43grIuNoqrq0jEEwEwY2iHltirTs/sczqV2DIm7bcjbP8S8l/gwB5HTf\nWCou\r\n=ZQ6A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXGOXeI8Ab2xTMPYFg4Wx6MIZSqI0e72QcFcJcQPqogAiEAv0QvfPKW4ZFjx8bOuYjjmw0wVPOsNeJBM8M5AXKtqeE="}]},"_npmUser":{"name":"cwist","email":"c.wist@free.fr"},"directories":{},"maintainers":[{"name":"cwist","email":"c.wist@free.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-match-media_3.0.3_1618583223189_0.8822398673264564"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-30T15:33:39.285Z","3.0.0":"2021-03-30T15:33:39.472Z","modified":"2022-04-05T02:22:56.094Z","3.0.1":"2021-03-30T15:47:29.761Z","3.0.2":"2021-04-16T14:14:47.430Z","3.0.3":"2021-04-16T14:27:03.574Z"},"maintainers":[{"name":"cwist","email":"c.wist@free.fr"}],"description":"React to media query changes in your Vue 3 application (useful for adaptive design).","homepage":"https://github.com/cwist2/vue-match-media","keywords":["vue","match","media","vue3"],"repository":{"type":"git","url":"git+https://github.com/cwist2/vue-match-media.git"},"author":{"name":"Webqam"},"bugs":{"url":"https://github.com/cwist2/vue-match-media"},"license":"MIT","readme":"# Vue matchMedia\n\nThis fork is a port to Vue 3\n\n> React to media query changes in your Vue 3 application (useful for adaptive design).\n\n## Installation\n\n```sh\nnpm install @cwist/vue-match-media\n```\n\n## Usage\n\n```js\nimport { createApp } from 'vue';\nimport App from '@/App.vue';\nimport { createVueMatchMediaPlugin } from '@cwist/vue-match-media';\n\n// Define breakpoints you want to react to\nconst breakpoints = {\n  s: '48em',\n  m: '50em',\n  l: '62em',\n  xl: '75em',\n};\n\nconst VueMatchMediaPlugin = createVueMatchMediaPlugin({ breakpoints });\n\n// Load plugin\ncreateApp(App)\n  .use(VueMatchMediaPlugin)\n  .mount('#app');\n```\n\n```html\n<template>\n  <div>\n    <div v-if=\"$matchMedia.s\">\n      This content is visible only on devices above 48em.\n    </div>\n\n    <div v-if=\"$matchMedia.xl\">\n      This content is visible only on devices above 75em.\n    </div>\n    <div v-else>This content is visible only on devices under 75em.</div>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'DemoComponent',\n  };\n</script>\n```\n\nUsing composition API\n\n```html\n<template>\n  <div>\n    <div v-if=\"matchMedia.s\">\n      This content is visible only on devices above 48em.\n    </div>\n\n    <div v-if=\"matchMedia.xl\">\n      This content is visible only on devices above 75em.\n    </div>\n    <div v-else>This content is visible only on devices under 75em.</div>\n  </div>\n</template>\n\n<script>\n  import { useMatchMedia } from '@cwist/vue-match-media';\n\n  export default {\n    name: 'DemoComponent',\n    setup() {\n      const matchMedia = useMatchMedia();\n\n      return {\n        matchMedia,\n      };\n    },\n  };\n</script>\n```\n\n## Breakpoint syntax\n\n```js\nconst breakpoints = {\n  // @media (min-width: 1920px)\n  fullHD: 1920,\n  // @media (min-width: 48em)\n  medium: '48em',\n  // Object notation\n  // @media (max-width: 768px)\n  mobile: { maxWidth: 768 },\n  // @media (orientation: landscape)\n  landscape: { orientation: 'landscape' },\n  // Multiple features\n  // @media (min-width: 62em) and (min-resolution: 150dpi)\n  highDPIDesktop: {\n    minWidth: '62em',\n    minResolution: '150dpi',\n  },\n  // @media (min-width: 768px) and (max-width: 992px)\n  tablet: [768, 992],\n  // SSR support\n  // In order to use SSR, you must provide a default value\n  // @media (min-width: 62em)\n  // Defaults to true during SSR, will be updated on client side\n  large: {\n    breakpoint: '62em',\n    defaultValue: true,\n  },\n  // Defaults to false during SSR, will be updated on client side\n  portrait: {\n    breakpoint: { orientation: 'portrait' },\n    defaultValue: false,\n  },\n};\n```\n\n## Contributing\n\nPlease see [contributing guide](CONTRIBUTING.md).\n\n## License\n\n[MIT](LICENSE)\n\n## TODO List\n\n- [x] SSR support (set a default breakpoint)\n- [ ] Improve composition API use\n- [ ] Add demo\n","readmeFilename":"README.md"}