Initial commit

Author: duncanmcclean

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmignore

@@ -0,0 +1,9 @@
+src/
+.gitignore
+.npmignore
+vite.config.js
+*.log
+node_modules/
+.vscode/
+.idea/
+.DS_Store

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "printWidth": 120,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Duncan McClean
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,81 @@
+# Vue Component Debug
+
+Adds HTML comments to the start and end of each Vue component, so you can more easily keep track of what's being used.
+
+> **Why not just use Vue Devtools?** This makes it easier to debug in the DOM without needing to context-switch to Vue devtools.
+
+[Inspired by the `laravel-view-debug` package by my colleague Jason Varga](https://github.com/pixelfear/laravel-view-debug)
+
+## Example
+
+You may have a Vue component which looks like this:
+
+```vue
+<div>
+	My component file!
+
+	<SubComponent>Click me!</SubComponent>
+
+	More stuff
+</div>
+```
+
+It will be rendered like this:
+
+```html
+<!-- Start component: src/components/MyComponent.vue -->
+<div>
+    My component file
+    
+    <!-- Start component: src/components/SubComponent.vue -->
+    <div>Sub component</div>
+    <!-- End component: src/components/SubComponent.vue -->
+
+    More stuff
+</div>
+<!-- End component: src/components/MyComponent.vue -->
+```
+
+Of course, since they are HTML comments, it will look no different unless you view the source.
+
+## Installation
+
+You can install the package via npm:
+
+```bash
+npm install vue-component-debug --save-dev
+```
+
+## Usage
+
+To enable it, add the `VueComponentDebug` plugin to your Vue application. This can be done in your main entry file (e.g., `main.js` or `main.ts`):
+
+```javascript
+import { createApp } from 'vue'
+import VueComponentDebug from 'vue-component-debug'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(VueComponentDebug)
+
+app.mount('#app')
+```
+
+Comments will only be added in development mode.
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```