A Debug Plugin For Wireframing Components And HTML Elements

Install & Download:

Description:

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'
Vue.use(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'" />

Preview:

Changelog:

09/18/2022

• Update