sebastienbtr / vue-dashboard

A simple, lightweight and responsive layout for your next Vue.js dashboard

Vue Dashboard

A simple, lightweight and responsive layout for your next Vue.js dashboard

Quick start

1- Install

# yarn
yarn add vue-dashboard-vd

# npm
npm install vue-dashboard-vd

2- Import

import Vue from 'vue';
import VueDashboard from 'vue-dashboard-vd';

Vue.use(VueDashboard);

Usage

App.vue

<template>
  <div id="app">
    <VdDashboard
      pageBackground="#f8f8f8"
      sidebarHeaderHeight="175px"
      sidebarWidth="300px"
      headerBackground="white"
      sidebarBackground="white"
    >
      <template v-slot:main-content>
        <router-view />
      </template>
      <template v-slot:header-content>
        <HeaderItems></HeaderItems>
      </template>
      <template v-slot:sidebar-header>
        <SidebarHeader></SidebarHeader>
      </template>
      <template v-slot:sidebar-content>
        <SidebarItems></SidebarItems>
      </template>
    </VdDashboard>
  </div>
</template>

HeaderItems, SidebarHeader and SidebarItems are not provided by the library.

Examples for these components can be found here.
It uses Bulma as a css framework.

Complete examples can be found in examples folder.

Found this project useful? ❤️

If you found this project useful, then please consider giving it a ⭐️ on Github and sharing it with your friends via social media.

Issues and feedback 💭

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.

vue-dashboard's Issues

报错了

Uncaught TypeError: Super expression must either be null or a function
at _inherits (inherits.js:4:11)
at VdHeader.vue:16:30
at Module.fb15 (VdHeader.vue:16:30)
at webpack_require (bootstrap:19:1)
at bootstrap:83:1
at node_modules/vue-dashboard-vd/dist/vue-dashboard-vd.common.js (bootstrap:83:1)
at __require (chunk-CF3WPAMV.js?v=8fe1e737:9:50)
at use-symbol-as-uid.js:6:1

error Expected 'this' to be used by class method 'hello' class-methods-use-this

Pretty sure it is not really an issue, but as a beginner on vue, I have no idea how to bring data on the dashboard using e.g. ESLint. Many of the examples here throw the error mentioned in the topic.

For example adding following lines to the Home.vue file

<template>
 <div>
  <h1 class="title">My patients charchteristics</h1>
  <button v-on:click="hello">Click</button>
 </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({})
export default class Home extends Vue {
  // Declared as component method
   hello() {
    console.log('Hello World!');
  }
}
</script>

Failed to compile.

./src/views/Home.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/X/Documents/vue-super-dash-example/vue2-example/src/views/Home.vue
 15:8  error  Expected 'this' to be used by class method 'hello'  class-methods-use-this

✖ 1 problem (1 error, 0 warnings)

This also:

// See Hooks section for details about `data` hook inside class.
  data() {
     return {
      // `hello` will be reactive as it is declared via `data` hook.
      hello: undefined
    }
  }

I know about https://eslint.org/docs/rules/class-methods-use-this, but how to get data using API for instance?
Can you provide some links or help?

Width for sidebar

Hi Sebastien.
Is there an easy way to set up the sidebar width ?
Thanks !