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>