{"id":16976938,"url":"https://github.com/johndatserakis/vue-screen-size","last_synced_at":"2025-03-17T08:38:06.316Z","repository":{"id":43077538,"uuid":"172988386","full_name":"johndatserakis/vue-screen-size","owner":"johndatserakis","description":"🖥 Get easy and reactive access to the width and height of your screen.","archived":false,"fork":false,"pushed_at":"2023-03-18T05:43:04.000Z","size":1057,"stargazers_count":43,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2024-05-21T01:06:57.246Z","etag":null,"topics":["hight","resize","screen","size","vue","vue2","vue3","vuejs","width"],"latest_commit_sha":null,"homepage":"https://johndatserakis.github.io/vue-screen-size/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johndatserakis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-02-27T20:51:41.000Z","updated_at":"2024-03-20T07:08:32.000Z","dependencies_parsed_at":"2024-01-08T08:55:05.098Z","dependency_job_id":null,"html_url":"https://github.com/johndatserakis/vue-screen-size","commit_stats":{"total_commits":16,"total_committers":3,"mean_commits":5.333333333333333,"dds":0.375,"last_synced_commit":"62a32d7d3cfbd2bf42adcddff69c741091adcc85"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-screen-size","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-screen-size/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-screen-size/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-screen-size/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johndatserakis","download_url":"https://codeload.github.com/johndatserakis/vue-screen-size/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243853617,"owners_count":20358451,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hight","resize","screen","size","vue","vue2","vue3","vuejs","width"],"created_at":"2024-10-14T01:27:38.669Z","updated_at":"2025-03-17T08:38:05.891Z","avatar_url":"https://github.com/johndatserakis.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Utilities [🔝](#readme)"],"sub_categories":["UI Utilities"],"readme":"# vue-screen-size\n\nGet easy and reactive access to the width and height of your screen.\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-screen-size\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-screen-size.svg\" alt=\"NPM Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-screen-size\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vue-screen-size.svg\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fjohndatserakis%2Fvue-screen-size\u0026text=Check%20out%20vue-screen-size%20on%20GitHub\u0026via=johndatserakis\"\u003e\n  \u003cimg src=\"https://img.shields.io/twitter/url/https/github.com/johndatserakis/vue-screen-size.svg?style=social\" alt=\"Tweet\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Vue 3 Support\n\nVue 3 is supported from `v2.0.0` and beyond (current `master`). To use `vue-screen-size` with Vue 2, use `v1.0.1`.\n\n## Links\n\n- [Demo](https://johndatserakis.github.io/vue-screen-size/)\n- [GitHub](https://github.com/johndatserakis/vue-screen-size)\n- [npm](https://www.npmjs.com/package/vue-screen-size)\n\n## Install\n\n```bash\nyarn add vue-screen-size\n```\n\nOr you can include it through the browser at the bottom of your page:\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-screen-size/dist/vue-screen-size.min.js\"\u003e\u003c/script\u003e\n```\n\n## About\n\nSometimes when building an app you need to have access to the screen's dimensions. Usually that's going to be done in the css using `@media` - but sometimes you need to access that info right in your JavaScript.\n\nThe issue with this is you have to worry about adding event listeners and then removing them later. We wanted to just be able to import something quickly and then be able to forget about it later. So this `mixin` does just that - just use `Vue.use()` or `mixins: [],` and you're off.\n\nThere is something to consider - where and how you include this library. There are two ways, make sure to be aware of the differences:\n\n## Usage Example 1 - Whole app has access (Not Recommended)\n\nIn this usage - your whole app - and every child component - has access to the `$vssWidth`, `$vssHeight`, and `$vssEvent` variables. This is sorta pollutive though, as multiple instances of the mixin are initialized and it's kinda wasteful. The is due to the way Vue mixins are passed down to child components. You can read more about this [here](https://vuejs.org/v2/guide/mixins.html#Global-Mixin). The second example is recommended.\n\n```javascript\nimport { VueScreenSizeMixin } from 'vue-screen-size';\n\napp.mixin(VueScreenSizeMixin);\n\n// Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` anywhere in your app.\n```\n\n## Usage Example 2 - Just the component you install it on has access - (Recommended)\n\nIn this usage - the component you install it on will have access to the `$vssWidth`, `$vssHeight`, and `$vssEvent` variables. This may be a bit more restrictive, but it's less wasteful and should give you better performance.\n\n```javascript\nimport { VueScreenSizeMixin } from 'vue-screen-size';\n\nexport default {\n  mixins: [VueScreenSizeMixin],\n};\n\n// Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` in your component.\n```\n\n## Variables\n\n| name       | type   | description                                    |\n| ---------- | ------ | ---------------------------------------------- |\n| $vssWidth  | Number | The width of your screen                       |\n| $vssHeight | Number | The height of your screen                      |\n| $vssEvent  | Object | The event object data from the resizing event. |\n\n## Methods\n\n| method              | parameters | description                                      |\n| ------------------- | ---------- | ------------------------------------------------ |\n| $vssDestroyListener | none       | Force the removal of the attached event listener |\n\n## Development\n\n```bash\n# Install dependencies\nyarn\n\n# Serve with hot reload\nyarn dev\n\n# Run the tests\nyarn test\n\n# Build demo page\nyarn build:example\n\n# Build library\nyarn build:library\n\n# Build everything and run tests\nyarn build\n```\n\n## Other\n\nGo ahead and fork the project! Submit an issue if needed. Have fun!\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohndatserakis%2Fvue-screen-size","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohndatserakis%2Fvue-screen-size","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohndatserakis%2Fvue-screen-size/lists"}