PHPackages                             kamrava/laravel-spfjs - 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. [Utility & Helpers](/categories/utility)
4. /
5. kamrava/laravel-spfjs

ActiveLibrary[Utility & Helpers](/categories/utility)

kamrava/laravel-spfjs
=====================

Integrating SPF.js With Laravel

1.0.1(9y ago)81001MITPHP

Since Apr 23Pushed 3y ago1 watchersCompare

[ Source](https://github.com/kamrava/laravel-spfjs)[ Packagist](https://packagist.org/packages/kamrava/laravel-spfjs)[ RSS](/packages/kamrava-laravel-spfjs/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (9)DependenciesVersions (14)Used By (0)

[![Laravel SPF.js](https://camo.githubusercontent.com/280f77c11b895c8b50639a0312b3ebe533f41a273064196da6a6d357dbb86286/687474703a2f2f75702e76626972616e2e69722f75706c6f6164732f313731363831343932393334363836343031375f6c61726176656c2d7370666a732e706e67)](https://camo.githubusercontent.com/280f77c11b895c8b50639a0312b3ebe533f41a273064196da6a6d357dbb86286/687474703a2f2f75702e76626972616e2e69722f75706c6f6164732f313731363831343932393334363836343031375f6c61726176656c2d7370666a732e706e67)

[![Laravel 5.x](https://camo.githubusercontent.com/7d48a347cda33127449307a1ba24bdebf76d226c4f2a1585285c8e968f2666a9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d352e782d6f72616e67652e7376673f7374796c653d666c61742d737175617265)](https://github.com/kamrava/laravel-spfjs)[![Latest Version](https://camo.githubusercontent.com/b01d675df44c5e4da56de0b42a5600c1312e294d5680fae794825913d75ae24e/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6b616d726176612f6c61726176656c2d7370666a732e7376673f7374796c653d666c61742d737175617265)](https://github.com/kamrava/laravel-spfjs/releases)[![License](https://camo.githubusercontent.com/e5d66983016fd52a87524a403e30d613694bcc837feddd5377b6637e9da03124/68747470733a2f2f706f7365722e707567782e6f72672f6b616d726176612f6c61726176656c2d7370666a732f6c6963656e73652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/kamrava/laravel-spfjs)

Laravel SPF
===========

[](#laravel-spf)

Integrating SPF.js with Laravel

For Laravel 5.x

Laravel SPF package allows to bring awesome SPF.js to your Laravel app. Here is a description from SPF.js official doc :

> Structured Page Fragments — or SPF for short — is a lightweight JS framework for fast navigation and page updates from YouTube.
>
> Using progressive enhancement and HTML5, SPF integrates with your site to enable a faster, more fluid user experience by updating just the sections of the page that change during navigation, not the whole page. SPF provides a response format for sending document fragments, a robust system for script and style management, an in-memory cache, on-the-fly processing, and more.

[Demo](http://reek.ir/demo)

[Demo Source Code](https://github.com/kamrava/laravel-spfjs-demo)

Installation
------------

[](#installation)

1. Install with composer:

```
composer require kamrava/laravel-spfjs
```

2. Open your `config/app.php` and add the following to the providers array:

```
Kamrava\Spf\SectionViewServiceProvider::class
```

3. In the same `config/app.php` and add the following to the aliases array:

```
'SectionView' => Kamrava\Spf\SectionViewFacade::class
```

4. Run the command below to publish the package asset files:

```
php artisan vendor:publish --tag=public --force
```

And that's it! Start building out some awesome and fast Laravel app!

Get Started
-----------

[](#get-started)

**Blade Files Structure**

As you know each HTML page consists of:

`head` for meta tags as well as styles and title and etc..

`body` for your page body

`script` for javascript files

Most probably you were using some structure like this:

```
resources/view/admin/users-list.blade.php
```

And the file's content would be something like this :

```
@extends('layouts.master')
@section('title') Users List @stop
@section('head')

@stop
@section('content')

  ...
  @foreach($users as $user)

      {{ $user->id }}
      {{ $user->name }}
      ...

  @endforeach

@stop
@section('scripts')

@stop
```

Right? Ok, for using SPF.js in you Laravel app you need to break them into separate files and put them into sections directory as below :

```
resources/view/admin/users-list/sections/_title.blade.php
resources/view/admin/users-list/sections/_head.blade.php
resources/view/admin/users-list/sections/_body.blade.php
resources/view/admin/users-list/sections/_foot.blade.php
```

Then put each section content into related blade file. For instance the content of ـhead.blade.php must be:

```

```

And so on for other sections.

Now, we have to combine them into two separate files! One for when SPF is not enabled for any reasons! and the other for when SPF is enabled :

First `index.blade.php` which located in : (For when SPF.js is not enabled)

```
resources/view/admin/users-list/index.blade.php
```

with this content :

```
@extends('layouts.master')
@section('title')
  @include('admin.users-list.sections._title')
@endsection
@section('head')
  @include('admin.users-list.sections._head')
@endsection
@section('content')
  @include('admin.users-list.sections._body')
@endsection
@section('scripts')
  @include('admin.users-list.sections._foot')
@endsection
```

And `spf_json.blade.php` whcih located in : (For when SPF.js is enabled)

```
resources/view/admin/users-list/spf_json.blade.php
```

with this content :

```
{
  "title": "{!! $section->title !!}",
  "head": "{!! $section->head !!}",
  "body": {
    "main-content": "{!! $section->body !!}"
    },
  "foot": "{!! $section->foot !!}"
}
```

**`main-content` in the above code means we have a div with id main-content in the body tag**

Cool, lets have a look at our master page which probably located here :

```
resources/view/layouts/master.blade.php
```

with this content :

```

   @include('layouts.head')
   @yield('head')

   @include('layouts.header')

   	   @yield('content')

   @include('layouts.scripts')
   @yield('scripts')

```

**Send requests**

SPF does not change your site's navigation automatically and instead uses progressive enhancement to enable dynamic navigation for certain links. Just add a spf-link class to an tag to activate SPF.

```

Show Users List
```

**Return responses**

In dynamic navigation, only fragments are sent, using JSON as transport. When SPF sends a request to the server, it appends a configurable identifier to the URL so that your server can properly handle the request. (By default, this will be ?spf=navigate)

**AdminController.php**

```
use SectionView;

class AdminController extends Controller
{
    public function showUsersList(Request $request)
    {
      $users = User::all();
      if($request->input('spf') == 'navigate') {
        return SectionView::from('admin.users-list')->with(['users' => $users])->render();
      }
      return view('admin.users-list.index', compact('users'));
    }
}
```

Finally don't forget to load asset file in your scripts part of your master page!

```

```

Boom! It's Done!

Browser Support
---------------

[](#browser-support)

To use dynamic navigation, SPF requires the HTML5 History API. This is broadly supported by all current browsers, including Chrome 5+, Firefox 4+, and IE 10+.

Credits
-------

[](#credits)

**Maintainers:**

1. \[Hamed Kamrava\](
2. ...

**License**

The MIT License (MIT). Please see License File for more information.

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity16

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity70

Established project with proven stability

 Bus Factor1

Top contributor holds 94.4% 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 ~0 days

Total

12

Last Release

3304d ago

Major Versions

0.9.9 → 1.0.02017-04-24

### Community

Maintainers

![](https://www.gravatar.com/avatar/af7953d923130c6c34b3d65764e847063d24f39130e56f6f80823a54b77c7a9a?d=identicon)[kamrava](/maintainers/kamrava)

---

Top Contributors

[![kamrava](https://avatars.githubusercontent.com/u/5755992?v=4)](https://github.com/kamrava "kamrava (17 commits)")[![hamed-aloware](https://avatars.githubusercontent.com/u/96740401?v=4)](https://github.com/hamed-aloware "hamed-aloware (1 commits)")

### Embed Badge

![Health badge](/badges/kamrava-laravel-spfjs/health.svg)

```
[![Health](https://phpackages.com/badges/kamrava-laravel-spfjs/health.svg)](https://phpackages.com/packages/kamrava-laravel-spfjs)
```

###  Alternatives

[ennnnny/tbk

简约优雅的淘宝客SDK

29016.1k1](/packages/ennnnny-tbk)[b13/doktypemapper

Maps your page.doktype to page.backend\_layout

14109.2k](/packages/b13-doktypemapper)[whikloj/bagittools

A PHP library to manipulate and verify BagIt bags.

1220.5k2](/packages/whikloj-bagittools)[moc/synchronizeurl

Neos CMS package that keep page titles and URLs in sync by updating the URL every time the title changes

106.3k](/packages/moc-synchronizeurl)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)