A Debug Plugin For Wireframing Components And HTML Elements

A Vue debug plugin for wireframing components and HTML elements.

How to use it:

1. Import and register the plugin.

import vdebug from 'vue-vdebug'

2. Add v-debug:wire to your components and elements as follows:

<p v-debug:wire>Default border 1px dotted limegreen</p>
<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>
<p v-debug:bgcolor="'#ff0000'">Red background color</p>
<Component v-debug:wire />
<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'" />
<Component v-debug:bgcolor="'#000ff'" />


A Debug Plugin For Wireframing Components And HTML Elements



  • Update

Download Details:

Author: ASoldo

Live Demo: https://github.com/ASoldo/vue-vdebug

Download Link: https://github.com/ASoldo/vue-vdebug/archive/refs/heads/main.zip

Official Website: https://github.com/ASoldo/vue-vdebug

Install & Download:


Add Comment