# vue-json-tree

> Vue component that renders JSON data in a collapsible tree structure.

Latest version **0.4.3** (published 2020-04-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-json-tree
pnpm add vue-json-tree
yarn add vue-json-tree
bun add vue-json-tree
```

## 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.4.3 |
| Published | 2020-04-28 |
| First published | 2017-09-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 50 |
| Author | Leo Deng |
| Maintainers | myst729 |
| Keywords | vue, json, tree |

## Links

- npm: https://www.npmjs.com/package/vue-json-tree
- Repository: https://github.com/myst729/vue-json-tree
- Issues: https://github.com/myst729/vue-json-tree/issues
- npm.io page: https://npm.io/package/vue-json-tree

## 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.4.3 (latest) — 2020-04-28
- 0.4.2 — 2020-04-28
- 0.4.1 — 2019-07-16
- 0.4.0 — 2019-07-16
- 0.3.5 — 2019-07-16
- 0.3.4 — 2019-07-16
- 0.3.3 — 2017-09-03

## README

# vue-json-tree

[![CircleCI](https://img.shields.io/circleci/project/myst729/vue-json-tree/master.svg)](https://circleci.com/gh/myst729/vue-json-tree/tree/master)
[![NPM](https://img.shields.io/npm/v/vue-json-tree.svg)](https://www.npmjs.com/package/vue-json-tree)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/myst729/Vuelog/blob/master/LICENSE)

> Vue component that renders JSON data in a collapsible tree structure.


## usage

#### use in browsers

- Include the CSS and JS along with Vue, so you get a `<json-tree>` component.

```html
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-json-tree@0.4.1/dist/json-tree.js"></script>
```

- Instantiate the component with your data.

```html
<div id="app"></div>
<script>
  new Vue({
    template: '<json-tree :raw="sample"></json-tree>',
    el: '#app',
    data: {
      sample: '{"foo": "bar"}'
    }
  })
</script>
```

#### use with **webpack** and **vue-loader**

- Install the `vue-json-tree` package via NPM.

```bash
npm install --save vue-json-tree
```

- Import the SFC (with CSS embedded) and register it as a component, either globally or in another component.

```js
import JsonTree from 'vue-json-tree'
Vue.component('json-tree', JsonTree)
```

## props

#### `raw` (`string`, optional)

The data you want to present in the tree view. Must be a valid JSON string, otherwise it fails.

#### `data` (`any`, optional)

If your JSON data has already been parsed, bind this one instead. Must be something that can be produced by `JSON.parse()`.

#### `level` (`number`, optional)

Sometimes the data structure is very deep. You could set them to collapsed on load. By default all levels are expanded.

## demo

https://myst729.github.io/vue-json-tree/


MIT © [**Leo**](https://myst729.github.io/)

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