Sidebar is buggy when window width is between 766px and 990px

Hi i try to customize the menus from this amazing template,
but for some reason I couldn't load any icons and my customized logo img (in static folder).
I just fixed few lines of 'routes.js' and 'src/components/UIComponents/SidebarPlugin/index.js'.
could you help me to figure out the logic to load icons and give a hint to fix my messed up code?

// routes.js

import NotFound from '../components/GeneralViews/NotFoundPage.vue'
import DetailedView from 'src/components/Dashboard/Views/DetailedView'
import Dashboard from 'src/components/Dashboard/Views/Dashboard'
import Icons from 'src/components/Dashboard/Views/Icons'

const routes = [
  {
    path: '/',
    component: DashboardLayout,
    redirect: '/admin/detail'
  },
  {
    path: '/admin',
    component: DashboardLayout,
    redirect: '/admin/detail',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: Dashboard
      },
      {
        path: 'detail',
        name: 'Detailed View',
        component: DetailedView
      },
      {
        path: 'icons',
        name: 'icons',
        component: Icons
      }
    ]
  },
  { path: '*', component: NotFound }
]

export default routes

// index.js

import Sidebar from './SideBar.vue'

const SidebarStore = {
  showSidebar: false,
  sidebarLinks: [
    {
      name: 'Dashboard',
      icon: 'ti-panel',
      path: '/admin/dashboard'
    },
    {
      name: 'Detailed View',
      icon: 'ti-user',
      path: '/admin/detail'
    },
    {
      name: 'Icons',
      icon: 'ti-pencil-alt2',
      path: '/admin/icons'
    }
  ],
  displaySidebar (value) {
    this.showSidebar = value
  }
}
const SidebarPlugin = {
  install (Vue) {
    Vue.mixin({
      data () {
        return {
          sidebarStore: SidebarStore
        }
      }
    })

    Object.defineProperty(Vue.prototype, '$sidebar', {
      get () {
        return this.$root.sidebarStore
      }
    })
    Vue.component('side-bar', Sidebar)
  }
}

export default SidebarPlugin

We'd like to include latest bootstrap in our project, and have paper loaded AFTER it, so that it simply overwrites some styles, instead of doing everything from scratch.

What we tried: in App.vue

<style lang="scss">
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-vue/src/index.scss";
</style>

However, since Paper is loaded in main.js

import PaperDashboard from "./plugins/paperDashboard"
Vue.use(PaperDashboard)

bootstrap will overwrite Paper.

How can we do it the other way?

This looks like a best practice seen on other apps:
App.vue

<style lang="scss">
@import "~bootstrap/scss/bootstrap"; 
@import "~bootstrap-vue/src/index";
@import "assets/scss/paper-dashboard";
@import "assets/scss/style"; //custom overwrites of various styles
</style>

Hello,
I've been trying vue-paper-dashboard and it looks really neat.
However, trying to set up a header navbar on my site.

I was trying the following:

<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">
            <div class="container-fluid">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <router-link to="/" :exact="true"><img src="/images/menu_sm.png" alt="Logo" />BlaBla</router-link>
                </div>

                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <router-link to="/about">About</router-link>
                        </li>   
                        <li>
                            <router-link to="/data/dashboard">Dashboard</router-link>
                        </li>
                    </ul>


                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a>Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

But the menu items never showed up until I commented the lines 68-70 in th responsive.scss file:

body .navbar-collapse.collapse {
    display: none !important;
  }

Is it a normal that it specifies that the menu items in collapse should be hidden?

On a smaller screen, the 'hamburger' icon appears correctly but no menu items are shown when clicking on the icon. It seems to be related to the lines 122-124 of the responsive.scss that I had to comment:

  .navbar .navbar-right-menu,
  .navbar .navbar-collapse.collapse,
  .navbar .navbar-collapse.collapse.in,
  .navbar .navbar-collapse.collapsing {
    display: none !important;
  }

Thank you for your help.

Sylvain

Hello,
First off, thank you for writing this incredible app! It is well written and gives me a great understanding of how to write complex apps. I am new to Vue and doing my best to understand how all these fancy concepts work.I wrote a question on an old commit and wonder if you'd be willing to share some insight.

