Building Better JSON Visualization in Vue 3

When working with complex data structures in JavaScript applications, especially JSON objects, it's crucial to have a tool that helps visualize the data clearly. If you're building a Vue 3 application and looking for a robust way to display your JSON data, the anilkumarthakur/vue3-json-viewer package is an ideal solution.

Introduction to vue3-json-viewer

anilkumarthakur/vue3-json-viewer is a lightweight yet powerful package designed specifically for Vue 3 applications to visualize JSON data. It provides a clean, collapsible interface for working with JSON, making it easier to navigate deeply nested data structures.

Installation

Depending on the package manager you're using, installing the package is straightforward. Below are the commands for different package managers:

# 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

Usage

After installing the package, you can easily integrate the JsonViewer component into your Vue 3 application. Below is a practical example showing how to use the package:
Step-by-Step Example

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

  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 },
    },
    temperature: -2.757,
    currentDate: new Date(),
    formattedDate: Moment().format('YYYY-MM-DD'),
    deepNestedObject: {
      level1: {
        level2: {
          level3: { level4: { level5: { 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(() => {
    return isExpanded.value ? 'expanded' : 'collapsed';
  });
</script>

<template>
  <button @click="toggleDarkMode">Toggle Dark Mode</button>
  <button @click="toggleExpanded">Toggle Expanded</button>

  <JsonViewer
    :data="jsonData"
    :level="0"
    :key="computedExpanded"
    :expanded="isExpanded"
    :darkMode="isDarkMode"
  />
</template>

Key Features

• Toggle Dark Mode: Easily switch between light and dark themes for better readability depending on the environment.
  Collapsible Data: Expand or collapse deeply nested structures, making it easier to focus on the parts of the JSON data you care about.

• Automatic Formatting: The JSON data is displayed in a structured and formatted manner, with support for complex data types like arrays, objects, dates, and more.

When to Use vue3-json-viewer
Here are some scenarios where vue3-json-viewer can be especially useful:

• API Response Debugging: If you're working with APIs that return large, complex JSON responses, this tool makes it easy to explore the data.

• Form or Config Visualization: Visualize form inputs or configurations that involve deeply nested data.

• Demo Purposes: If you're building tool or demonstrating how different parts of an application interact with JSON, this component offers a visual aid.

Conclusion

anilkumarthakur/vue3-json-viewer is a versatile and user-friendly tool that simplifies working with JSON data in Vue 3 applications. Whether you need to debug an API response, visualize configuration data, or display complex objects, this package provides an intuitive interface. The added flexibility of toggling dark mode and expanding/collapsing data makes it even more powerful.
If you want to try out the package with your own data, you can also check the demo for a live example. Install vue3-json-viewer in your project today and take control of your JSON visualization experience!

Demo Link:https://vue3-json-viewer.vercel.app/
Npm Link: https://www.npmjs.com/package/@anilkumarthakur/vue3-json-viewer