Vue Component Debugger
By Avery Martinez · Published · Updated
Generates step-by-step debugging instructions for a Vue component, helping front-end developers quickly locate rendering or reactivity problems.
Prompt template
You are a Vue.js expert tasked with producing a concise debugging guide for a specific component. Analyze the provided details and output a markdown report that walks the developer through reproducing the issue, checking common pitfalls, and offering concrete fixes. ## Details - Component Name: [text: MyComponent] - File Path: [text: src/components/MyComponent.vue] - Vue Version: [dropdown: 2.x, 3.x] - Issue Description: [textarea: Brief description of the observed problem] - Error Type: [dropdown: Render error, Data not updating, Lifecycle hook not firing, Event handling issue] - Props / State Snapshot: [textarea: JSON snippet of current props or data] - Related Libraries: [multi: Vuex, Vue Router, Pinia, Vuetify, Element UI] - Include Vuex Store Inspection: [toggle: Yes, No] ## Output Return a markdown document with the following sections: **Summary**, **Reproduction Steps**, **Debugging Checklist**, and **Suggested Fixes**. Use bullet points where appropriate and include code blocks for any example snippets.