Also, I noticed you removed vuex but I couldn't find the commit which you did that. Was there any specific reason or just found it to be unnecessary?

Thanks again!

Hello!

First of all, congratulations for this awesome template!

The only thing I miss is the collapsible sidebar, I think it would be perfect to be able to do it, showing only the icons.

What do you think?

When the sidebar is collapsed (mobile view) in Firefox (61.0.2 Windows 10) the menu just overflows to the right rather than going into hiding

Notice the scrollbars:

tbody and thead has padding-right: 15px, but no tfoot

Attached. To replicate, resize Chrome window.

Does premium theme supports RTL ?

The notification plugin component has a default value for verticalAlign and horizontalAlign. But when calling the notification with

this.$notifications.notify(
    {
      message: 'Message'
    }
)

the notification does not appear. This is due to the sameAlertsCount calculations in Notification.vue where the same alerts are calculated using verticalAlign and horizontalAlign.

Since the notification component has default for these, it would be nice to be able to notify only using the message part especially when it is used a lot in different components.

What I did to fix it was inserting these two lines in NotificationPlugin/index.js

notify (notification) {
  notification.verticalAlign = notification.verticalAlign || 'top'
  notification.horizontalAlign = notification.horizontalAlign || 'center'
  this.state.push(notification)
}

I don't know if there's a better way to fix this. Just wanted to mention it in case someone else needs to use it.

Hello,
Just need some clarifications of why you are using different syntaxes for importing components from element-ui.

For example, for the forms, you are using:

 import {DatePicker, TimeSelect, Slider, Tag, Input, Button, Select, Option} from 'element-ui'
export default {
    components: {
      [DatePicker.name]: DatePicker,
      [TimeSelect.name]: TimeSelect,
      [Slider.name]: Slider,
      [Tag.name]: Tag,
      [Input.name]: Input,
      [Button.name]: Button,
      [Option.name]: Option,
      [Select.name]: Select
    }}

While for the panels, you are using:

import Vue from 'vue'
import {Collapse, CollapseItem} from 'element-ui'

 Vue.use(Collapse)
 Vue.use(CollapseItem)
 export default {
   ...
  }

Is there a good reason for that? Is ist necessary to declare a Import Vue in the second case?

thank you for your help

Sylvain

Please remove

.$mount("#app");

from here

as it's not needed. It also gives a warning in console, #app not found.

Also,

render: h => h(App)

isn't needed either.

The current behavior works great with the default number of links. However, when the number of links changes, the arrow is off.

Currently, the arrow is instantiated like this:

<moving-arrow :move-y="arrowMovePx">

arrowMovePx () {
				return this.linkHeight * this.activeLinkIndex;
			}

Link Height is hardcoded, and the index changes based on the selected link.

Right now, I can't get this set up so that the arrow points at the link throughout its range of motion. If I try adjusting link height, I can get alignment either at the beginning, the end or the middle of the index, but not throughout. Is there an easy way to adjust this?

Hi @cristijora, first thanks for this contribution, I have an issue about handling static files, I changed the html entry point to /views/index.ejs file and I'm using vue-paper-dashboard with expressjs. I got stuck when I generate the index.ejs since I changed from index.html, this is the file:

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8>
  <link rel=apple-touch-icon sizes=76x76 href=assets/img/apple-icon.png> <!-- HERE -->
  <link rel=icon type=image/png sizes=96x96 href=static/img/favicon.png> <!-- HERE -->
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <title>Express Vue Paper Dashboard</title>
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
  <link type=text/css href="https://fonts.googleapis.com/css?family=Muli:400,300" rel=stylesheet>
  <link type=text/css href="https://fonts.googleapis.com/css?family=Montserrat" rel=stylesheet>
  <link href=static/css/themify-icons.css rel=stylesheet> <!-- HERE -->
  <link href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet>
  <link href=public-dashboard/css/app.a0ce48eedd81206b4d119d80c9e4cf81.css rel=stylesheet>
</head>

