https://github.com/qiuquanwu/vue3-json-viewer

Simple JSON viewer component, for Vue.js 3.x
https://github.com/qiuquanwu/vue3-json-viewer

json viewer vue vue3 vuejs

Last synced: 3 days ago
JSON representation

Simple JSON viewer component, for Vue.js 3.x

• Host: GitHub
• URL: https://github.com/qiuquanwu/vue3-json-viewer
• Owner: qiuquanwu
• License: mit
• Created: 2021-01-27T18:09:51.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-07-22T15:54:57.000Z (6 months ago)
• Last Synced: 2024-12-27T13:08:39.622Z (10 days ago)
• Topics: json, viewer, vue, vue3, vuejs
• Language: Vue
• Homepage: https://vjv-doc-qiuquanwu.vercel.app/
• Size: 240 KB
• Stars: 103
• Watchers: 4
• Forks: 15
• Open Issues: 15
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

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

  


    
Light

    

    
Dark

    

  


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")

}

.box{

  margin-top: 1rem;

}

```

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