V-Debug
Vue V-Debug plugin for wireframing HTML elements.
How to use?
In main.js
import vdebug from 'vue-vdebug'
Vue.use(vdebug)Templates:
<p v-debug:wire>Default border 1px dotted limegreen</p>
<!-- Configuration options for wireframe -->
<p v-debug:wire v-debug:color="'red'">Red border color</p> ,
<p v-debug:wire v-debug:style="'dotted'">Dotted Border</p> ,
<p v-debug:wire v-debug:size="'1px 1px'">Size 1px 1px</p>
<!-- -->
<!-- Set background color -->
<p v-debug:bgcolor="'#0000ff'">Blue background color</p>
<!-- -->
<Component v-debug:wire />
<!-- Configuration options for wireframe -->
<Component v-debug:wire v-debug:color="'red'" />
<Component v-debug:wire v-debug:style="'dotted'" />
<Component v-debug:wire v-debug:size="'1px 1px'" />
<!-- -->
<!-- Set background color -->
<Component v-debug:bgcolor="'#000ff'" />
<!-- -->Anywhere in your templates you can put v-debug:wire and preview wireframed element for debuging purposes. Add color, style, size to wireframe for desired effects and needs. Set background color for element alone or combine it with wireframe.
Use case:
- Wireframing
- Responsivness preview
- Grid/layout preview
Visual Studio Code Extension
You can downlaod 'vsc-vdebug' from Extensions Tab and quickly remove all v-debug directives. Just press 'CTRL/CMD' + P and type '>VSC VDebug Clean' or '>VDebug Clean' or '>Clean'
Notice:
VSC-VDebug will clean your code by following 'Left Side' rule. It's the best practice to group your v-debug directives at the end of the tag.