xray-vue

JavaScript object browser for Vue.js

Live demo

Install

$ npm i xray-vue

Usage

Basic

<XRay :obj="myObj" />

Disable header

<XRay :obj="myObj" :header="false" />

Set custom title

<XRay :obj="myObj" title="My title" />

Start minimized

<XRay :obj="myObj" minimize />
// same
<XRay :obj="myObj" :minimize="true" />

Collapse some keys

<XRay :obj="myObj" :collapse="['key1', 'key2']" />
// collapse nested keys
<XRay :obj="myObj" :collapse="['key1.sub1', 'key1.sub2']" />

Collapse all top level keys

<XRay :obj="myObj" collapse="top" />

Collapse everything

<XRay :obj="myObj" collapse />
// same
<XRay :obj="myObj" :collapse="true" />

Collapse everything except

<XRay :obj="myObj" :collapseExcept="['key1', 'key2']" />

Interaction

Clickable areas:

• header title -- show/hide XRay panel
• property -- toggle display of value/subtree
• property : right click -- prompt with path to property
• unknown values -- log undetected object to console

Caveats

• invisible characters in strings like newline are not displayed
• proxies are not detected, displayed as standard object
• promise status is not detected

Other ports

• xray-react
• xray-solid
• xray-svelte
• xray-mithril

License

MIT