# vue-json5-pretty

> JSON5 pretty of Vue component

Latest version **0.0.1** (published 2018-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-json5-pretty
pnpm add vue-json5-pretty
yarn add vue-json5-pretty
bun add vue-json5-pretty
```

## 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.1 |
| Published | 2018-05-14 |
| First published | 2018-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.9.4 |
| Dependencies | 0 |
| Unpacked size | 12.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ken1987 |
| Keywords | vue, json, json5, pretty |

## Links

- npm: https://www.npmjs.com/package/vue-json5-pretty
- npm.io page: https://npm.io/package/vue-json5-pretty

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.0.1 (latest) — 2018-05-14

## README

# vue-json5-pretty

Json5 pretty of Vue component

## what is json5

[https://json5.org](https://json5.org)

## Usage

```js
import Json5Pretty from 'vue-json5-pretty'

export default {
  component: {
    Json5Pretty
  },
  data() {
    return {
      prefix: 'json5-pretty',
      openDep: 3,
      value: {
        // comments
        unquoted: 'and you can quote me on that',
        singleQuotes: 'I can use "double quotes" here',
        lineBreaks:
          "Look, Mom! \
No \\n's!",
        hexadecimal: 0xdecaf,
        leadingDecimalPoint: 0.8675309,
        andTrailing: 8675309,
        positiveSign: +1,
        trailingComma: 'in objects',
        andIn: ['arrays'],
        backwardsCompatible: 'with JSON'
      }
    }
  }
}
```

```html
<Json5Pretty :value="value" :openDep="openDep" />
```

## Props

* [ label ] => data key.

* [ value ] => json5 data.

* [ expandDepth ] => by default, the depth of this tree will expand. default: 1.

* [ prefix ] => class prefix. default: 'json5-pretty'.

## Costom Style

```js
import Json5Pretty from 'vue-json5-pretty/src/index.vue'
import './path/to/your/style.less'

export default {
  component: {
    Json5Pretty
  }
}
```

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