# @tcstory/vue3-json-viewer

> vuejs展示json的组件,适配vue3

Latest version **2.3.2** (published 2023-12-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install @tcstory/vue3-json-viewer
pnpm add @tcstory/vue3-json-viewer
yarn add @tcstory/vue3-json-viewer
bun add @tcstory/vue3-json-viewer
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.2 |
| Published | 2023-12-08 |
| First published | 2023-12-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 119.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 136 |
| Author | qiuquanwu |
| Maintainers | tcstory |
| Keywords | vue, json, vue-next, vue3 |

## Links

- npm: https://www.npmjs.com/package/@tcstory/vue3-json-viewer
- Repository: https://github.com/qiuquanwu/vue3-json-viewer
- Homepage: https://vjv-doc-qiuquanwu.vercel.app/
- npm.io page: https://npm.io/package/@tcstory/vue3-json-viewer

## Dependencies (1)

- [clipboard](https://npm.io/package/clipboard.md) ^2.0.10

## 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

- 2.3.2 (latest) — 2023-12-08
- 2.3.1 — 2023-12-08
- 2.3.0 — 2023-12-08

## README

# vue3-json-viewer

[中文版](readme_cn.md)

Simple and easy-to-use json content display component suitable for `vue3` and `vite`.
When developing with `vue3`+`vite`, I found that I needed to use the display json data component, and found that `vue-json-viewer` can only be compatible with `vue2`, so it took an hour to rewrite the adaptation of `vue3`.
Original author: [github](https://github.com/chenfengjw163/vue-json-viewer)

## Install

Requires `clipboard`

```
$ npm install clipboard --save
```

Then install `vue3-json-viewer`

```
$ npm install vue3-json-viewer --save
```

## RecentUpdate
- dark theme support
- Add click event for keyNode
- Support RegExp types

## Doc
> [document](https://vjv-doc-qiuquanwu.vercel.app/)
## Usage

main.js

```js
import { createApp } from "vue";
import App from "./App.vue";
import JsonViewer from "vue3-json-viewer";
// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
import "vue3-json-viewer/dist/index.css";
const app = createApp(App);
app.use(JsonViewer);
app.mount("#app");
```

App.vue

``` html
<template>
  <div class="box">
    <h4>Light</h4>
    <JsonViewer :value="jsonData" copyable boxed sort theme="light"  @onKeyClick="keyClick"/>
    <h4>Dark</h4>
    <JsonViewer :value="jsonData" copyable boxed sort theme="dark"  @onKeyClick="keyClick"/>
  </div>
</template>

<script setup>
import {JsonViewer} from "vue3-json-viewer"
// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
import "vue3-json-viewer/dist/index.css";
import { reactive, ref } from "vue";
let obj = {
  name: "qiu",//string
  age: 18,//Array
  isMan:false,//boolean
  date:new Date(),
  fn:()=>{},
  arr:[1,2,5],
  reg:/ab+c/i
};
const jsonData = reactive(obj);
const keyClick = (keyName)=>{
  console.log(keyName,"it was click")
}
</script>

<style>
.box{
  margin-top: 1rem;
}
</style>


```

![](./img/demo.png)

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