Vuex - Devtools for panel view plugin

Kirby 3 Questions 🤔
1

Hi All,

Maybe I’m missing something but I keep getting Vuex is not detected in the panel when using Vue dev tools.

I have successfully created a namespaced vuex store which is working fine, i can dispatch data to the store and retrieve it in the panel, i just cant get the vuex dev tools to pick up any vuex stores.

I’ve registered my store like so:

panel.plugin('mypluginname/mypluginvalue', {

  created: function(app) {

    app.$store.registerModule('mypluginvalue', {
      namespaced: true,
      state: {
       // my state here
      },
      getters: {
       // my getters here
      },
      mutations: {
       // my mutations here
      },
      actions: {
       // my actions here
      },
    });
  }
});

I’ve tried the usual stuff like making sure dev tools is enabled, pretty much the only thing ive not tried that i can think of is importing vuex itself rather than relying on the panel exposing this.

Can anyone clear this up?

Thanks in advance!

2

A very late reaction, but just in case somebody, like me, ended up here:

This worked for me:

panel.plugin("namespace/plugin", {
  use: {
    plugin(Vue) {
      window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue;
    },
  },
};

Read all about it:

1 Like
3

Hi @coko,

I actually seen this a few days ago and have been using it too. Works fine :smiley:

I completely forgot I created this post but thanks for updating it, hopefully it helps some others.

4

Just updated the code snippet in the github issue.

It’s required to check for the window.__VUE_DEVTOOLS_GLOBAL_HOOK__ before assigning the panel Vue instance. If the VueDevtools browser plugin is not installed with the browser using the panel, the panel will break.

2 Likes