PHPackages thbappy7706/bladeflow - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. thbappy7706/bladeflow ActiveLibrary[Framework](/categories/framework) thbappy7706/bladeflow ===================== Zero-reload SPA engine for Laravel Blade — no jQuery, no Livewire, no Inertia. v1.02(1mo ago)022↓50%MITJavaScriptPHP ^8.1 Since Jun 4Pushed 1mo agoCompare [ Source](https://github.com/thbappy7706/bladeflow)[ Packagist](https://packagist.org/packages/thbappy7706/bladeflow)[ RSS](/packages/thbappy7706-bladeflow/feed)WikiDiscussions main Synced 1w ago READMEChangelogDependencies (2)Versions (4)Used By (0) BladeFlow — by [Tanvir Hossen Bappy](https://github.com/thbappy7706) ==================================================================== [](#bladeflow--by-tanvir-hossen-bappy) By default, every link click in Laravel loads a full new page — HTML, CSS, JS, fonts, everything re-downloads. BladeFlow skips that. Only the content changes, the rest stays. Faster, smoother, no white flash between pages. Most Laravel SPA solutions force you to either abandon Blade entirely (Inertia) or add jQuery (pjax). This package adds that same speed on top of your existing Blade views — no rewrite, nothing changes except how fast it feels. --- Quick Start ----------- [](#quick-start) ``` composer require thbappy7706/bladeflow php artisan vendor:publish --tag=bladeflow-assets ``` > Add `/public/vendor` to your `.gitignore` to avoid committing published assets. --- Setup — `@extends` / `@section` ------------------------------- [](#setup--extends--section) **1. Layout file** Add `@bladeflowContent` to your content wrapper and `@bladeflowEngine` before ``. Make sure `@yield('script')` comes after `@bladeflowEngine`. ``` @yield('content') @bladeflowEngine @yield('script') ``` **2. Navigation links** Add `@bladeflow` to links you want SPA navigation on. Links without `@bladeflow` do a normal full reload. ``` Home About Logout ``` **3. Controller** ``` public function home() { return bladeflow('pages.home'); } public function about() { return bladeflow('pages.about', compact('data')); } ``` **4. Page views — no changes needed** ``` @extends('layouts.app') @section('title', 'Home') @section('style') .hero { background: #1a3c6e; color: #fff; padding: 60px; } @endsection @section('content') Welcome @endsection @section('script') console.log('page loaded'); @endsection ``` --- Setup — `x-layout` components ----------------------------- [](#setup--x-layout-components) **1. Layout component** Add `@bladeflowContent` to your content wrapper and `@bladeflowEngine` before ``. ``` /* global styles — marked so they aren't re-injected on navigation */ {{ $style ?? '' }} {{ $slot }} /* global scripts — marked so they don't re-run on navigation */ @bladeflowEngine {{ $script ?? '' }} ``` **2. Navigation links** — same as above, add `@bladeflow`: ``` Home Logout ``` **3. Controller** — same as above: ``` public function home() { return bladeflow('pages.home'); } ``` **4. Page views** ``` .hero { background: #1a3c6e; color: #fff; padding: 60px; } Welcome console.log('page loaded'); ``` --- What works out of the box ------------------------- [](#what-works-out-of-the-box) - URL updates, back/forward button, refresh, direct links — all work - Per-page styles and scripts load and unload on every navigation - Session expiry redirects cleanly instead of breaking - Hover prefetch — pages start loading before you even click - Works with both `@extends` and `x-layout` --- Progress Indicator & Lifecycle Events ----------------------------------------- [](#progress-indicator--lifecycle-events) BladeFlow includes a built-in, zero-dependency top progress bar loader with a modern Indigo-to-Cyan gradient and glow effect that runs automatically during SPA transitions. ### Disabling the Default Loader [](#disabling-the-default-loader) If you want to disable the default top-bar loader, add `data-bladeflow-progress="false"` to your layout's content wrapper element containing `@bladeflowContent`: ``` @yield('content') ``` ### Custom Lifecycle Events [](#custom-lifecycle-events) You can hook into BladeFlow's lifecycle events to build custom loading transitions, trackers, or UI animations: - **`bladeflow:start`**: Fired when a page transition begins (contains `{ url }` in `event.detail`). - **`bladeflow:finish`**: Fired after the content, scripts, and styles have finished updating (contains `{ url }` in `event.detail`). - **`bladeflow:error`**: Fired when a fetch request fails, right before falling back to full-page reload (contains `{ url, error }` in `event.detail`). #### Example: Custom Loading Spinner / Overlay [](#example-custom-loading-spinner--overlay) ``` document.addEventListener('bladeflow:start', function (event) { console.log('Navigating to:', event.detail.url); // Show your custom loading overlay }); document.addEventListener('bladeflow:finish', function (event) { console.log('Successfully navigated to:', event.detail.url); // Hide your custom loading overlay }); document.addEventListener('bladeflow:error', function (event) { console.error('Failed to load page:', event.detail.url, event.detail.error); // Hide loader }); ``` --- Requirements ------------ [](#requirements) - PHP 8.1+ - Laravel 10, 11, 12, or 13 --- Contributing ------------ [](#contributing) Found a bug or want to improve something? PRs are welcome on [GitHub](https://github.com/thbappy7706/bladeflow). --- License ------- [](#license) MIT — [Tanvir Hossen Bappy](https://github.com/thbappy7706) ### Health Score 40 — FairBetter than 86% of packages Maintenance91 Actively maintained with recent releases Popularity9 Limited adoption so far Community8 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor1 Top contributor holds 66.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~2 days Total 3 Last Release 45d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/3d7b86a335fd7f9c38167079c3c9added0d159a736cf322d2fe9039f86d9d324?d=identicon)[thbappy](/maintainers/thbappy) --- Top Contributors [![thbappygit](https://avatars.githubusercontent.com/u/147967523?v=4)](https://github.com/thbappygit "thbappygit (4 commits)")[![thbappy7706](https://avatars.githubusercontent.com/u/26590361?v=4)](https://github.com/thbappy7706 "thbappy7706 (2 commits)") ### Embed Badge ![Health badge](/badges/thbappy7706-bladeflow/health.svg) ``` [![Health](https://phpackages.com/badges/thbappy7706-bladeflow/health.svg)](https://phpackages.com/packages/thbappy7706-bladeflow) ``` ### Alternatives [laravel/horizon Dashboard and code-driven configuration for Laravel queues. 4.2k95.4M321](/packages/laravel-horizon)[laravel/sail Docker files for running a basic Laravel application. 1.9k205.7M1.3k](/packages/laravel-sail)[laravel/ai The official AI SDK for Laravel. 1.0k3.2M246](/packages/laravel-ai)[laravel/mcp Rapidly build MCP servers for your Laravel applications. 77922.3M186](/packages/laravel-mcp)[illuminate/routing The Illuminate Routing package. 1419.2M3.2k](/packages/illuminate-routing)[laravel/surveyor Static analysis tool for Laravel applications. 86121.4k14](/packages/laravel-surveyor) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)