Vue-devtools: Trouble with Vuex store display online (for the vue-cli template "webpack")

[glomotion]

Version

4.1.3

Browser and OS info

MacOS 10.13.3 - Chrome 63.0.3239.132 - Node 8.6.0 - Webpack 3.6.0 - yarn 1.3.2

Steps to reproduce

So to reproduce this bug:

1- create project: (basic project with vue-router && airbnb eslinting)

$ vue init webpack test-vue-vuex

2- install vuex as a depdency:

$ yarn add vuex

3- make /src/main.js the following:

import Vue from 'vue';
import Vuex from 'vuex';

import App from './App';
import router from './router';

Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    moo: true,
  },

  mutations: {
  },

  getters: {
  },

  actions: {
  },
  strict: process.env.NODE_ENV !== 'production',
});

Vue.config.productionTip = false;
Vue.config.devtools = true;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
});

4- build, then deploy to surge:

$ yarn build; surge dist/

What is expected?

When deployed online, the store appears inside of the devtools inspector, just like when it's run locally.

What is actually happening?

Devtools cannot find / inspect the vuex store (displays: "No Vuex store detected"), despite all store based logic still working correctly.

---

https://github.com/vuejs-templates/webpack/issues/1286

I created an issue on the "Webpack" vue-cli template repo, and a contributer (LinusBorg) suggested this was more likely an issue with devtools, and not the template.

screenshot examples below:

working locally:

not working online:

[LinusBorg]

Hey, would you do the maintainers a favor and create a simple repository where this is already set up to reproduce the problem?

[glomotion]

repo:
https://github.com/glomotion/test-vuex

example of built / deployed instance:
http://orange-ant.surge.sh/

[dobeerman]

same issue here!

Chrome: 64.0.3282.140
Vue.js devtools: 4.1.3
Detected Vue v2.5.13

[wtm17]

Same issue!

Note if you change the vue-cli production build config in /config/prod.env.js to use "development" as the NODE_ENV variable, then the Vuex store shows up in devtools. Obviously not the ideal solution, though.

https://github.com/glomotion/test-vuex/blob/master/config/prod.env.js

[DCzajkowski]

Same here, but not using surge. Simple building of the official webpack template makes Vuex not visible to DevTools

[wangxiangyao]

Same issue!

the env:
chrome: 65.0.3325.162
vue-cli: 3.0 beta
vue-devtools: 4.1.4

My computer was reloaded yesterday.This problem occurs after the new vue-devtool is installed.

when i use vue-devtool version:3.1.5, There is no problem

[Akryum]

@glomotion Write Vue.config.devtools = true before creating the store (the check is done in the store constructor here).

[glomotion]

Thank you @akryum! That did the trick.

[LinusBorg]

@Akryum the original report was that this flag didn't work.

[Akryum]

Well it works if used before creating the store. 😉
Maybe a note could be added in the docs?

[LinusBorg]

Oh, now I got it, thanks.