Vue 3 JSON Viewer

This plugin provides a Vue 3 component for rendering and interacting with JSON data in a structured and visually appealing way. It supports features like dark mode, expanding and collapsing nested objects, and more.

Features

• Dark Mode: Toggle between light and dark themes for better visibility.
• Reusability: Customize the viewer using props for various use cases.
• Expandable/Collapsible Objects: Easily manage the visibility of deeply nested data.
• Highly Configurable: Control expanded state, dark mode, and data rendering.

Installation

Install the package using your preferred package manager:

1# For npm
2npm install @anilkumarthakur/vue3-json-viewer
3
4# For yarn
5yarn add @anilkumarthakur/vue3-json-viewer
6
7# For bun
8bun add @anilkumarthakur/vue3-json-viewer
9
10# For pnpm
11pnpm add @anilkumarthakur/vue3-json-viewer

Setup

Import and use the JsonViewer component in your Vue 3 application:

1. Import the Stylesheet
   Make sure to import the styles in your component or globally:

   1import '@anilkumarthakur/vue3-json-viewer/styles.css';

2. Use the JsonViewer Component

   1<script setup lang="ts">
   2  import { computed, ref } from 'vue';
   3  import { JsonViewer } from '@anilkumarthakur/vue3-json-viewer';
   4
   5  // Sample JSON data to display
   6  const jsonData = {
   7    name: 'John Doe',
   8    age: 30,
   9    isActive: true,
   10    hobbies: ['reading', 'traveling', 'coding'],
   11    address: {
   12      street: '123 Main St',
   13      city: 'New York',
   14      coordinates: { latitude: 40.7128, longitude: -74.006 },
   15    },
   16    deepNestedObject: {
   17      level1: { level2: { level3: { level4: { deepKey: 'deep value' } } } },
   18    },
   19  };
   20
   21  const isDarkMode = ref(true);
   22  const toggleDarkMode = () => (isDarkMode.value = !isDarkMode.value);
   23
   24  const isExpanded = ref(true);
   25  const toggleExpanded = () => (isExpanded.value = !isExpanded.value);
   26
   27  const computedExpanded = computed(() =>
   28    isExpanded.value ? 'expanded' : 'collapsed',
   29  );
   30</script>
   31
   32<template>
   33  <button @click="toggleDarkMode">Toggle Dark Mode</button>
   34  <button @click="toggleExpanded">Toggle Expanded</button>
   35  <JsonViewer
   36    :data="jsonData"
   37    :expanded="isExpanded"
   38    :darkMode="isDarkMode"
   39    :key="computedExpanded"
   40  />
   41</template>

Props

The JsonViewer component provides several props for customization:

Prop	Type	Default	Description
data	Object	{}	The JSON data to be rendered.
expanded	Boolean	true	Whether to expand all objects/arrays by default.
darkMode	Boolean	false	Enable dark mode for the JSON viewer.
level	Number	0	The depth level at which to start rendering the JSON object.

Methods

You can use methods within your Vue components to dynamically control the viewer:

• toggleDarkMode: Toggles between light and dark themes.
• toggleExpanded: Expands or collapses all objects/arrays.

Example JSON Data Structure

Here's an example of the type of JSON data you can render using the JsonViewer component:

1const jsonData = {
2  name: 'John Doe',
3  age: 30,
4  isActive: true,
5  isVerified: false,
6  hobbies: ['reading', 'traveling', 'swimming', 'coding'],
7  items: [
8    {
9      property1: 'value',
10      property2: 'value2',
11      property3: 'value3',
12    },
13    {
14      property1: 'value',
15      property2: 'value2',
16      property3: 'value3',
17    },
18  ],
19  address: {
20    street: '123 Main St',
21    city: 'New York',
22    state: 'NY',
23    zipCode: '10001',
24    coordinates: {
25      latitude: 40.7128,
26      longitude: -74.006,
27    },
28  },
29  mixedArray: [1, 2, 3, 'test', { property: 'value' }],
30  temperature: -2.757,
31  currentDate: new Date(),
32  regexPattern: /[0-9]/gi,
33  formattedDate: Moment().format('YYYY-MM-DD'),
34  emptyObj: {},
35  emptyArr: [],
36  emptyStr: '',
37  zeroValue: 0,
38  nullValue: null,
39  undefinedValue: undefined,
40  deepNestedObject: {
41    level1: {
42      level2: {
43        level3: {
44          level4: {
45            level5: {
46              deepKey: 'deep value',
47            },
48          },
49        },
50      },
51    },
52  },
53  sampleFunction: function () {
54    return 'This is a function';
55  },
56};

Demo

For a live demo, check out the example on Vercel or explore the demo in src/App.vue of the repository.

TypeScript Support

The JsonViewer component is fully typed, making it easier to work with in TypeScript projects.

Enjoy a seamless and customizable JSON viewing experience in your Vue 3 applications with @anilkumarthakur/vue3-json-viewer