{"id":15572961,"url":"https://github.com/codemonk-digital/vue-responsiveness","last_synced_at":"2025-07-16T11:06:50.617Z","repository":{"id":96144485,"uuid":"608459166","full_name":"codemonk-digital/vue-responsiveness","owner":"codemonk-digital","description":"Tiny plugin for managing responsiveness breakpoints in Vue3 apps.","archived":false,"fork":false,"pushed_at":"2025-01-01T07:32:59.000Z","size":703,"stargazers_count":13,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-27T05:41:24.047Z","etag":null,"topics":["bootstrap5","bulma","chakra-ui","ionic-framework","master-css","material-design","material-ui","materializecss","media-queries","quasar-framework","responsiveness","semantic-ui","skeleton","ssr","tailwindcss","vue","vue3","vuetify","windicss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vue-responsiveness","language":"TypeScript","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/codemonk-digital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2023-03-02T03:50:24.000Z","updated_at":"2025-04-02T04:09:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"22915ab3-08cc-40f8-afca-fc3553fa7576","html_url":"https://github.com/codemonk-digital/vue-responsiveness","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/codemonk-digital/vue-responsiveness","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemonk-digital%2Fvue-responsiveness","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemonk-digital%2Fvue-responsiveness/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemonk-digital%2Fvue-responsiveness/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemonk-digital%2Fvue-responsiveness/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codemonk-digital","download_url":"https://codeload.github.com/codemonk-digital/vue-responsiveness/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemonk-digital%2Fvue-responsiveness/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265505049,"owners_count":23778421,"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":["bootstrap5","bulma","chakra-ui","ionic-framework","master-css","material-design","material-ui","materializecss","media-queries","quasar-framework","responsiveness","semantic-ui","skeleton","ssr","tailwindcss","vue","vue3","vuetify","windicss"],"created_at":"2024-10-02T18:09:05.278Z","updated_at":"2025-07-16T11:06:50.576Z","avatar_url":"https://github.com/codemonk-digital.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Vue Responsiveness\n**What** - tiny plugin for working with responsiveness intervals, focused runtime performance and great DX.  \n**Why** - I'm obsessed with runtime performance and ease of use: see [how it works](#how-it-works).\n\n\u003cp\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-responsiveness\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vue-responsiveness.svg?color=f9d342\u0026style=plastic\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-responsiveness\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-responsiveness.svg?color=f9d342\u0026style=plastic\" alt=\"Latest Release\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/codemonk-digital/vue-responsiveness/blob/main/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vue-responsiveness.svg?color=f9d342\u0026style=plastic\" alt=\"License\"\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/dependencies-0-f9d342?style=plastic\" alt=\"Dependencies\" /\u003e\n    \u003ca href=\"https://unpkg.com/vue-responsiveness\"\u003e\u003cimg src=\"https://img.shields.io/badge/umd:gzip-1.12_kB-f9d342?style=plastic\" alt=\"unpkg umd min:gzip size\" /\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/coverage-100%25-f9d342?style=plastic\" alt=\"Unit tests coverage\"/\u003e\n\u003cimg src=\"https://img.shields.io/badge/SSR-ready-f9d342?style=plastic\" alt=\"SSR compatibility status\"/\u003e\n\u003ca href=\"https://makeapullrequest.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-f9d342?style=plastic\" alt=\"PRs Welcome\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n### Installation\n\n#### yarn\n```terminal\nyarn add vue-responsiveness\n```\n\n#### npm\n```terminal\nnpm i vue-responsiveness\n```\n\n### Basic demo\n\n[Codesandbox](https://codesandbox.io/p/devbox/nxqvcr)\n\n### Usage\n\n#### main.ts\n\n```ts\nimport { VueResponsiveness } from 'vue-responsiveness'\n\ncreateApp()\n   .use(VueResponsiveness)\n   .mount('#app')\n```\n#### in any `\u003ctemplate /\u003e`:\n```html\n\u003c!-- @media (min-width: 576px) --\u003e\n\u003ctemplate v-if=\"$matches.sm.min\"\u003e\n     ...content\n\u003c/template\u003e\n\n\u003c!-- @media (max-width: 767.9px) --\u003e\n\u003cSomeComponent v-if=\"$matches.sm.max\"\u003e\n  ...content\n\u003c/SomeComponent\u003e\n\n\u003c!-- @media (min-width: 576px) and (max-width: 767.9px) --\u003e\n\u003cdiv v-if=\"$matches.sm.only\"\u003e\n  ...content\n\u003c/div\u003e\n```\n\n### Breakpoint presets:\n```ts\nimport { VueResponsiveness, Presets } from \"vue-responsiveness\";\n\napp.use(VueResponsiveness, Presets.Tailwind_CSS)\n```\n\n*Note:* The default config value is set to Bootstrap 5's [responsiveness breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints) preset.\n\u003cdetails\u003e\n    \u003csummary\u003e\n         Preset details:\n\u003c/summary\u003e\n\n```ts\nPresets.Bootstrap_5 = {\n  xs: 0,\n  sm: 576,\n  md: 768,\n  lg: 992,\n  xl: 1200,\n  xxl: 1400,\n}\n```\n\u003c/details\u003e\n\nAvailable presets:\n\n`Bootstrap_3`, `Bootstrap_4`, `Bootstrap_5`, `Bulma`, `Chakra`, `Foundation`, `Ionic`, `Master_CSS`, `Material_Design`, `Materialize`, `Material_UI`, `Quasar`, `Semantic_UI`, `Skeleton`, `Tailwind_CSS`, `Vuetify`, `Windi_CSS`\n\n*Notes:*\n - If you maintain a CSS framework (or use one often) and want its preset added, [open an issue](https://github.com/codemonk-digital/vue-responsiveness/issues) or a PR.\n - If you spot any inconsistency in [the presets](https://github.com/codemonk-digital/vue-responsiveness/blob/main/lib/presets.ts) (either my typo or some library update), please, let me know, I'll correct it.\n\n### Bespoke intervals:\n```ts\napp.use(VueResponsiveness, {\n  small: 0,\n  medium: 777,\n  large: 1234\n})\n```\n```html\n\u003c!-- @media (min-width: 777px) and (max-width: 1233.9px) --\u003e\n\u003ctemplate v-if=\"$matches.medium.only\"\u003e\n  ...content\n\u003c/template\u003e\n```\n### Hide components, (while still rendering them) - usage with `v-show`:\n`\u003cSomeComponent /\u003e` below will be rendered at all times but will only be displayed on `md` and below:\n```html\n\u003c!-- rendered at all times (keeps listeners while hidden), but only displayed on \n  @media (max-width: 991.9px) --\u003e\n\u003cSomeComponent v-show=\"$matches.md.max\" /\u003e\n```\n### Use in `setup()` or `\u003cscript setup\u003e`:\n```ts\nimport { useMatches } from 'vue-responsiveness'\n\nconst matches = useMatches()\n\nconst currentInterval = computed(() =\u003e matches.interval)\nconst trueOnSmOnly = computed(() =\u003e matches.isOnly('sm'))\nconst trueOnMdAndAbove = computed(() =\u003e matches.isMin('md'))\n```\n\n### Testing:\nAdd plugin to `global.plugins` when testing components using the plugin's API:\nExample\n```ts\nimport MyComponent from './MyComponent.vue'\nimport { VueResponsiveness } from 'vue-responsiveness'\ndescribe('\u003cMyComponent /\u003e', () =\u003e {\n  it('should render', () =\u003e {\n    const wrapper = shallowMount(MyComponent, {\n      global: {\n        plugins: [VueResponsiveness]\n      }\n    })\n    // test here    \n  })\n})\n```\n\n### How it works:\n- uses the native [`window.matchMedia(queryString)`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and only reacts to changes in the query's `matches` value. It's the same API powering CSS media queries. \n- listeners are placed on the `MediaQueryList` instances, meaning they are garbage collected as soon as the app is unmounted, without leaving bound events behind on `\u003cbody\u003e` or `window` object.\n- no global pollution\n- only one instance per app (much lighter than having one instance per component needing it)\n- in terms of memory and/or CPU consumption, using `window.matchMadia` is a few hundred times lighter than using the _\"traditional\"_ `resize` event listener method\n\n### Got issues?\n[Let me know!](https://github.com/codemonk-digital/vue-responsiveness/issues)\n\nHappy coding!  \n:: }\u003c(((*\u003e ::\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemonk-digital%2Fvue-responsiveness","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodemonk-digital%2Fvue-responsiveness","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemonk-digital%2Fvue-responsiveness/lists"}