Vue-json-debug

STAGE: [RFC]

A simple Vue component to display JSON data in multiple components.

• Reactive Preview
• Show/Hide Debug Components
• Dev only (not included in production builds)

Installation

npm install vue-json-debug
# OR
yarn add vue-json-debug

Usage

import {createApp} from 'vue';
import App from './App.vue';

// Import plugin
import {useDebugPlugin} from 'vue-json-debug/src/plugin';
// Import plugin styles
import 'vue-json-debug/src/debug.css';

const app = createApp(App);

useDebugPlugin(app, {
    // Register the `<debug>` component globally
    registerDebugComponent: true,
});

app.mount('#app');

Add DebugDock to your app

In order to have the debug dock show up, you need to add the <debug-dock> component to your app.

It should be placed in your root component, or in a component that is always visible.

<template>
    ... your app template
    <debug-dock/>
</template>

Debug Component

The <debug> component is used to display the JSON data. It can be used anywhere in your app.

<script setup lang="ts">
import {ref} from "vue";

const form = ref({foo: 'bar'});
</script>

<template>
  <debug :data="{form}"/>
</template>

Options

type DebugPluginOptions = {
    enableIf: () => boolean;
    dock: {
        hideIfNoSlots?: boolean;
        slotTitleLimit?: number;
    };
    defaultDebugTheme: string;
    registerDebugComponent: boolean;
    components?: {
        before?: Record<string, Component>;
        after?: Record<string, Component>;
    };
};

Option	Type	Default	Description
enableIf	() => boolean	() => true	A function that returns a boolean to enable/disable the plugin.
dock	Object		An object that contains the dock options.
dock.hideIfNoSlots	boolean	false	If true the dock will be hidden if there are no slots to display. If you want the dock to be always visible, set this option to false.
dock.slotTitleLimit	number	20	The maximum number of characters to display in the slot title before truncating it.
defaultDebugTheme	string	dark	The default theme to use for the debug component. You can use the following values: light, dark.
registerDebugComponent	boolean	false	If true the <debug> component will be registered globally.
components	Object		An object that contains the components to register globally. This provides a way to add more components to the debug component.
components.before	Object		An object that contains the components to register before the default components.
components.after	Object		An object that contains the components to register after the default components.

Debug Component Props

type DebugProps = {
    data: object;
    forceShow?: boolean;
    space?: number;
    name?: string;
    hideName?: boolean;
    hideFirst: boolean;
    theme?: string;
    useParentName?: boolean;
};

Prop	Type	Default	Description
data	object		The data to display.
forceShow	boolean	false	If true the debug component will be shown no matter what.
space	number	2	The number of spaces to use for JSON indentation.
name	string		The name to display.
hideName	boolean	false	If true the name will be hidden.
hideFirst	boolean	false	If true it will be hidden before mount.
theme	string		The theme to use for the debug component.
useParentName	boolean	false	If true the name of the parent file where the debug component is called from will be used as name

Available Dock Components

• RouteInfo - Displays the current route name. (Requires vue-router)
• ScreenSize - Displays the current screen width and height. (Requires @vueuse/core)

Registering Components

The Docker supports registering components before and after the default components. This provides a way to add more components to the debug component.

import RouterInfo from "vue-json-debug/src/docks/RouterInfo.vue";
import ScreenSize from "vue-json-debug/src/docks/ScreenSize.vue";

useDebugPlugin(app, {
    components: {
        after: {RouterInfo, ScreenSize},
    },
});

Nuxt 3 Implementation

To add this package to nuxt, you need to create a plugin. A nuxt plugin gives you the vue app instance.

export default defineNuxtPlugin((nuxtApp) => {
    const app = nuxtApp.vueApp;
    
    useDebugPlugin(app, {
        registerDebugComponent: true,
    });
});

Add the plugin and styles to your nuxt.config.ts file.

export default defineNuxtConfig({
    css: [
        // ... your other styles
        'vue-json-debug/src/debug.css'
    ],
    plugins: [
        // ... your other plugins
        {
            src: '@/plugins/path/to/your/plugin.ts',
            mode: 'client'
        }
    ],
});

Add DebugDock to your app just like in the Vue example. But surrounded by a <client-only> component.

<template>
  <client-only>
    <debug-dock/>
  </client-only>
</template>