{"id":21961815,"url":"https://github.com/trapcodeio/vue-json-debug","last_synced_at":"2025-03-22T20:27:40.016Z","repository":{"id":65896643,"uuid":"601336650","full_name":"trapcodeio/vue-json-debug","owner":"trapcodeio","description":"Vue Json Debug Component Plugin","archived":false,"fork":false,"pushed_at":"2025-02-22T07:28:35.000Z","size":251,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T05:34:54.521Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stackblitz.com/github/trapcodeio/vue-json-debug?file=src/App.vue","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trapcodeio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-13T21:15:39.000Z","updated_at":"2023-11-22T14:47:24.000Z","dependencies_parsed_at":"2025-01-28T00:39:17.754Z","dependency_job_id":null,"html_url":"https://github.com/trapcodeio/vue-json-debug","commit_stats":{"total_commits":40,"total_committers":1,"mean_commits":40.0,"dds":0.0,"last_synced_commit":"bb40bcdf47369c6a8ac84a8875183b7e5524c10c"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trapcodeio%2Fvue-json-debug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trapcodeio%2Fvue-json-debug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trapcodeio%2Fvue-json-debug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trapcodeio%2Fvue-json-debug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trapcodeio","download_url":"https://codeload.github.com/trapcodeio/vue-json-debug/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245017491,"owners_count":20547818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-29T10:18:24.165Z","updated_at":"2025-03-22T20:27:39.994Z","avatar_url":"https://github.com/trapcodeio.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue-json-debug\n\n**STAGE:** [RFC]\n\n![preview.png](./preview.png)\n\nA simple Vue component to display JSON data in multiple components.\n\n- Reactive Preview\n- Show/Hide Debug Components\n- Dev only (not included in production builds)\n\n## Installation\n\n```bash\nnpm install vue-json-debug\n# OR\nyarn add vue-json-debug\n```\n\n## Usage\n\n```ts\nimport {createApp} from 'vue';\nimport App from './App.vue';\n\n// Import plugin\nimport {useDebugPlugin} from 'vue-json-debug/src/plugin';\n// Import plugin styles\nimport 'vue-json-debug/src/debug.css';\n\nconst app = createApp(App);\n\nuseDebugPlugin(app, {\n    // Register the `\u003cdebug\u003e` component globally\n    registerDebugComponent: true,\n});\n\napp.mount('#app');\n```\n\n### Add DebugDock to your app\nIn order to have the debug dock show up, you need to add the `\u003cdebug-dock\u003e` component to your app.\n\nIt should be placed in your root component, or in a component that is always visible.\n\n```vue\n\u003ctemplate\u003e\n    ... your app template\n    \u003cdebug-dock/\u003e\n\u003c/template\u003e\n```\n\n### Debug Component\n The `\u003cdebug\u003e` component is used to display the JSON data. It can be used anywhere in your app.\n\n```vue\n\n\u003cscript setup lang=\"ts\"\u003e\nimport {ref} from \"vue\";\n\nconst form = ref({foo: 'bar'});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdebug :data=\"{form}\"/\u003e\n\u003c/template\u003e\n```\n\n\n\n## Options\n\n```ts\ntype DebugPluginOptions = {\n    enableIf: () =\u003e boolean;\n    dock: {\n        hideIfNoSlots?: boolean;\n        slotTitleLimit?: number;\n    };\n    defaultDebugTheme: string;\n    registerDebugComponent: boolean;\n    components?: {\n        before?: Record\u003cstring, Component\u003e;\n        after?: Record\u003cstring, Component\u003e;\n    };\n};\n```\n\n| Option                 | Type            | Default      | Description                                                                                                                                |\n|------------------------|-----------------|--------------|--------------------------------------------------------------------------------------------------------------------------------------------|\n| enableIf               | `() =\u003e boolean` | `() =\u003e true` | A function that returns a boolean to enable/disable the plugin.                                                                            | \n| dock                   | `Object`        |              | An object that contains the dock options.                                                                                                  |\n| 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`. |\n| dock.slotTitleLimit    | `number`        | `20`         | The maximum number of characters to display in the slot title before truncating it.                                                        |\n| defaultDebugTheme      | `string`        | `dark`       | The default theme to use for the debug component. You can use the following values: `light`, `dark`.                                       |\n| registerDebugComponent | `boolean`       | `false`      | If `true` the `\u003cdebug\u003e` component will be registered globally.                                                                             |\n| components             | `Object`        |              | An object that contains the components to register globally. This provides a way to add more components to the debug component.            |\n| components.before      | `Object`        |              | An object that contains the components to register before the default components.                                                          |\n| components.after       | `Object`        |              | An object that contains the components to register after the default components.                                                           |\n\n\n## Debug Component Props\n```ts\ntype DebugProps = {\n    data: object;\n    forceShow?: boolean;\n    space?: number;\n    name?: string;\n    hideName?: boolean;\n    hideFirst: boolean;\n    theme?: string;\n    useParentName?: boolean;\n};\n```\n\n| Prop          | Type      | Default | Description                                                                                         |\n|---------------|-----------|---------|-----------------------------------------------------------------------------------------------------|\n| data          | `object`  |         | The data to display.                                                                                |\n| forceShow     | `boolean` | `false` | If `true` the debug component will be shown no matter what.                                         |\n| space         | `number`  | `2`     | The number of spaces to use for JSON indentation.                                                   |\n| name          | `string`  |         | The name to display.                                                                                |\n| hideName      | `boolean` | `false` | If `true` the name will be hidden.                                                                  |\n| hideFirst     | `boolean` | `false` | If `true` it will be hidden before mount.                                                           |\n| theme         | `string`  |         | The theme to use for the debug component.                                                           |\n| useParentName | `boolean` | `false` | If `true` the name of the parent file where the debug component is called from will be used as name |\n\n## Available Dock Components\n\n- `RouteInfo` - Displays the current route name. (Requires [vue-router](https://router.vuejs.org/))\n- `ScreenSize` - Displays the current screen width and height. (Requires [@vueuse/core](https://vueuse.org/guide/))\n\n## Registering Components\nThe Docker supports registering components before and after the default components. This provides a way to add more components to the debug component.\n\n```ts\nimport RouterInfo from \"vue-json-debug/src/docks/RouterInfo.vue\";\nimport ScreenSize from \"vue-json-debug/src/docks/ScreenSize.vue\";\n\nuseDebugPlugin(app, {\n    components: {\n        after: {RouterInfo, ScreenSize},\n    },\n});\n```\n\n\n## Nuxt 3 Implementation\nTo add this package to nuxt, you need to create a plugin.\nA nuxt plugin gives you the vue `app` instance.\n\n```ts\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n    const app = nuxtApp.vueApp;\n    \n    useDebugPlugin(app, {\n        registerDebugComponent: true,\n    });\n});\n```\n\nAdd the plugin and styles to your `nuxt.config.ts` file.\n\n```ts\nexport default defineNuxtConfig({\n    css: [\n        // ... your other styles\n        'vue-json-debug/src/debug.css'\n    ],\n    plugins: [\n        // ... your other plugins\n        {\n            src: '@/plugins/path/to/your/plugin.ts',\n            mode: 'client'\n        }\n    ],\n});\n```\n\nAdd DebugDock to your app just like in the Vue example.\nBut surrounded by a `\u003cclient-only\u003e` component.\n```vue\n\n\u003ctemplate\u003e\n  \u003cclient-only\u003e\n    \u003cdebug-dock/\u003e\n  \u003c/client-only\u003e\n\u003c/template\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrapcodeio%2Fvue-json-debug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrapcodeio%2Fvue-json-debug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrapcodeio%2Fvue-json-debug/lists"}