Vue JSON Picker

Vue JSON Picker is an adaptation of the jsonpath-picker-vanilly lib. This plugin provide you the jsonpath-picker component which allow you to render JSON Object into HTML and let your user pick JSONPath from this view.

An online tool is available to test used lib.

Features

• Syntax highlighting
• Collapsible and expandable child nodes
• Clickable links
• Easily readable and minimal DOM structure
• Path picking

Plugin Installation

Load the npm package

npm i --save vue-jsonpath-picker

And register in vue the plugins

import JSONPathPicker from 'vue-jsonpath-picker';
import Vue from 'vue';

Vue.use(JSONPathPicker);

Usage

<jsonpath-picker :code="JSON Object" v-on:path="pathChangeHandler" />

Options

You can add options using basic lib options through option like following, see documentation for more detail;

<jsonpath-picker :code="JSON Object" v-on:path="pathChangeHandler" :opts="{ picker: false }" />

Contributing

Feel free to post feature requests, create pull requests or report bugs.

Credits

JSON path picker is based on jQuery json-path picker plugin. Big thanks to Piotr 'piotros' Baran for creating an awesome project!