vue3-json-source-viewer

中文版

Version 1: Simple and easy-to-use json content display component suitable for vue3 and vite.
author 1： github

Version2: 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.

author 2 github

Current version: Because the previous versions only support basic data presenting, I fork and extend to make it being able to show image through automatically detecting some specific keys such as 'uri' and 'blob' as well as 'mime_type'. The image will show on a popup window. All changes or extension of this version is mainly for my project requirements.

Current version: github

Install

Requires clipboard

$ npm install clipboard --save

Then install vue3-json-source-viewer

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

Vue project example

Enter example directory under vue-project

Install dependencies

1npm install

Start project

1npm run dev

RecentUpdate

• Support image show(according to key 'mime_type' to judge the data type, show image through obtaining resource from key 'uri' or 'blob' )
• Delete fold/unfold view features that exist on prior versions.

Usage

main.js

1import { createApp } from "vue";
2import App from "./App.vue";
3import JsonViewer from "vue3-json-source-viewer";
4// if you used v1.0.5 or latster ,you should add import "vue3-json-viewer/dist/index.css"
5import "vue3-json-source-viewer/dist/index.css";
6const app = createApp(App);
7app.use(JsonViewer);
8app.mount("#app");

App.vue (version 1)

1<template>
2<div class="box">
3  <h2>light</h2>
4 <JsonViewer :value="jsonData" copyable boxed sort theme="jv-light"/>
5  <h2>dark</h2>
6   <JsonViewer :value="jsonData" copyable boxed sort theme="jv-dark"/>
7</div>
8 
9</template>
10
11<script setup>
12import {JsonViewer} from "vue3-json-source-viewer"
13
14import "vue3-json-source-viewer/dist/index.css";
15import { reactive, ref } from "vue";
16let obj = {
17  name: "qiu",//string
18  age: 18,//array
19  isMan:false,//boolean
20  date:new Date(),
21  fn:()=>{},
22  arr:[1,2,5]
23};
24const jsonData = reactive(obj);
25</script>
26
27<style>
28.box{
29    margin-top: 1rem;
30}
31</style>
32

App.vue (current version)

1<template>
2  <div class="box">
3    <h2>light</h2>
4    <JsonViewer
5      :value="jsonData"
6      copyable
7      boxed
8      sort
9      theme="light"
10      :allowImageShow="true"
11    />
12    <h2>dark</h2>
13    <JsonViewer :value="jsonData" copyable boxed sort theme="dark" />
14  </div>
15</template>
16
17<script setup>
18// import component
19import { JsonViewer } from "vue3-json-source-viewer";
20
21// mock data from document array
22import docArrayJson from "./mock/data.json";
23
24import { reactive, ref } from "vue";
25
26const jsonData = reactive(docArrayJson);
27</script>
28
29<style>
30.box {
31  height: 100%;
32}
33</style>
34

click to show image