Vuex - Devtools for panel view plugin

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!

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

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.

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.