Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bensladden/vue-responsive-dash
Responsive, Draggable & Resizable Dashboard (Grid) for Vue
https://github.com/bensladden/vue-responsive-dash
dashboard draggable grid-layout resizable responsive vue
Last synced: 3 months ago
JSON representation
Responsive, Draggable & Resizable Dashboard (Grid) for Vue
- Host: GitHub
- URL: https://github.com/bensladden/vue-responsive-dash
- Owner: bensladden
- License: mit
- Archived: true
- Created: 2019-12-20T09:54:52.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T21:51:53.000Z (about 2 years ago)
- Last Synced: 2024-11-22T01:33:28.461Z (3 months ago)
- Topics: dashboard, draggable, grid-layout, resizable, responsive, vue
- Language: Vue
- Homepage: https://vue-responsive-dash.netlify.com
- Size: 12.2 MB
- Stars: 260
- Watchers: 6
- Forks: 43
- Open Issues: 231
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# vue-responsive-dash
A Responsive, Draggable & Resizable Dashboard (grid) made with vue and typescript.
Inspired by React-Grid-Layout & Vue-Grid-Layout
Example: [](https://codesandbox.io/s/vue-responsive-dash-eggbc?fontsize=14&hidenavigation=1&theme=dark)
## ⚙️ Installation
```sh
$ npm install vue-responsive-dash
```
## 📄 Documents
[Link](https://vue-responsive-dash.netlify.com/)
## 🚀 How to use in Vue
```vue
import { Dashboard, DashLayout, DashItem } from "vue-responsive-dash";
export default {
name: "App",
components: {
Dashboard,
DashLayout,
DashItem
},
data() {
return {
dlayouts: [
{
breakpoint: "xl",
numberOfCols: 12,
items: [
{ id: "1", x: 0, y: 0, width: 1, height: 1 },
{ id: "2", x: 1, y: 0, width: 2, height: 1 },
]
},
{
breakpoint: "lg",
breakpointWidth: 1200,
numberOfCols: 10,
items: [
{ id: "1", x: 0, y: 0, width: 1, height: 1 },
{ id: "2", x: 1, y: 0, width: 2, height: 1 },
]
},
{
breakpoint: "md",
breakpointWidth: 996,
numberOfCols: 8,
items: [
{ id: "1", x: 0, y: 0, width: 1, height: 1 },
{ id: "2", x: 1, y: 0, width: 2, height: 1 },
]
},
{
breakpoint: "sm",
breakpointWidth: 768,
numberOfCols: 4,
items: [
{ id: "1", x: 0, y: 0, width: 1, height: 1 },
{ id: "2", x: 1, y: 0, width: 2, height: 1 },
]
},
{
breakpoint: "xs",
breakpointWidth: 480,
numberOfCols: 2,
items: [
{ id: "1", x: 0, y: 0, width: 1, height: 1 },
{ id: "2", x: 1, y: 0, width: 1, height: 1 },
]
},
{
breakpoint: "xxs",
breakpointWidth: 0,
numberOfCols: 1,
items: [
{
id: "1",
x: 0,
y: 0,
width: 1,
height: 1
},
{ id: "2", x: 0, y: 1, width: 1, height: 1 }
]
}
]
};
}
};
.content {
height: 100%;
width: 100%;
border: 2px solid #42b983;
border-radius: 5px;
}
```
### Grid Item Child Component
[](https://codesandbox.io/s/vue-responsive-dash-idttk)
See 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.
See Example/Docs Website for more information.
## ⭐️ Show Your Support
Please give a ⭐️ if this project helped you!
## 👏 Contributing
If 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.
## 🐞 Bug Report
If you find a bug, please report to us opening a new [Issue](https://github.com/bensladden/vue-responsive-dash/issues) on GitHub.
## ⚙️ Development
### `npm run serve`
Runs the app in the development mode.
Open [http://localhost:8080](http://localhost:8080) to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.