thbappy7706/bladeflow
Composer 安装命令：
composer require thbappy7706/bladeflow
包简介
Zero-reload SPA engine for Laravel Blade — no jQuery, no Livewire, no Inertia.
README 文档
README
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
composer require thbappy7706/bladeflow php artisan vendor:publish --tag=bladeflow-assets
Add
/public/vendorto your.gitignoreto avoid committing published assets.
Setup — @extends / @section
1. Layout file
Add @bladeflowContent to your content wrapper and @bladeflowEngine before </body>. Make sure @yield('script') comes after @bladeflowEngine.
<main @bladeflowContent> @yield('content') </main> @bladeflowEngine @yield('script')
2. Navigation links
Add @bladeflow to links you want SPA navigation on. Links without @bladeflow do a normal full reload.
<a href="{{ route('home') }}" @bladeflow>Home</a> <a href="{{ route('about') }}" @bladeflow>About</a> <a href="{{ route('logout') }}">Logout</a>
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') <style> .hero { background: #1a3c6e; color: #fff; padding: 60px; } </style> @endsection @section('content') <div class="hero"> <h1>Welcome</h1> </div> @endsection @section('script') <script> console.log('page loaded'); </script> @endsection
Setup — x-layout components
1. Layout component
Add @bladeflowContent to your content wrapper and @bladeflowEngine before </body>.
<head> <style data-bladeflow-layout-style> /* global styles — marked so they aren't re-injected on navigation */ </style> {{ $style ?? '' }} </head> <body> <main @bladeflowContent> {{ $slot }} </main> <script data-bladeflow-layout-script> /* global scripts — marked so they don't re-run on navigation */ </script> @bladeflowEngine {{ $script ?? '' }} </body>
2. Navigation links — same as above, add @bladeflow:
<a href="{{ route('home') }}" @bladeflow>Home</a> <a href="{{ route('logout') }}">Logout</a>
3. Controller — same as above:
public function home() { return bladeflow('pages.home'); }
4. Page views
<x-app-layout title="Home"> <x-slot:style> <style> .hero { background: #1a3c6e; color: #fff; padding: 60px; } </style> </x-slot:style> <div class="hero"> <h1>Welcome</h1> </div> <x-slot:script> <script> console.log('page loaded'); </script> </x-slot:script> </x-app-layout>
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
@extendsandx-layout
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
If you want to disable the default top-bar loader, add data-bladeflow-progress="false" to your layout's content wrapper element containing @bladeflowContent:
<main @bladeflowContent data-bladeflow-progress="false"> @yield('content') </main>
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 }inevent.detail).bladeflow:finish: Fired after the content, scripts, and styles have finished updating (contains{ url }inevent.detail).bladeflow:error: Fired when a fetch request fails, right before falling back to full-page reload (contains{ url, error }inevent.detail).
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
- PHP 8.1+
- Laravel 10, 11, 12, or 13
Contributing
Found a bug or want to improve something? PRs are welcome on GitHub.
License
MIT — Tanvir Hossen Bappy
thbappy7706/bladeflow 适用场景与选型建议
thbappy7706/bladeflow 是一款 基于 JavaScript 开发的 Composer 扩展包，目前已累计 2 次下载、GitHub Stars 达 0， 最近一次更新时间为 2026 年 06 月 04 日， 在 PHP 生态内属于活跃度较高的组件。
我们在过去多个企业项目中使用过 thbappy7706/bladeflow 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。
基于 thbappy7706/bladeflow 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。
线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。
承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。
统计信息
- 总下载量： 2
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 0
- 点击次数： 34
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2026-06-04