<body>
  <div class=wrapper id=app></div>
  <script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAamVCoyQ4AuvBpxVRMs9P-HFkfPVQj0Kw"
    type=text/javascript></script>
  <script type=text/javascript src=public-dashboard/js/manifest.4c40b5d6fa68ad9d5108.js></script>
  <script type=text/javascript src=public-dashboard/js/vendor.817190a87c3939682014.js></script>
  <script type=text/javascript src=public-dashboard/js/app.2e7d941cab7ce8abec84.js></script>
</body>

</html>

But I can't change the <link rel=apple-touch-icon sizes=76x76 href=assets/img/apple-icon.png>, <link rel=icon type=image/png sizes=96x96 href=static/img/favicon.png> and <link href=static/css/themify-icons.css rel=stylesheet>, I already configured to point to a new public folder called public-dashboard inside the root folder but when I generate a new build it resets to static and assets directory. If I change it manually it works like a charm but I don't know why it still using static and assets folder. Any help would be very nice, thanks in advance.

• EDIT: This is my config/index.js file:

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../views/index.ejs'),
    assetsRoot: path.resolve(__dirname, '../public-dashboard'),
    assetsSubDirectory: '',
    assetsPublicPath: process.env.HOST ? process.env.HOST : 'public-dashboard/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      'api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      },
    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

Hello,

I am trying to add a checkbox to each item row in the table and hook its state into the component's state.

Is there any documentation available on how to do this?

Moving Arrow should get sidebar header size and .nav-item size automatically, as sizes can be different depending on page zoom and font size settings.
Using these values, position it in middle of link.

Hey,

I am already in the middle of one of our projects using Vue + Laravel.

I was interested in Integrating the pro paper dashboard version so that I can re-use it's components instead of working around the template. We have an app with alot of features and re-implementing those seems like an overkill.

