Question: Nuxt

[realrashid]

Hi @timcreative ,

I am try to use the dashboard with Nuxt i have implemented everythings except the SidebarPlugin,NotificationsPlugin.

I got bleow error.

Cannot read property 'showSidebar' of undefined

In terminal i got bleow error.

ERROR [Vue warn]: Property or method "$sidebar" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

[realrashid]

Hey i fix the issue.

The issue is with its plugin.

i just changed the argon-dashboard.js

From

import "@/assets/vendor/nucleo/css/nucleo.css";
import "@/assets/scss/argon.scss";
import globalComponents from "./globalComponents";
import globalDirectives from "./globalDirectives";
import SidebarPlugin from "@/components/SidebarPlugin/index"
import NotificationPlugin from "@/components/NotificationPlugin/index"

export default {
  install(Vue) {
    Vue.use(globalComponents);
    Vue.use(globalDirectives);
    Vue.use(SidebarPlugin);
    Vue.use(NotificationPlugin);
  }
};

To

import Vue from 'vue'
import '@/assets/vendor/nucleo/css/nucleo.css'
import '@/assets/scss/argon.scss'
import globalComponents from './globalComponents'
import globalDirectives from './globalDirectives'
import SidebarPlugin from '@/components/SidebarPlugin/index'
import NotificationPlugin from '@/components/NotificationPlugin/index'

Vue.use(globalComponents)
Vue.use(globalDirectives)
Vue.use(SidebarPlugin)
Vue.use(NotificationPlugin)

After doing this its fixed that error and everythings starts working..

Thank for the great design system.

[vinayakkulkarni]

getting the same error: here's the dashboard-plugin.js

import Vue from 'vue';
import './globalDirectives';
import './globalComponents';
import { extend, configure } from 'vee-validate';
import { rules } from 'vee-validate/dist';
import { messages } from 'vee-validate/dist/locale/en.json';
// Sidebar on the right. Used as a local plugin in DashboardLayout.vue
import SideBar from '~/components/argon-core/SidebarPlugin';
// Notifications plugin. Used on Notifications page
import Notifications from '~/components/argon-core/NotificationPlugin';

Object.keys(rules).forEach((rule) => {
  extend(rule, {
    ...rules[rule], // copies rule configuration
    message: messages[rule], // assign message
  });
});

Vue.use(SideBar);
Vue.use(Notifications);

configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid',
    dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
  },
});