{"id":16145983,"url":"https://github.com/reegodev/vue-screen","last_synced_at":"2025-04-13T00:48:14.117Z","repository":{"id":39748444,"uuid":"181772522","full_name":"reegodev/vue-screen","owner":"reegodev","description":"Reactive screen size and media query states for VueJS","archived":false,"fork":false,"pushed_at":"2025-01-21T22:02:44.000Z","size":3055,"stargazers_count":240,"open_issues_count":3,"forks_count":20,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-13T00:48:07.696Z","etag":null,"topics":["height","innerheight","innerwidth","matchmedia","media","query","reactive","screen","vue","vuejs","width","window"],"latest_commit_sha":null,"homepage":"https://reegodev.github.io/vue-screen/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reegodev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-16T21:48:41.000Z","updated_at":"2024-12-10T10:15:17.000Z","dependencies_parsed_at":"2024-02-11T13:30:24.252Z","dependency_job_id":"c7f3efc8-4401-451c-ba7c-7cac35153d1f","html_url":"https://github.com/reegodev/vue-screen","commit_stats":{"total_commits":166,"total_committers":8,"mean_commits":20.75,"dds":0.6867469879518072,"last_synced_commit":"47691d2ae5e7c2ff1666af82772ffb1ad2d4c822"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reegodev%2Fvue-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reegodev%2Fvue-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reegodev%2Fvue-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reegodev%2Fvue-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reegodev","download_url":"https://codeload.github.com/reegodev/vue-screen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650437,"owners_count":21139672,"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":["height","innerheight","innerwidth","matchmedia","media","query","reactive","screen","vue","vuejs","width","window"],"created_at":"2024-10-10T00:18:30.168Z","updated_at":"2025-04-13T00:48:14.091Z","avatar_url":"https://github.com/reegodev.png","language":"JavaScript","readme":"[![Build Status](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://img.shields.io/badge/vue-3.x.x-brightgreen.svg)\n[![Build Status](https://github.com/reegodev/vue-screen/workflows/Node.js%20CI/badge.svg)](https://github.com/reegodev/vue-screen/actions)\n[![npm version](https://img.shields.io/npm/v/vue-screen)](https://www.npmjs.com/package/vue-screen)\n[![npm downloads](https://img.shields.io/npm/dm/vue-screen)](https://www.npmjs.com/package/vue-screen)\n[![codecov](https://codecov.io/gh/reegodev/vue-screen/branch/master/graph/badge.svg?token=KTHOOUSHFJ)](https://codecov.io/gh/reegodev/vue-screen)\n\n\u003cbr\u003e\n\n\u003e [!IMPORTANT]\n\u003e Version 2.x only supports Vue 3.\u003cbr\u003e v1 docs are available [here](https://github.com/reegodev/vue-screen/tree/v1.5.3#vuescreen)\n\n\u003cbr\u003e\n\n\u003cimg src=\"/packages/docs/src/public/logo.svg\" alt=\"VueScreen logo\" width=\"300\" style=\"margin-top: 40px\" /\u003e\n\n# VueScreen\nReactive screen size and media query states for Vue. Supports your favourite UI framework out of the box, and can be configured with any custom breakpoints.\n\n# Docs\n\n[https://reegodev.github.io/vue-screen](https://reegodev.github.io/vue-screen)\n\n# Features\n- Reactive and debounced screen size\u003cbr\u003e\n- Reactive media query states and device orientation\u003cbr\u003e\n- Detect touch screen capability\u003cbr\u003e\n- Breakpoints for most common ui frameworks provided out of the box: Tailwind, Bootstrap, Bulma, Foundation, Materialize, Semantic UI\u003cbr\u003e\n- SSR compatible\u003cbr\u003e\n\n# Installation\n\n```bash\nnpm i vue-screen\n```\n\n```bash\nyarn add vue-screen\n```\n\n# Quick start\n\n### Use with composition API\n```js\nimport { useScreen, useGrid } from 'vue-screen'\n\nexport default {\n    setup() {\n        const screen = useScreen()\n        const grid = useGrid('bulma')\n\n        return {\n            screen,\n            grid\n        }\n    }\n}\n```\nFor advanced configurations, check out the [docs website](https://reegodev.github.io/vue-screen/).\n\n### Use as a plugin\nIn main.js / main.ts:\n```js\nimport { createApp } from 'vue'\nimport VueScreen from 'vue-screen'\n\ncreateApp()\n  .use(VueScreen, 'bootstrap')\n  .mount('#app')\n```\nIn your components:\n```vue\n\u003ctemplate\u003e\n    \u003cul\u003e\n        \u003cli\u003eCurrent breakpoint is: {{ $grid.breakpoint }}\u003c/li\u003e\n        \u003cli\u003eWindow width is: {{ $screen.width }}\u003c/li\u003e\n        \u003cli\u003eWindow height is: {{ $screen.height }}\u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/template\u003e\n```\n\n# Upgrading from v1\n\nv2 introduces a few breaking changes both in the configuration and in the API.\nRead more about them in the [docs section](https://reegodev.github.io/vue-screen/guide/upgrading).\n\n# License\n\n[MIT](/LICENSE)\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freegodev%2Fvue-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freegodev%2Fvue-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freegodev%2Fvue-screen/lists"}