{"id":22490530,"url":"https://github.com/bensladden/vue-responsive-dash","last_synced_at":"2025-08-02T22:33:14.594Z","repository":{"id":38200172,"uuid":"229237804","full_name":"bensladden/vue-responsive-dash","owner":"bensladden","description":"Responsive, Draggable \u0026 Resizable Dashboard (Grid) for Vue","archived":true,"fork":false,"pushed_at":"2023-01-01T21:51:53.000Z","size":12745,"stargazers_count":260,"open_issues_count":231,"forks_count":43,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-22T01:33:28.461Z","etag":null,"topics":["dashboard","draggable","grid-layout","resizable","responsive","vue"],"latest_commit_sha":null,"homepage":"https://vue-responsive-dash.netlify.com","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/bensladden.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}},"created_at":"2019-12-20T09:54:52.000Z","updated_at":"2024-10-14T00:25:18.000Z","dependencies_parsed_at":"2023-02-01T01:00:31.861Z","dependency_job_id":null,"html_url":"https://github.com/bensladden/vue-responsive-dash","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bensladden%2Fvue-responsive-dash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bensladden%2Fvue-responsive-dash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bensladden%2Fvue-responsive-dash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bensladden%2Fvue-responsive-dash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bensladden","download_url":"https://codeload.github.com/bensladden/vue-responsive-dash/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228501305,"owners_count":17930229,"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":["dashboard","draggable","grid-layout","resizable","responsive","vue"],"created_at":"2024-12-06T17:22:18.766Z","updated_at":"2024-12-06T17:25:16.746Z","avatar_url":"https://github.com/bensladden.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","Vue","UI Layout [🔝](#readme)"],"sub_categories":["UI Layout"],"readme":"# vue-responsive-dash\n\nA Responsive, Draggable \u0026 Resizable Dashboard (grid) made with vue and typescript. \nInspired by React-Grid-Layout \u0026 Vue-Grid-Layout\n\n\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"netlify\" src=\"https://img.shields.io/netlify/0d5865ba-90df-4e35-826f-296d6fc6b106\"\u003e\n    \u003cimg alt=\"deps\" src =\"https://img.shields.io/david/bensladden/vue-responsive-dash\"\u003e\n    \u003cimg alt=\"code-size\" src =\"https://img.shields.io/github/languages/code-size/bensladden/vue-responsive-dash\"\u003e\n    \u003cimg alt=\"repo-size\" src=\"https://img.shields.io/github/repo-size/bensladden/vue-responsive-dash\"\u003e\n    \u003cimg alt=\"open-issues\" src=\"https://img.shields.io/github/issues-raw/bensladden/vue-responsive-dash\"\u003e\n    \u003cimg alt=\"pull-req\" src=\"https://img.shields.io/github/issues-pr/bensladden/vue-responsive-dash\"\u003e\n    \u003cimg alt=\"lic\" src=\"https://img.shields.io/github/license/bensladden/vue-responsive-dash\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/vue-responsive-dash\"\u003e\n\u003c/p\u003e\n\n\nExample: [![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-responsive-dash-eggbc?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## ⚙️ Installation\n```sh\n$ npm install vue-responsive-dash\n```\n## 📄 Documents\n[Link](https://vue-responsive-dash.netlify.com/)\n\n## 🚀 How to use in Vue\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdashboard :id=\"'dashExample'\"\u003e\n      \u003cdash-layout v-for=\"layout in dlayouts\" v-bind=\"layout\" :debug=\"true\" :key=\"layout.breakpoint\"\u003e\n        \u003cdash-item v-for=\"item in layout.items\" v-bind.sync=\"item\" :key=\"item.id\"\u003e\n          \u003cdiv class=\"content\"\u003e\u003c/div\u003e\n        \u003c/dash-item\u003e\n      \u003c/dash-layout\u003e\n    \u003c/dashboard\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { Dashboard, DashLayout, DashItem } from \"vue-responsive-dash\";\n\nexport default {\n  name: \"App\",\n  components: {\n    Dashboard,\n    DashLayout,\n    DashItem\n  },\n  data() {\n    return {\n      dlayouts: [\n        {\n          breakpoint: \"xl\",\n          numberOfCols: 12,\n          items: [\n            { id: \"1\", x: 0, y: 0, width: 1, height: 1 },\n            { id: \"2\", x: 1, y: 0, width: 2, height: 1 },\n          ]\n        },\n        {\n          breakpoint: \"lg\",\n          breakpointWidth: 1200,\n          numberOfCols: 10,\n          items: [\n            { id: \"1\", x: 0, y: 0, width: 1, height: 1 },\n            { id: \"2\", x: 1, y: 0, width: 2, height: 1 },\n          ]\n        },\n        {\n          breakpoint: \"md\",\n          breakpointWidth: 996,\n          numberOfCols: 8,\n          items: [\n            { id: \"1\", x: 0, y: 0, width: 1, height: 1 },\n            { id: \"2\", x: 1, y: 0, width: 2, height: 1 },\n          ]\n        },\n        {\n          breakpoint: \"sm\",\n          breakpointWidth: 768,\n          numberOfCols: 4,\n          items: [\n            { id: \"1\", x: 0, y: 0, width: 1, height: 1 },\n            { id: \"2\", x: 1, y: 0, width: 2, height: 1 },\n          ]\n        },\n        {\n          breakpoint: \"xs\",\n          breakpointWidth: 480,\n          numberOfCols: 2,\n          items: [\n            { id: \"1\", x: 0, y: 0, width: 1, height: 1 },\n            { id: \"2\", x: 1, y: 0, width: 1, height: 1 },\n          ]\n        },\n        {\n          breakpoint: \"xxs\",\n          breakpointWidth: 0,\n          numberOfCols: 1,\n          items: [\n            {\n              id: \"1\",\n              x: 0,\n              y: 0,\n              width: 1,\n              height: 1\n            },\n            { id: \"2\", x: 0, y: 1, width: 1, height: 1 }\n          ]\n        }\n      ]\n    };\n  }\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.content {\n  height: 100%;\n  width: 100%;\n  border: 2px solid #42b983;\n  border-radius: 5px;\n}\n\u003c/style\u003e\n\n\n```\n\n### Grid Item Child Component\n\n[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-responsive-dash-idttk)\n\nSee example above. The Grid Item object can be passed to the child component via props or injection. Typically the child component will look at the grid Item ID (which is unique) and decide what to render via a data/computed variable/s or VUEX. \n\nSee Example/Docs Website for more information.\n\n## ⭐️ Show Your Support\nPlease give a ⭐️ if this project helped you!\n\n\n## 👏 Contributing\n\nIf you have any questions or requests or want to contribute to `vue-responsive-dash` or other packages, please write the [issue](https://github.com/bensladden/vue-responsive-dash/issues) or give me a Pull Request freely.\n\n## 🐞 Bug Report\n\nIf you find a bug, please report to us opening a new [Issue](https://github.com/bensladden/vue-responsive-dash/issues) on GitHub.\n\n## ⚙️ Development\n### `npm run serve`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:8080](http://localhost:8080) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr\u003e\nYou will also see any lint errors in the console.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbensladden%2Fvue-responsive-dash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbensladden%2Fvue-responsive-dash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbensladden%2Fvue-responsive-dash/lists"}