vue-json-debug v1.1.35
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>
4 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago