⚗️ vue-state-store-devtools

When using vue-state-store, experimental testing with vue-devtools is supported.

This project does not modify the vue-devtools extension, itself in an experimental attempt, but rather implements a separate library and transmits data to extension.

🌎 Global

The following multilingual documents are provided. (need pull request help)

(한국어 문서 보기)

🍱 Installation

Both Vue and Nuxt support!

🥪 Install in Vue

For those of you who want to see it as a real example using the method of applying vue-state-store, we have prepared an example of how it works in Codepen. [Link]

Install the script through the HTML header below.

<script src="https://unpkg.com/[email protected]/export/devtools.js"></script>

Debugging normally is only possible for stores created after the above script has been injected.

Before rendering the initial component, use the script below.

Vue.config.devtools = true

This might be work with the above method, but if it fails, the following should also be used.

After the initial Vue component is rendered, provide Vue or Vue.constructor to DevTool as shown below, and once again enable 'devtools' option in Vue.

if(typeof window.__VUE_DEVTOOLS_GLOBAL_HOOK__ != 'undefined')
  window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = Vue
Vue.config.devtools = true

🍔 Install in Nuxt

In the case of Nuxt, the project has Vuex embedded. In order to debug 'vue-state-store' through 'vue-devtools' in Nuxt, 'vue-devtools' must be removed first.

🍽 Remove Vuex

In nuxt.config.js, expand the settings of the Webpack in Nuxt to disable Vuex.

export config = {
  build: {
    extend(config) {
      config.externals = {
        vuex: 'vuex'
      }
    }
  }
}

Remove the vuex related module usage codes from nuxt.config.js as shown below.

import webpack from 'webpack'

export config = {
  build: {
    plugins: [
      new webpack.IgnorePlugin(new RegExp('/vuex/')),
    ]
  }
}

Remove unused Vuex and leave minimal Vuex code for Nuxt operation.

config.head.script.push({
  innerHTML: 'window.vuex={Store:function(){return{replaceState:function(){}}}}',
  type: 'text/javascript',
  charset: 'utf-8'
})

If vuex is not removed, vuex is installed in vue-devtools first, debugging information of vue-state-store is not registered properly.

🍝 Install Devtools

Insert the following code into nuxt.config.js to enable 'vue-state-store-devtools'.

if (process.env.NODE_ENV !== 'production') {
  config.head.script.push({
    src: 'https://unpkg.com/[email protected]/export/devtools.js'
  })
}

If devtools is not already enabled, add the option to Nuxt as shown below.

export config = {
  vue: {
    config: {
      devtools: process.env.NODE_ENV !== 'production'
    }
  }
}

📝 License

MIT Licensed.