vue-json-debug v1.1.36

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>;
    };
};

Debug Component Props

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

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>