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

npm install vue-laravel-debugbar

Quick Start

1. Laravel Backend Setup

First, install Laravel Debugbar in your Laravel backend:

composer require barryvdh/laravel-debugbar --dev

Create a middleware to include debugbar data in API responses:

// app/Http/Middleware/DebugbarMiddleware.php
<?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:

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

2. Vue Frontend Setup

Option A: Using the Vue Plugin (Recommended)

// 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:

<template>
  <div>
    <h1>My App</h1>
    <!-- Debug panel will show automatically in development -->
    <DebugPanel />
  </div>
</template>

Option B: Using Composables

<script setup>
import { useDebugbar } from 'vue-laravel-debugbar'
import { onMounted } from 'vue'
import axios from 'axios'

const { addDebugbarData, showDebugbar } = useDebugbar({
  baseURL: 'http://localhost:8000'
})

// Setup axios interceptor
axios.interceptors.response.use(response => {
  if (response.data._debugbar) {
    addDebugbarData(response.data)
  }
  return response
})

const fetchData = async () => {
  await axios.get('/api/users')
  // Debugbar data will be automatically captured and displayed
}
</script>

Option 3: Manual Integration

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

useDebugbar(options?)

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

Plugin Options

{
  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
}

Components

<DebugPanel />

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

<template>
  <DebugPanel />
</template>

Advanced Usage

Custom HTTP Client Setup

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

TypeScript Support

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

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

const { addDebugbarData } = useDebugbar(config)

Request Statistics

const { getRequestStats } = useDebugbar()

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

Troubleshooting

Debugbar Not Showing

• 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

CORS Issues

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

Assets Not Loading

• 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:

// 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';