Question: Nuxt

[mcombalicer]

Hi,

I'm currently trying to plug this theme into nuxt. I've copied the components, layouts, etc... into the nuxt designated folders and have only changed the directory to make sure that the components are referenced correctly.

However, it is giving me a "Cannot read property 'showSidebar' of undefined" error. Any idea?

Thanks!

[cristijora]

Hi @mcombalicer Thanks for using the product and for the question.
For the sidebar you can try this piece of code.

let app = new Vue({
      data: {
        sidebarStore: SidebarStore
      }
    })
Vue.prototype.$sidebar = app.sidebarStore

Instead of lines 33-45 in SidebarPlugin/index.js and see if this works. The problem is around having a reactive store for the sidebar. Let me know if this approach works and I will change it in the next update because this approach should work both with or without nuxt.

PS: Also you might need to use the notification plugin without SSR or adjust it in the same way as the sidebar

let app = new Vue({
      data: {
        notificationStore: NotificationStore
      },
      methods: {
        notify(notification) {
          this.notificationStore.notify(notification);
        }
      }
    });
    Vue.prototype.$notify = app.notify;
    Vue.prototype.$notifications = app.notificationStore;

These would replace lines 46-67 from NotificationPlugin/index.js

Please let me know if this approach works for you and I will make sure to add these changes to the existing codebase to make the nuxt usage easier.

[mcombalicer]

Hi @cristijora Thank you but it is still throwing the same error.
I found a workaround though. In my dashboard-plugins.js instead of using

export default {
  install(Vue) {
    Vue.use(GlobalComponents);
    Vue.use(GlobalDirectives);
    Vue.use(SideBar);
    Vue.use(Notifications);
    Vue.use(VeeValidate, { fieldsBagName: 'veeFields' });
  }
}

I used the code below and the code you gave for Notifications and it worked.

Vue.use(GlobalComponents);
Vue.use(GlobalDirectives);
Vue.use(SideBar);
Vue.use(Notifications);
Vue.use(VeeValidate, { fieldsBagName: 'veeFields' });

The only difference I noticed is that the sidebar is expanded on load rather than minimised but that is not a big deal. ;)

Thank you for your help