{"id":15295871,"url":"https://github.com/benmccallum/vue-bootstrap-breakpoint-indicator","last_synced_at":"2025-04-06T05:30:03.990Z","repository":{"id":38273824,"uuid":"103057806","full_name":"benmccallum/vue-bootstrap-breakpoint-indicator","owner":"benmccallum","description":"A Vue.js component that displays a small indicator of the current Bootstrap breakpoint (e.g. XS, SM, MD, LG or XL) in the top-left of the page. ","archived":false,"fork":false,"pushed_at":"2023-03-09T01:01:40.000Z","size":1325,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-22T16:23:31.676Z","etag":null,"topics":["bootstrap","bootstrap4","vue","vue-components","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":null,"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/benmccallum.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-10T20:00:12.000Z","updated_at":"2022-01-14T09:51:51.000Z","dependencies_parsed_at":"2024-09-30T18:08:30.421Z","dependency_job_id":"03e200ab-8092-4678-894a-35ffcc74a4c2","html_url":"https://github.com/benmccallum/vue-bootstrap-breakpoint-indicator","commit_stats":{"total_commits":50,"total_committers":4,"mean_commits":12.5,"dds":"0.31999999999999995","last_synced_commit":"3608fc30b0920f110652aa6b0663f048d89c2f79"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benmccallum%2Fvue-bootstrap-breakpoint-indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benmccallum%2Fvue-bootstrap-breakpoint-indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benmccallum%2Fvue-bootstrap-breakpoint-indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benmccallum%2Fvue-bootstrap-breakpoint-indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benmccallum","download_url":"https://codeload.github.com/benmccallum/vue-bootstrap-breakpoint-indicator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247440240,"owners_count":20939212,"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":["bootstrap","bootstrap4","vue","vue-components","vuejs","vuejs2"],"created_at":"2024-09-30T18:08:28.478Z","updated_at":"2025-04-06T05:30:03.964Z","avatar_url":"https://github.com/benmccallum.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-bootstrap-breakpoint-indicator\n![npm](https://img.shields.io/npm/dt/vue-cli-plugin-bootstrap-breakpoint-indicator)\n\nA Vue.js component that displays a small indicator of the current Bootstrap breakpoint (e.g. XS, SM, MD, LG or XL) in the top-left of the page. Useful during development to know which breakpoint you're styling for as you resize the viewport or device emulate.\n\nNote: the element the component renders is positioned absolutely with some default styles, so it should appear in the top left of the viewport. You can customize this display by adding your own styles against `#vue-bootstrap-breakpoint-indicator`.\n\n## Installation\n\n### Vue CLI \n\n```js\nvue add vue-cli-plugin-bootstrap-breakpoint-indicator\n```\n\n### Vue 2\n\n```js\nyarn add --dev vue-bootstrap-breakpoint-indicator\nnpm install --save-dev vue-bootstrap-breakpoint-indicator\n```\n\n### Browser\n\nSee [example](/examples/demo.html)\n\n### Vue SFC\n\n```vue\n\u003ctemplate\u003e\n  \u003cbreakpoint-indicator\u003e\u003c/breakpoint-indicator\u003e  \n\u003c/template\u003e\n\n\u003cscript\u003e\n  import VueBootstrapBreakpointIndicator from 'vue-bootstrap-breakpoint-indicator';\n  \n  export default {\n    name: 'app',\n    components: {\n      'breakpoint-indicator': VueBootstrapBreakpointIndicator\n    }\n  };\n\u003c/script\u003e\n\n\u003cstyle src=\"vue-bootstrap-breakpoint-indicator/dist/VueBootstrapBreakpointIndicator.css\"\u003e\u003c/style\u003e\n\n\u003cstyle lang=\"scss\"\u003e\n  // Your own styles\n\u003c/style\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenmccallum%2Fvue-bootstrap-breakpoint-indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenmccallum%2Fvue-bootstrap-breakpoint-indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenmccallum%2Fvue-bootstrap-breakpoint-indicator/lists"}