https://github.com/mikemenaker/vue-json-tree

Vue.js JSON tree viewer component
https://github.com/mikemenaker/vue-json-tree

vue vue2 vuejs2

Last synced: about 1 month ago
JSON representation

Vue.js JSON tree viewer component

• Host: GitHub
• URL: https://github.com/mikemenaker/vue-json-tree
• Owner: mikemenaker
• License: mit
• Created: 2017-04-16T23:15:58.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T21:52:28.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T21:45:51.776Z (7 months ago)
• Topics: vue, vue2, vuejs2
• Language: Vue
• Homepage:
• Size: 2.75 MB
• Stars: 17
• Watchers: 3
• Forks: 6
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-json-tree

Vue.js JSON tree viewer component

[![GitHub release](https://img.shields.io/github/release/mikemenaker/vue-json-tree.svg)]() [![license](https://img.shields.io/github/license/mikemenaker/vue-json-tree.svg)]()

## Demo:

https://jsfiddle.net/mikemenaker/8zxwavrk/

## Installation

### With npm:

```bash

npm i v-json-tree --save

```

### With a CDN:

```html

```

## Usage

### With an ES6 bundler (via npm)

In your component file

```js

import vJsonTree from "v-json-tree";

```

Then register:

```

components: {

    vJsonTree

  },

```

### With a CDN

```html

    Vue.component("v-json-tree", vJsonTree);

    new Vue({

        // ...

    })

```

## Props:

 - data  - Data to format into tree

 - filterKey  - String to filter data

 - fullMarkup  - If full mark up is need (quotes and commas)

## Slots:

 - hide - What should be used for the hide button

 - expand - What should be used for the expand button

 - more - What should be used for the elipsis when an object/array is hidden