{"id":13701404,"url":"https://github.com/apertureless/vue-breakpoints","last_synced_at":"2025-04-06T06:13:10.649Z","repository":{"id":24495484,"uuid":"101658003","full_name":"apertureless/vue-breakpoints","owner":"apertureless","description":"🍬  🙈 Vue.js utility component to show and hide components based on breakpoints","archived":false,"fork":false,"pushed_at":"2022-12-07T04:11:20.000Z","size":1251,"stargazers_count":193,"open_issues_count":15,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T07:05:46.574Z","etag":null,"topics":["breakpoints","component","responsive","utility","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://apertureless.github.io/vue-breakpoints/","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/apertureless.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-28T15:30:14.000Z","updated_at":"2025-01-18T12:25:57.000Z","dependencies_parsed_at":"2022-07-27T04:46:26.551Z","dependency_job_id":null,"html_url":"https://github.com/apertureless/vue-breakpoints","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-breakpoints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-breakpoints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-breakpoints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-breakpoints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apertureless","download_url":"https://codeload.github.com/apertureless/vue-breakpoints/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247441059,"owners_count":20939239,"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":["breakpoints","component","responsive","utility","vue","vuejs"],"created_at":"2024-08-02T20:01:35.602Z","updated_at":"2025-04-06T06:13:10.630Z","avatar_url":"https://github.com/apertureless.png","language":"JavaScript","funding_links":["https://ko-fi.com/C0C1WP7C","https://www.buymeacoffee.com/xcqjaytbl"],"categories":["UI Utilities [🔝](#readme)","UI实用程序","Components \u0026 Libraries","JavaScript","UI Utilities"],"sub_categories":["响应式设计","UI Utilities","Responsive Design"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"static/logo.png\" /\u003e\n\u003c/p\u003e\n\n# vue-breakpoints\n[![Build Status](https://travis-ci.org/apertureless/vue-breakpoints.svg?branch=develop)](https://travis-ci.org/apertureless/vue-breakpoints)\n[![codecov](https://codecov.io/gh/apertureless/vue-breakpoints/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-breakpoints)\n[![npm](https://img.shields.io/npm/v/vue-breakpoints.svg)](https://www.npmjs.com/package/vue-breakpoints)\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-breakpoints/blob/master/LICENSE)\n\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)\n\nVue.js utility component to show and hide components based on breakpoints\n\n📺 [Demo](https://apertureless.github.io/vue-breakpoints/)\n\n## 🔧  Install\n`npm i vue-breakpoints`\n\n`yarn add vue-breakpoints`\n\n## 👈 Usage\n\n```javascript\n\n\u003ctemplate\u003e\n  \u003cnav\u003e\n    \u003chide-at breakpoint=\"medium\"\u003e\n      \u003cmobile-nav /\u003e\n    \u003c/hide-at\u003e\n    \u003cshow-at breakpoint=\"mediumAndAbove\"\u003e\n      \u003cdesktop-nav\u003e\n    \u003c/show-at\u003e\n  \u003c/nav\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import {showAt, hideAt} from 'vue-breakpoints'\n  export default {\n    components: { hideAt, showAt }\n  }\n\u003c/script\u003e\n```\n\n## Breakpoints\nYou can pass following values as a breakpoint:\n\n- small\n- mediumAndBelow\n- medium\n- mediumAndAbove\n- largeAndBelow\n- large\n\n### Default Breakpoints\n\nDefault breakpoints are\n\n```js\nsmall: 744,\nmedium: 1128,\nlarge: Infinity\n```\n\nbut they can be overwritten if you pass an object to the `breakpoints` prop.\n\n```js\n\u003cshow-at :breakpoints=\"{small: 620, medium: 1280, large: 1600}\" breakpoint=\"medium\"\u003e\n```\n\n## Props\n| prop | default | type | description\n|---|---|---|---|\n| breakpoints | undefined | Object | Important that if you pass the object you only use `small`, `medium` and `large` as the childs.\n| breakpoint | '' | String | Breakpoint where it should show or hide `small`, `mediumAndBelow`, `medium`, `mediumAndAbove`, `largeAndBelow`, `large`\n\n\n\n\n## :scroll: Changelog\nDetails changes for each release are documented in the [CHANGELOG.md](https://github.com/apertureless/vue-breakpoints/blob/master/CHANGELOG.md).\n\n\n## :exclamation: Issues\nPlease make sure to read the [Issue Reporting Checklist](https://github.com/apertureless/vue-breakpoints/blob/master/CONTRIBUTING.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.\n\n\n## :muscle: Contribution\nPlease make sure to read the [Contributing Guide](https://github.com/apertureless/vue-breakpoints/blob/master/CONTRIBUTING.md) and [Code of Conduct](code-of-conduct.md) before making a pull request.\n\n## :copyright: License\n\n[MIT](http://opensource.org/licenses/MIT)\n\n## Support  \n\u003ca href=\"https://www.buymeacoffee.com/xcqjaytbl\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapertureless%2Fvue-breakpoints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapertureless%2Fvue-breakpoints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapertureless%2Fvue-breakpoints/lists"}