# vue-json-pretty-fast

> A Vue.js 2.0 Toolkit for JSON

Latest version **0.0.4** (published 2018-07-27) · GPLv3 license · 0 weekly downloads

## Install

```sh
npm install vue-json-pretty-fast
pnpm add vue-json-pretty-fast
yarn add vue-json-pretty-fast
bun add vue-json-pretty-fast
```

## 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.4 |
| Published | 2018-07-27 |
| First published | 2018-06-21 |
| Weekly downloads | 0 |
| License | GPLv3 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 1 |
| Unpacked size | 432.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | joe |
| Maintainers | josepht404 |
| Keywords | vue, json, format, pretty, vue-component |

## Links

- npm: https://www.npmjs.com/package/vue-json-pretty-fast
- Repository: https://github.com/shade/vue-json-pretty-fast
- Homepage: https://github.com/shade/vue-json-pretty-fast#readme
- Issues: https://github.com/shade/vue-json-pretty-fast/issues
- npm.io page: https://npm.io/package/vue-json-pretty-fast

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.3.0

## 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.4 (latest) — 2018-07-27
- 0.0.3 — 2018-06-21
- 0.0.2 — 2018-06-21
- 0.0.1 — 2018-06-21

## README

# vue-json-pretty-fast

[![Build Status](https://travis-ci.org/leezng/vue-json-pretty.svg?branch=master)](https://travis-ci.org/leezng/vue-json-pretty)
[![npm package](https://img.shields.io/npm/v/vue-json-pretty.svg)](https://www.npmjs.org/package/vue-json-pretty)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/leezng/vue-json-pretty/blob/master/LICENSE)

A vue 2.x component for rendering JSON data as a tree structure.

## Links

- [Demo](https://leezng.github.io/vue-json-pretty)
- [Github](https://github.com/leezng/vue-json-pretty)
- [中文文档](./README.zh-CN.md)

## Install

```js
npm install vue-json-pretty-fast
```

## Usage

```html
<template>
  <div>
    ...
    <vue-json-pretty
      :path="'res'"
      :data="{ key: 'value' }"
      @click="handleClick">
    </vue-json-pretty>
  </div>
</template>
```

```js
import VueJsonPretty from 'vue-json-pretty'

export default {
  components: {
    VueJsonPretty
  }
}
```

## Props

- If you are using only the basic features (JSON pretty), just focus on the `base` properties.
- If you are using advanced features (get item data), you need to focus on the `base` and `advanced` attributes.

| Attribute | Level | Description | Type | Default |
|-------- |-------- |-------- |-------- | -------- |
| data | basic | json data | JSON object | - |
| deep | basic |data depth, data larger than this depth will not be expanded | number | Infinity |
| path | advanced | root data path | string | root |
| pathChecked | advanced | defines the selected data path | array | [] |
| pathSelectable | advanced | defines whether a data path supports selection | Function(itemPath, itemData) | - |
| selectableType | advanced | defines the selected type, this feature is not supported by default | enum: both, checkbox, tree | - |

## Events

- The following events are base on advanced features.

| Event Name | Description | Callback Parameters |
|---------- |-------- |---------- |
| click  | triggered when a data item is clicked | (path, data) |

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