566E
首页 包列表 提交包 常见问题 关于

定制 saakiiib/laravel-spa 二次开发

按需修改功能、优化性能、对接业务系统，提供一站式技术支持

邮箱：yvsm@zunyunkeji.com | QQ：316430983 | 微信：yvsm316

saakiiib/laravel-spa

Composer 安装命令：

composer require saakiiib/laravel-spa

包简介

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. SPA navigation 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 saakiiib/laravel-spa
php artisan vendor:publish --tag=spa-assets

Add /public/vendor to your .gitignore to avoid committing published assets.

Updating? When you run composer update, the published spa-engine.js in public/vendor/ does not auto-update — Composer only updates the package source, not previously published assets. Re-publish with the --force flag to pull the latest fix/version in:

php artisan vendor:publish --tag=spa-assets --force

Skipping this means you'll keep running an old spa-engine.js even after upgrading the package version.

Setup — @extends / @section

1. Layout file

Add @spaContent to your content wrapper and @spaEngine before </body>. Make sure @yield('script') comes after @spaEngine.

<main @spaContent>
    @yield('content')
</main>

@spaEngine
@yield('script')

2. Navigation links

Add @spa to links you want SPA navigation on. Links without @spa do a normal full reload.

<a href="{{ route('home') }}" @spa>Home</a>
<a href="{{ route('about') }}" @spa>About</a>
<a href="{{ route('logout') }}">Logout</a>

3. Controller

public function home()
{
    return spa('pages.home');
}

public function about()
{
    return spa('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 @spaContent to your content wrapper and @spaEngine before </body>.

<head>
    <style>
        /* global styles */
    </style>

    {{ $style ?? '' }}
</head>
<body>
    <main @spaContent>
        {{ $slot }}
    </main>

    <script>
        /* global scripts */
    </script>

    @spaEngine
    {{ $script ?? '' }}
</body>

2. Navigation links — same as above, add @spa:

<a href="{{ route('home') }}" @spa>Home</a>
<a href="{{ route('logout') }}">Logout</a>

3. Controller — same as above:

public function home()
{
    return spa('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>

Global JavaScript & Third-Party Plugins

Page-specific scripts in @section('script') run automatically on every navigation — no extra setup needed.

For global scripts that need to run on every page, place your JS file after @spaEngine:

@spaEngine
<script src="{{ asset('js/app.js') }}"></script>
@yield('script')

In app.js, use spa:loaded to re-initialize plugins after each navigation. Here's an example with Select2:

document.addEventListener('spa:loaded', function () {
    $('.select2').select2();
});

For event listeners, attach them to document once — they work on every page automatically:

document.addEventListener('click', function (e) {
    if (e.target.matches('.delete-btn')) {
        // works on every page
    }
});

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
  • spa:loaded event fires after every navigation for global plugin re-initialization

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 — Sakib

saakiiib/laravel-spa 适用场景与选型建议

saakiiib/laravel-spa 是一款 基于 PHP 开发的 Composer 扩展包，目前已累计 1 次下载、GitHub Stars 达 30， 最近一次更新时间为 2026 年 06 月 29 日， 在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 saakiiib/laravel-spa 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 saakiiib/laravel-spa 我们能提供哪些服务？
定制开发 / 二次开发

基于 saakiiib/laravel-spa 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

统计信息

  • 总下载量： 1
  • 月度下载量： 0
  • 日度下载量： 0
  • 收藏数： 30
  • 点击次数： 13
  • 依赖项目数： 0
  • 推荐数： 0

GitHub 信息

  • Stars： 30
  • Watchers： 1
  • Forks： 2
  • 开发语言： PHP
访问仓库

其他信息

  • 授权协议： MIT
  • 更新时间： 2026-06-29