@anilkumarthakur/vue3-json-viewer NPM

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.
Expandable/Collapsible Objects: Easily manage the visibility of deeply nested data.
Reusability: Customize the viewer using props for various use cases.
Highly Configurable: Control expanded state, dark mode, and data rendering.

Installation

Install the package using your preferred package manager:

# For npm
npm install @anilkumarthakur/vue3-json-viewer

# For yarn
yarn add @anilkumarthakur/vue3-json-viewer

# For bun
bun add @anilkumarthakur/vue3-json-viewer

# For pnpm
pnpm add @anilkumarthakur/vue3-json-viewer

Setup

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

Import the Stylesheet
Make sure to import the styles in your component or globally:
```
import '@anilkumarthakur/vue3-json-viewer/styles.css';
```

Use the JsonViewer Component

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { JsonViewer } from '@anilkumarthakur/vue3-json-viewer';

  // Sample JSON data to display
  const jsonData = {
    name: 'John Doe',
    age: 30,
    isActive: true,
    hobbies: ['reading', 'traveling', 'coding'],
    address: {
      street: '123 Main St',
      city: 'New York',
      coordinates: { latitude: 40.7128, longitude: -74.006 },
    },
    deepNestedObject: {
      level1: { level2: { level3: { level4: { deepKey: 'deep value' } } } },
    },
  };

  const isDarkMode = ref(true);
  const toggleDarkMode = () => (isDarkMode.value = !isDarkMode.value);

  const isExpanded = ref(true);
  const toggleExpanded = () => (isExpanded.value = !isExpanded.value);

  const computedExpanded = computed(() =>
    isExpanded.value ? 'expanded' : 'collapsed',
  );
</script>

<template>
  <button @click="toggleDarkMode">Toggle Dark Mode</button>
  <button @click="toggleExpanded">Toggle Expanded</button>
  <JsonViewer
    :data="jsonData"
    :expanded="isExpanded"
    :darkMode="isDarkMode"
    :key="computedExpanded"
  />
</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:

const jsonData = {
  name: 'John Doe',
  age: 30,
  isActive: true,
  isVerified: false,
  hobbies: ['reading', 'traveling', 'swimming', 'coding'],
  items: [
    {
      property1: 'value',
      property2: 'value2',
      property3: 'value3',
    },
    {
      property1: 'value',
      property2: 'value2',
      property3: 'value3',
    },
  ],
  address: {
    street: '123 Main St',
    city: 'New York',
    state: 'NY',
    zipCode: '10001',
    coordinates: {
      latitude: 40.7128,
      longitude: -74.006,
    },
  },
  mixedArray: [1, 2, 3, 'test', { property: 'value' }],
  temperature: -2.757,
  currentDate: new Date(),
  regexPattern: /[0-9]/gi,
  formattedDate: Moment().format('YYYY-MM-DD'),
  emptyObj: {},
  emptyArr: [],
  emptyStr: '',
  zeroValue: 0,
  nullValue: null,
  undefinedValue: undefined,
  deepNestedObject: {
    level1: {
      level2: {
        level3: {
          level4: {
            level5: {
              deepKey: 'deep value',
            },
          },
        },
      },
    },
  },
  sampleFunction: function () {
    return 'This is a function';
  },
};