Vue Laravel Debugbar

A Vue.js plugin that integrates Laravel Debugbar with Vue SPA applications, providing the same debugging experience as traditional Laravel applications.

Features

- 🐛 Full Laravel Debugbar Integration - Access all debugbar data in your Vue SPA
- 🔄 Multiple Request Tracking - View debug data from multiple API calls
- 🎯 Request Selector - Switch between different requests with a dropdown
- ⚡ Auto HTTP Intercepting - Automatically capture debugbar data from axios requests
- 🎨 Customizable UI - Built-in debug panel component with toggle functionality
- 📱 Development Only - Automatically disabled in production
- 🔧 TypeScript Support - Full TypeScript definitions included

Installation

``bash
npm install vue-laravel-debugbar
`

Quick Start

$3

First, install Laravel Debugbar in your Laravel backend:

`bash
composer require barryvdh/laravel-debugbar --dev
`

Create a middleware to include debugbar data in API responses:

`php
// app/Http/Middleware/DebugbarMiddleware.php


namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class DebugbarMiddleware
{
public function handle(Request $request, \Closure $next)
{
$response = $next($request);

if (config('app.debug')&& class_exists(\Debugbar::class) && \Debugbar::isEnabled() && $request->wantsJson()) {
$debugbar = app('debugbar');

// Generate unique request ID
$requestId = uniqid('req_', true);

// Store request info
$requestInfo = [
'id' => $requestId,
'method' => $request->method(),
'url' => $request->fullUrl(),
'time' => now()->format('H:i:s'),
'timestamp' => microtime(true),
'status' => $response->getStatusCode(),
];

$renderer = $debugbar->getJavascriptRenderer();
$renderer->setBaseUrl('http://localhost:8000');
$renderer->setOpenHandlerUrl('http://localhost:8000/_debugbar/open');

$originalContent = $response->getOriginalContent();

$debugData = [
'request_info' => $requestInfo,
'debugbar_html' => $renderer->renderHead() . $renderer->render(),
'debugbar_data' => $debugbar->getData() // Raw data for analysis
];

if (is_array($originalContent)) {
$originalContent['_debugbar'] = $debugData;
$response->setContent(json_encode($originalContent));
} else {
$data = json_decode($response->getContent(), true) ?: [];
$data['_debugbar'] = $debugData;
$response->setContent(json_encode($data));
}
}

return $response;
}
}
`

Register the middleware in your app/Http/Kernel.php:

`php
protected $middlewareGroups = [
'api' => [
// ... other middleware
\App\Http\Middleware\DebugbarMiddleware::class,
],
];
`

$3

#### Option A: Using the Vue Plugin (Recommended)

`javascript
// main.js
import { createApp } from 'vue'
import VueLaravelDebugbar from 'vue-laravel-debugbar'
import axios from 'axios'
import App from './App.vue'

const app = createApp(App)

app.use(VueLaravelDebugbar, {
baseURL: 'http://localhost:8000',
enabled: process.env.NODE_ENV === 'development',
axios: axios, // Optional: auto-setup interceptors
})

app.mount('#app')
`

Then use the debug panel in your components:

`vue

`

#### Option B: Using Composables

`vue

`

#### Option 3: Manual Integration

`javascript
import { useDebugbar, createHttpInterceptor } from 'vue-laravel-debugbar'
import axios from 'axios'

// Setup axios with debugbar interceptor
const http = createHttpInterceptor(axios, {
baseURL: 'http://localhost:8000',
enabled: true
})

// Use in your components
const { debugbarRequests, showDebugbarToggle } = useDebugbar()
`

API Reference

$3

Main composable for debugbar functionality.

Parameters:
- options - Optional configuration object

Returns:
- debugbarRequests - Ref array of all captured requests
- currentRequestId - Ref of currently selected request ID
- isDebugbarVisible - Ref boolean of debugbar visibility
- addDebugbarData(data) - Function to add debugbar data
- showDebugbar() - Function to show debugbar
- hideDebugbar() - Function to hide debugbar
- clearAllRequests() - Function to clear all requests
- showDebugbarToggle() - Function to toggle debugbar visibility
- getRequestStats() - Function to get current request statistics

$3

`javascript
{
baseURL: 'http://localhost:8000', // Laravel backend URL
enabled: true, // Enable/disable debugbar
autoShow: true, // Auto-show on first request
registerComponents: true, // Register components globally
axios: axiosInstance // Axios instance for auto-interceptor
}
`

$3

####

A ready-to-use debug panel component with toggle button and request counter.

`vue

`

Advanced Usage

$3

`javascript
import { createFetchInterceptor } from 'vue-laravel-debugbar'

// For fetch API
const restoreFetch = createFetchInterceptor({
enabled: process.env.NODE_ENV === 'development'
})

// Later, if needed
restoreFetch() // Restores original fetch
`

$3

`typescript
import { useDebugbar, DebugbarConfig } from 'vue-laravel-debugbar'

const config: DebugbarConfig = {
baseURL: 'http://localhost:8000',
enabled: true
}

const { addDebugbarData } = useDebugbar(config)
`

$3

`javascript
const { getRequestStats } = useDebugbar()

const stats = getRequestStats()
console.log(Queries: ${stats.queries}, Memory: ${stats.memory})
`

Troubleshooting

$3


- Ensure Laravel Debugbar is installed and enabled
- Check that your API responses include _debugbar data
- Verify the middleware is registered and working
- Make sure you're in development mode

$3

- Add debugbar assets to CORS allowed origins
- Ensure /_debugbar/* routes are accessible

$3

- Check the baseURL configuration matches your Laravel backend
- Verify Laravel Debugbar assets are published

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

CSS Styling

If you're using a bundler that doesn't automatically handle CSS imports, you can import the CSS file directly:

`javascript
// Import the CSS (use one of these options)
import 'vue3-spa-laravel-debugbar/style'; // Recommended
// OR
import 'vue3-spa-laravel-debugbar/dist/bundle.css'; // Direct path
// OR for minified version
import 'vue3-spa-laravel-debugbar/style.min';

// Then use the components
import { DebugPanel } from 'vue3-spa-laravel-debugbar';
``