Vue plugin for seeing changes in the Vue component tree while developing
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
index.js
package.json

README.md

VueViz

Vue 2 plugin that tracks the structure of your Vue component tree and color codes changes made to it.

To be used while developing your Vue app. Very light, no dependencies. Just install and go.

Installation


npm

npm install --save vueviz

Usage


<script>
import vue from 'vue';
import App from './App'

// Import plugin
import VueViz from 'vueviz';

// Use plugin
Vue.use(VueViz);

new Vue({
  name: 'My App',
  el: '#app',
  template: '<App/>',
  components: { App }
})
</script>

Left-top side of your screen gets few control buttons that allow you to control rendering of the component tree. By default control panel is minified; click "Viz" button to open it.

Color codes


Grey/black: component is old (has been a part of the component tree for more than few seconds) and has not been refreshed lately.

Green: component is new (just inserted into component tree).

Blue: component is old, but was refreshed a moment ago.

Example


to be inserted here

Contributions


All contributions and ideas of further development are welcome.