A simple, lightweight and responsive layout for your next Vue.js dashboard
# yarn
yarn add vue-dashboard-vd
# npm
npm install vue-dashboard-vd
import Vue from 'vue';
import VueDashboard from 'vue-dashboard-vd';
import 'vue-dashboard-vd/dist/vue-dashboard-vd.css';
Vue.use(VueDashboard);
App.vue
<template>
<div id="app">
<vd-dashboard
content="router-view"
sidebarHeaderHeight="150px"
headerItems="header-items"
sidebarHeader="sidebar-header"
sidebarItems="sidebar-items"
></vd-dashboard>
</div>
</template>
header-items
, sidebar-header
and sidebar-items
must be globally available components:
main.ts
import HeaderItems from './components/HeaderItems.vue';
import SidebarHeader from './components/SidebarHeader.vue';
import SidebarItems from './components/SidebarItems.vue';
Vue.component('header-items', HeaderItems);
Vue.component('sidebar-items', SidebarItems);
Vue.component('sidebar-header', SidebarHeader);
Examples for these components can be found here.
It uses Bulma as a css framework.
If you found this project useful, then please consider giving it a on Github and sharing it with your friends via social media.
If you have any suggestion for including a feature or if something doesn’t work, feel free to open a Github issue for us to have a discussion on it.
Author: SebastienBtr
Live Demo: https://github.com/SebastienBtr/vue-dashboard
GitHub: https://github.com/SebastienBtr/vue-dashboard
#vuejs #javascript #vue #vue-js