{"id":31659563,"url":"https://github.com/adi-works/vue-breakpoint","last_synced_at":"2025-10-07T16:05:02.975Z","repository":{"id":41754342,"uuid":"130509876","full_name":"adi-works/vue-breakpoint","owner":"adi-works","description":"😸 A renderless Vue.js component for composing CSS breakpoints","archived":false,"fork":false,"pushed_at":"2023-01-06T00:39:16.000Z","size":7972,"stargazers_count":80,"open_issues_count":36,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-05T02:53:44.571Z","etag":null,"topics":["breakpoint","component","css","vue"],"latest_commit_sha":null,"homepage":"https://git.io/JkjYo","language":"JavaScript","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/adi-works.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-21T20:31:44.000Z","updated_at":"2025-05-15T20:41:01.000Z","dependencies_parsed_at":"2023-02-05T00:30:30.866Z","dependency_job_id":null,"html_url":"https://github.com/adi-works/vue-breakpoint","commit_stats":null,"previous_names":["adi518/vue-breakpoint-component","adi-works/vue-breakpoint"],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/adi-works/vue-breakpoint","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adi-works%2Fvue-breakpoint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adi-works%2Fvue-breakpoint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adi-works%2Fvue-breakpoint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adi-works%2Fvue-breakpoint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adi-works","download_url":"https://codeload.github.com/adi-works/vue-breakpoint/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adi-works%2Fvue-breakpoint/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278802832,"owners_count":26048578,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["breakpoint","component","css","vue"],"created_at":"2025-10-07T16:01:59.446Z","updated_at":"2025-10-07T16:05:02.969Z","avatar_url":"https://github.com/adi-works.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"## Install\n\n```bash\n$ npm install --save vue-breakpoint-component\n```\n\n## Usage\n\nTo use the component in your templates, simply import and register with your component:\n\n### Script\n\n```js\nimport { VBreakpoint } from 'vue-breakpoint-component'\n\nexport default {\n  components: {\n    VBreakpoint\n  }\n}\n```\n\n### Template\n\n```html\n\u003cv-breakpoint\u003e\n  \u003cdiv slot-scope=\"scope\"\u003e\n    \u003cspan v-if=\"scope.isSmall\" style=\"font-size: 2rem\"\u003e 😸 \u003c/span\u003e\n    \u003cspan v-if=\"scope.isMedium\" style=\"font-size: 4rem\"\u003e 😸 \u003c/span\u003e\n    \u003cspan v-if=\"scope.isLarge\" style=\"font-size: 6rem\"\u003e 😸 \u003c/span\u003e\n    \u003cspan v-if=\"scope.isXlarge\" style=\"font-size: 8rem\"\u003e 😸 \u003c/span\u003e\n    \u003cspan v-if=\"scope.noMatch\" style=\"font-size: 10rem\"\u003e 😸 \u003c/span\u003e\n  \u003c/div\u003e\n\u003c/v-breakpoint\u003e\n```\n\n## Global Install\n\nYou can also choose to install the component globally. This will install three components `v-breakpoint`, `v-show-at`, `v-hide-at`.\n\n```js\nimport Vue from 'vue'\n\nimport { Plugin as VBreakpoint } from 'vue-breakpoint-component'\n\nVue.use(VBreakpoint)\n```\n\n## Show-At/Hide-At Usage\n\nTo use the component in your templates, simply cherry-import and register with your component.\n\n### Script\n\n```js\nimport { VShowAt } from 'vue-breakpoint-component'\n\nexport default {\n  components: { VShowAt }\n}\n```\n\n### Template\n\n```html\n\u003cv-show-at small\u003e 😸 \u003c/v-show-at\u003e\n\u003cv-show-at medium\u003e 😺 \u003c/v-show-at\u003e\n\u003cv-show-at large\u003e 😽 \u003c/v-show-at\u003e\n\u003cv-show-at xlarge\u003e 🐱 \u003c/v-show-at\u003e\n\u003cv-show-at no-match\u003e 😿 \u003c/v-show-at\u003e\n\u003c!-- Aka Bootstrap 4 \"xs\" --\u003e\n```\n\n## Multiple Root Elements (Experimental)\n\nNotice you can also show/hide multiple elements using an experimental Fragment-like component hack, described [here](#experimental-features).\n\n### 🚧 Note\n\nTo unlock this feature, you will have to [configure](#configuration) the component with the `experimental` flag.\n\n### Template\n\n```html\n\u003cv-show-at small\u003e\n  \u003cspan\u003e😸\u003c/span\u003e\n\u003c/v-show-at\u003e\n```\n\n## V-Model\n\nYou can also leverage the breakpoint state without composing inside it, using a `v-model`.\n\n### Template\n\n```html\n\u003cv-breakpoint v-model=\"model\"\u003e\u003c/v-breakpoint\u003e\n\u003cdiv :style=\"style\"\u003e\u003c/div\u003e\n```\n\n### Script\n\n```js\nimport { VBreakpoint, Model } from 'vue-breakpoint-component'\n\nexport default {\n  components: {\n    VBreakpoint\n  },\n  data: () =\u003e ({\n    model: new Model()\n  }),\n  computed: {\n    style() {\n      if (this.model.isSmall) {\n        return {\n          width: '1rem',\n          height: '1rem'\n        }\n      } else if (this.model.isMedium) {\n        return {\n          width: '2rem',\n          height: '2rem'\n        }\n      } else if (this.model.isLarge) {\n        return {\n          width: '3rem',\n          height: '3rem'\n        }\n      } else if (this.model.isXlarge) {\n        return {\n          width: '4rem',\n          height: '4rem'\n        }\n      }\n    }\n  }\n}\n```\n\n\u003c!-- ## Provide/Inject\nYou can also leverage the breakpoint state using the provide/inject pattern, using the \u003ca href=\"https://vuejs.org/v2/guide/render-function.html#Functional-Components\"\u003efunctional\u003c/a\u003e component `\u003cv-with-breakpoint\u003e`. This component does not accept any props, it only exposes a scoped-slot, simliar to the `\u003cv-breakpoint\u003e` component. However, being functional it is more performant than the standard component and therefore, it's encouraged to use `\u003cv-breakpoint\u003e` only where `v-model` is a must.\n\n### Script\n```js\n// main.js\nimport Vue from 'vue'\nimport App from './App.vue'\nimport { VBreakpoint as BreakpointProvider } from 'vue-breakpoint-component'\n\nnew Vue({\n  render: h =\u003e h(BreakpointProvider, [App])\n}).$mount('#app')\n```\nThen, anywhere in your app, use the injector component:\n### Template\n```html\n\u003ctemplate\u003e\n  \u003cv-with-breakpoint\u003e\n    \u003cspan slot-scope=\"scope\" v-if=\"scope.isSmall\"\u003e  😸  \u003c/span\u003e\n  \u003c/v-with-breakpoint\u003e\n\u003c/template\u003e\n```\n\n## Global Mixin --\u003e\n\n## Props\n\n```js\ndebounceTime: {\n  type: Number,\n  description: 'Time to wait before invoking resize handler.'\n}\n```\n\n## Events\n\nThe component emits two core events, `input` and `change`. The `input` event is required for `v-model` usage, but other than that, it's fairly similar to `change` event. Each of these events benefit different composition styles.\n\n### Payloads\n\n#### Input and Change Events `[Object]`\n\nEach of these events has the same payload. Besides breakpoint state, they also supply some auxiliary state, like **viewport** and current **inner window dimensions** (which are also aliased for convenience). Example:\n\n```js\n{\n  breakpoint: 'small',\n  isSmall: true,\n  isMedium: false,\n  isLarge: false,\n  noMatch: false,\n  iw: 623,\n  ih: 1077,\n  innerWidth: 623,\n  innerHeight: 1077,\n  innerWidthPx: '623px',\n  innerHeightPx: '1077px',\n  vw: 1920,\n  vh: 1200,\n  viewportWidth: 1920,\n  viewportHeight: 1200,\n  viewportWidthPx: '1920px',\n  viewportHeightPx: '1200px'\n}\n```\n\n#### Breakpoint Event `[String]`\n\n```js\n;'small' | 'medium' | 'large' | 'xlarge' // Etc'\n```\n\n#### Breakpoint-Namespace Event\n\nBesides those events, the component also emits a breakpoint-namespace event per breakpoint defined. Thus, you can do something like:\n\n```html\n\u003cv-breakpoint @small=\"handleSmall\"\u003e\u003c/v-breakpoint\u003e\n\u003cv-breakpoint @medium=\"handleMedium\"\u003e\u003c/v-breakpoint\u003e\n\u003cv-breakpoint @large=\"handleLarge\"\u003e\u003c/v-breakpoint\u003e\n\u003cv-breakpoint @xlarge=\"handleXlarge\"\u003e\u003c/v-breakpoint\u003e\n\u003cv-breakpoint @no-match=\"handleNoMatch\"\u003e\u003c/v-breakpoint\u003e\n\u003c!-- Aka Bootstrap 4 \"xs\" --\u003e\n```\n\n## Configuration\n\nThe default breakpoints are based on [Bootstrap 4 (Stable)](https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints). To customize the component you will have to use the extend helper. Start off by creating a new component asset, e.g.: `VBreakpoint.js`. Then, use the following snippet and adjust configuration to your needs.\n\n```js\n// \u003cproject-root\u003e/src/components/VBreakpoint.js\n\nimport { extend } from 'vue-breakpoint-component'\n\n// Default configuration:\nconst config = {\n  breakpoints: {\n    small: '(min-width: 576px)',\n    medium: '(min-width: 768px)',\n    large: '(min-width: 992px)',\n    xlarge: '(min-width: 1200px)'\n  },\n  debounceTime: 100,\n  experimental: false\n}\n\nconst { VShowAt, VHideAt, VBreakpoint } = extend(config)\n\nexport default VBreakpoint\n\nexport { VShowAt, VHideAt, VBreakpoint }\n```\n\n### Usage\n\nImport **locally** and use as you would normally.\n\n```js\n// Local imports\n\nimport { Model } from 'vue-breakpoint-component'\nimport { VShowAt, VHideAt, VBreakpoint } from './VBreakpoint'\n\nexport default {\n  components: {\n    VShowAt,\n    VHideAt,\n    VBreakpoint\n  },\n  data: () =\u003e ({\n    model: new Model()\n  })\n}\n```\n\n### Default Breakpoints (Bootstrap 4)\n\n```css\n/**\n* Extra small devices (portrait phones, less than 576px)\n* No media query for \"xs\" since this is the default in Bootstrap.\n*/\n\n/* Small devices (landscape phones, 576px and up) */\n@media (min-width: 576px) {\n  /* ... */\n}\n\n/* Medium devices (tablets, 768px and up) */\n@media (min-width: 768px) {\n  /* ... */\n}\n\n/* Large devices (desktops, 992px and up) */\n@media (min-width: 992px) {\n  /* ... */\n}\n\n/* Extra large devices (large desktops, 1200px and up) */\n@media (min-width: 1200px) {\n  /* ... */\n}\n```\n\n### Custom Breakpoints\n\nYou can define an **infinite** amount of breakpoints. For media-query syntax see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).\n\n## Layout Thrashing\n\nThis component avoids [layout-thrashing](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) pitfalls by utilizing `window.requestAnimationFrame`.\n\n## Experimental Features\n\n#### Wrapping Multiple Root Elements (Fragment Hack)\n\nAs you may know, Vue does not support a stateful `Fragment` component, which allows you to render a component with multiple root elements, overruling the \"single root element\" principle dictated at the outset of component-based architecture. It was introduced to React during a full re-write. You can learn about it from [React docs](https://reactjs.org/docs/fragments.html). Vue is likely to follow suit in a similar manner (probably with Vue 3). This feature request is currently discussed [here](https://github.com/vuejs/vue/issues/7088). Meanwhile, I decided to hack a Fragment component, which is also incorporated into this component, thanks to Github user [y-nk](https://github.com/y-nk). I elaborated his [solution](https://github.com/y-nk/vue-fragments) so it can also show/hide content (using directives like `v-show` or `v-if` won't work here).\n\n#### 🚧 Note\n\nSince this is a hack, it is likely not to be extended into a fully supported feature. Feel free to contribute back though.\n\n## Browser Support\n\nThis component relies on [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) API (IE 10+). For older browsers and IE, you will need a polyfill. There's [@paulirish](https://github.com/paulirish/matchMedia.js/) and [@weblinc](https://github.com/weblinc/media-match). The latter seems more maintained.\n\n## Related Links\n\n- [dpi.lv](http://dpi.lv/)\n- [Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)\n- [Bootstrap 4 responsive breakpoints](https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints)\n- [How to build a responsive grid system](https://zellwk.com/blog/responsive-grid-system/)\n\n## Support\n\nPlease open an [issue](https://github.com/adi518/vue-breakpoint-component/issues) for support.\n\n## License\n\nCopyright (c) 2018 [Adi Sahar](https://github.com/adi518) by [MIT](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadi-works%2Fvue-breakpoint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadi-works%2Fvue-breakpoint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadi-works%2Fvue-breakpoint/lists"}