I am using the current code to just render a simple Sidebar and a TopBar
Template:
`

  <top-navbar></top-navbar>

</div>

   //note I put the components in a dahsBoardLayout directory
   import Sidebar from './../dashboardLayout/UIComponents/SidebarPlugin/index'

   Vue.use(Sidebar)

   import TopNavbar from './../dashboardLayout/Dashboard/Layout/TopNavbar.vue'

    export default{
	components : {
		TopNavbar
	},
	data(){
	    return {
	      links: [{
                     name : Link1
                     isRoute : false
                  }]
	}
}

Hello,

i am using the https://github.com/njleonzhang/vue-data-tables plugin to display data from the server. It's pretty neat and uses Element-Ui as well.

However, i really like your look and feel for the pagination (Paginated tables example) and would like to apply it to my datatables. Would you have some directions to do so as it uses el-pagination and you seem to appreciate Element-UI as I do?

Thank you for your help

S.

The z-index=1 in .card class makes my datepicker appears bellow the card.

When I turned off the z-index=1, it works as I want.

Is there will be case when z-index=1 needed?

Hi, thanks for a great implementation of the dashboard.

I want to make use of the vue2-datatable in the dashboard (https://github.com/OneWayTech/vue2-datatable), so I've installed it via npm, and imported it in main.js. However, I cannot get it to work within the dashboard because babel does not transpile the module. Please mark that the datatable component uses object spread operator (...). To enable transpiling of this operator, I've installed and added the plugin @babel/plugin-proposal-object-rest-spread to .babelrc config file. However, I still get an error during compilation where it is complaining that this plugin is missing. I'm suspecting that this is because babel does not transpile files in node_modules.

Is there anything special I need to configure to get babel to also transpile the datatabel dependency in node_modules?

P.S. I've tried adding transpileDependencies option to vue.config.js, but it doesn't seem to help:

Information about transpileDependencies: https://www.npmjs.com/package/@vue/cli-plugin-babel:

By default, babel-loader excludes files inside node_modules dependencies. If you wish to explicitly transpile a dependency module, you will need to add it to the transpileDependencies option in vue.config.js

When I open the documentation site, I only see a white page. Nothing in it. I'm new to this theme so I was trying to read the docs so I can install it properly. Thanks.

Hi, I have been trying to include Chartist plugins, but for some reason they only work some of the time. Quite randomly, they simply fail to load the chart. Any tips? Here is the relevant part of my template code:

<chart-card :chart-data="piedata" :chart-options="chartOptions" chart-type="Pie">
          <h4 class="title" slot="title">By Issue</h4>
          <span slot="subTitle"> Last campaign performance</span>
          <span slot="footer">
            <i class="ti-timer"></i> Campaign set 2 days ago</span>
          <div slot="legend">
          </div>
        </chart-card>

And here is the relevant part of my script code

  import 'chartist-plugin-legend'
  export default {
    data () {
      return {
        chartOptions: {
          showLabel: false,
          plugins: [
            this.$Chartist.plugins.legend({
              position: 'bottom'
            })
          ]
        },

And the strangest part is that the page loads with no console errors, even when the chart does not show up and the div that holds it is empty. (To be more precise, the div is created but the svg and ul beneath it are empty).

Thanks!

Hi Cristi,

Think you have missed to setup the cursor to pointer when hovering the Notifications dropdown in the navbar

Currently bootstrap-v4 light color .btn-light is being overrided by vue-paper-dashboard .btn class, and becomes dark gray.

I've got an existing Vue project and would like to add Vue Paper Dashboard inside it. Is there any documentation available on how to do this?

Hello,

Is it possible to have a new line in table cells, so that one of those solutions would work:

        tableColumns: [
          {
            prop: 'my_prop',
            label: 'My Prop',
            minWidth: 150
          }...]

tableData = [{
    my_prop: "First line \n <br/> Second line" // No new line
}]

I'm following this example.

Thank you

Hi,

Thanks for the awesome theme. I am using it for a project and I noticed the following issue

1. The column name at all times should match the json key name, this limits the users to wish to use space-separated column names.

Here is how the columns of a table are defined

const tableDefinition = ["Id", "Name", "Salary", "Country", "City"];

and the value mapping

const tableData = [
  {
    id: 1,
    name: "Dakota Rice",
    salary: "$36.738",
    country: "Niger",
    city: "Oud-Turnhout"
  }
];

and they are mapped using hasValue and itemValue. A column name such as Full name would not match name or fullName in json object and the methods look for Full name.

In order to get around the column name and column value mapping, I transformed the tableColumns into an array of objects as follow

const tableDefinition =
  [
    {name: 'Id', field: 'id'},
    {name: 'Full name', field: 'name'},
    {name: 'Salary (CAD)', field: 'salary'},
    {name: 'Country', field: 'country'},
    {name: 'City',  field: 'city'}
  ]

With the above, the user will have the flexibility to no worry about keeping the column title same as json object

If you think this is an improvement I would be happy to turn my changes into a PR 👍

It looks like there is some issue caused by sass when running the unit tests.

$ npm install
npm ERR! cb() never called!

How can I fix it?

Hi,

Repo and documentation for PRO version trigger a 404 (https://cristijora.github.io/paper-dashboard-pro/documentation.html?selectedKind=Welcome&selectedStory=to%20Vue%20Paper%20Dashboard%20PRO&full=0&down=1&left=1&panelRight=1&downPanel=tuchk4%2Freadme%2Fpanel )

Btw, I don't get why it's not included directly inside the source...
Please put back the documentation as soon as possible !

Thanks

npm install
npm run dev

Output:

Module build failed: Error: No ESLint configuration found.
at getLocalConfig (/Users/yuriiluchkiv/Development/workspace-globalfreight/globalfreight-creative-tim-vue-paper-dashboard/node_modules/eslint/lib/config.js:162:35)
at Config.getConfig (/Users/yuriiluchkiv/Development/workspace-globalfreight/globalfreight-creative-tim-vue-paper-dashboard/node_modules/eslint/lib/config.js:260:26)
at processText (/Users/yuriiluchkiv/Development/workspace-globalfreight/globalfreight-creative-tim-vue-paper-dashboard/node_modules/eslint/lib/cli-engine.js:224:33)
at CLIEngine.executeOnText (/Users/yuriiluchkiv/Development/workspace-globalfreight/globalfreight-creative-tim-vue-paper-dashboard/node_modules/eslint/lib/cli-engine.js:754:26)
at lint (/Users/yuriiluchkiv/Development/workspace-globalfreight/globalfreight-creative-tim-vue-paper-dashboard/node_modules/eslint-loader/index.js:218:17)
at Object.module.exports (/Users/yuriiluchkiv/Development/workspace-globalfreight/globalfreight-creative-tim-vue-paper-dashboard/node_modules/eslint-loader/index.js:213:21)

Added:
.eslintrc.js

// http://eslint.org/docs/user-guide/configuring

module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}

AND

"babel-eslint": "^7.1.1" in package.json in "devDependencies" section.

Can you verify? Thanks

Please add a license to your project.
Thank you.

Do you have the PRO version of paper-dashboard for Vue? Tks

Can not move arrow when the sidebar link change.

Solution

change ~/src/components/SidebarPlugin/SideBarLink.vue

isActive() {
    return this.$el.classList.contains("active");
}

to

isActive() {
    return this.$el.classList.contains("router-link-active");
}

Now,it works fine. 😄

Bootstrap's is-valid and is-invalid class for form-control is being overrided.

If not using Vue-Paper's border-input class, the border is being set to none, which makes the is-valid and is-invalid border color not showing.
If using Vue-Paper's border-input class, the is-valid and is-invalid color is being overrided by border: 1px solid #CCC5B9;

This code does not change the fade out timeout :

      this.$notify({
        message: msg,
        icon: "save",
        horizontalAlign: "center",
        verticalAlign: "top",
        type: "warning",
        timeout: 5000
      });

But changing it in Notification.vue does :

    timeout: {
      type: Number,
      default: 5000
    }

Firstly, great little app.

Using your demo app, when I scroll the page content, then select another menu option, the page content loads, but if it will keep its scroll position.

EG:
I select the typography menu item, I then scroll down to view the page content.
I then select the icons menu item, when the page loads, it is positioned half way down the icons page.

Might need to add a page top functionality on load of page, so on switching menu/pages the user is presented with the top of that page each time?

Used on:

Macbook Pro (macOS Sierra)
Chrome v58.0.3

https://getbootstrap.com/docs/4.1/migration/#input-groups

It is now become .input-group-prepend, .input-group-append, and .input-group-text

Hello dears

I have an issue with navbar, when menu are toggled, no sidebar is shown. only shown when including demo js "paper-dashboard.js" and when manually resize my browse screens.

for mobile pages, it doesn't show.

Product used: Paper Dashboard Pro.

Could you help me, please. Thanks a lot.

I add a modal Bootstrap and import bootstrap.min but the modal is show but is not usable :(

Hi,

I have no issue when npm run dev, but when npm run build I got problem.

ERROR in static/js/app.4ce960db8a59a3e50003.js from UglifyJs
Unexpected token: punc ()) [.//vue-loader/lib/template-compiler.js?id=data-v-d4e56386!.//vue-loader/lib/selector.js?type=template&index=0!./src/components/UIComponents/Inputs/formGroupInput.vue:17,3][static/js/app.4ce960db8a59a3e50003.js:5005,34]

FYI: Some script I use es6

On mobile, the menu icon & sidebar are on the right.
On tablet/desktop, sidebar is on the left.

Please consider making them consistent, both on left.
(as part of Bootstrap 4 upgrade?)

Thanks Cristi!

The README states that the dashboard uses Vuex, but it does not seem to be using it.

git clone https://github.com/cristijora/vue-paper-dashboard.git
npm install
npm run dev

`
ERROR Failed to compile with 1 errors 19:44:16

error in ./src/components/UIComponents/Inputs/formGroupInput.vue

✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses
src/components/UIComponents/Inputs/formGroupInput.vue:21:18
updateValue(value) {
^

✘ http://eslint.org/docs/rules/semi Extra semicolon
src/components/UIComponents/Inputs/formGroupInput.vue:22:43
this.$emit('input', String(value));
^

✘ http://eslint.org/docs/rules/indent Expected indentation of 2 spaces but found 0
src/components/UIComponents/Inputs/formGroupInput.vue:24:3
}
^

✘ 3 problems (3 errors, 0 warnings)

Errors:
1 http://eslint.org/docs/rules/indent
1 http://eslint.org/docs/rules/semi
1 http://eslint.org/docs/rules/space-before-function-paren
`

The problem is solved, correcting the "updateValue" method of the specified file (formGroupInput.vue)

We alos need sidebar with submenu items.