# vue-vdebug

> vue vdebug plugin for previewing HTML elements

Latest version **0.0.20** (published 2021-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-vdebug
pnpm add vue-vdebug
yarn add vue-vdebug
bun add vue-vdebug
```

Provides the command `vue-vdebug`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.20 |
| Published | 2021-07-29 |
| First published | 2021-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Andrej Soldo |
| Maintainers | rootster |
| Keywords | vue, vuejs, vdebug, debug |

## Links

- npm: https://www.npmjs.com/package/vue-vdebug
- Repository: https://github.com/ASoldo/vue-vdebug
- Homepage: https://github.com/ASoldo/vue-vdebug#readme
- Issues: https://github.com/ASoldo/vue-vdebug/issues
- npm.io page: https://npm.io/package/vue-vdebug

## Alternatives

- [cli-color](https://npm.io/package/cli-color.md) — 3.4M weekly downloads
- [log](https://npm.io/package/log.md) — 1.3M weekly downloads
- [logstash-client](https://npm.io/package/logstash-client.md) — 4.5K weekly downloads
- [@nocobase/plugin-logger](https://npm.io/package/@nocobase/plugin-logger.md) — 2.0K weekly downloads
- [child-process-debug](https://npm.io/package/child-process-debug.md) — 695 weekly downloads

## Recent versions

- 0.0.20 (latest) — 2021-07-29
- 0.0.19 — 2021-07-29
- 0.0.18 — 2021-07-29
- 0.0.17 — 2021-07-25
- 0.0.16 — 2021-07-25
- 0.0.15 — 2021-07-24
- 0.0.14 — 2021-07-23
- 0.0.13 — 2021-07-23
- 0.0.12 — 2021-07-23
- 0.0.11 — 2021-07-23
- 0.0.10 — 2021-07-23
- 0.0.9 — 2021-07-23
- 0.0.8 — 2021-07-23
- 0.0.7 — 2021-07-23
- 0.0.6 — 2021-07-22
- … 5 more at https://npm.io/package/vue-vdebug/versions

## README

<p align="center">
    <img src="https://i.imgur.com/u4oBt0J.png">
</p>

<p align="center">
    V-Debug
</p>

<p align="center">
    <img src="https://img.shields.io/badge/npm%20i-vue--vdebug-green">
    <img src="https://img.shields.io/npm/l/vue-vdebug">
    <img src="https://img.shields.io/twitter/follow/RootsterAnon?style=social">
</p>

<p align="center">
    <img src="https://i.imgur.com/9mldyfF.png">
</p>

Vue V-Debug plugin for wireframing HTML elements.

# How to use?

In main.js 

```javascript
import vdebug from 'vue-vdebug'
Vue.use(vdebug)
```

# Templates:

```html
<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.

# Contributors are welcome ❤️❤️❤️! 
git -> https://github.com/ASoldo/vsc-vdebug

---
_Source: https://npm.io/package/vue-vdebug · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._