PHPackages                             mojahed/spa - 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. [Templating & Views](/categories/templating)
4. /
5. mojahed/spa

ActiveLibrary[Templating & Views](/categories/templating)

mojahed/spa
===========

A Laravel SPA package using Alpine.js, Axios and Bootstrap — blade components, directives and JS utilities to build dynamic single-page applications without a build step.

1.0.2(3d ago)011↓100%MITPHP >=7.4

Since Jul 5Compare

[ Source](https://github.com/md-mojahed/Mojahed-SPA)[ Packagist](https://packagist.org/packages/mojahed/spa)[ RSS](/packages/mojahed-spa/feed)WikiDiscussions Synced today

READMEChangelogDependencies (2)Versions (2)Used By (0)

mojahed/spa
===========

[](#mojahedspa)

A Laravel SPA package powered by **Alpine.js**, **Axios**, and **Bootstrap** — no build step, no npm, no Vite. Load blade fragments dynamically, manage modals, offcanvases, and independent page sections with clean declarative components.

---

Requirements
------------

[](#requirements)

- PHP >= 7.4
- Laravel >= 7.x (components & directives)
- Laravel >= 9.36 (for the `SpaRequest::fragmentIf()` controller helper)
- Bootstrap 5
- Alpine.js 3.x
- Axios
- SweetAlert2 (for confirm dialogs and toasts)

---

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

[](#installation)

```
composer require mojahed/spa
```

Publish and copy assets to your public directory:

```
php artisan spa:setup
```

Optionally publish config and views for customization:

```
php artisan spa:publish
```

---

Layout Setup
------------

[](#layout-setup)

Add directives to your main layout file:

```
>

    {{ config('app.name') }}

    @spacss
    @stack('styles')

    @include('partials.sidebar')

        @yield('content')

    @spajs
    @stack('scripts')

```

Use a custom Alpine component name:

```

```

Then define it in your scripts:

```
function myAppData() {
    return {
        ...spa(),
        // your custom properties and methods
    };
}
```

---

Directives
----------

[](#directives)

DirectiveOutput`@spacss`CSS link tags (Bootstrap + spa.css)`@spajs`JS script tags (Alpine, Axios, Bootstrap, SweetAlert2, spa.js) + CSRF headers`@spadata``x-data="spa()"` on body`@spadata('name')``x-data="name()"` on body---

Components
----------

[](#components)

### `` — Inline Fragment Zone

[](#x-spa-target--inline-fragment-zone)

Loads a blade fragment into an inline div. Optionally auto-loads on page ready.

```

```

**Props**

PropDefaultDescription`id`requiredUnique ID`url``''`URL to fetch`auto-load``false`Load on page ready`loader-type`config default`spinner` | `skeleton` | `table` | `card``loader-rows``5`Skeleton/table rows`loader-cols``4`Table columns`method``get`HTTP method`params``[]`Query params array---

### `` — Bootstrap Modal Container

[](#x-spa-modal--bootstrap-modal-container)

```

```

**Props**

PropDefaultDescription`id`requiredUnique ID`size``lg``sm` | `md` | `lg` | `xl` | `fullscreen``title``''`Modal title`loader-type`config defaultLoader type while loading`static-backdrop``true`Prevent close on outside click`scrollable``false`Scrollable modal body---

### `` — Bootstrap Offcanvas Container

[](#x-spa-offcanvas--bootstrap-offcanvas-container)

```

```

**Props**

PropDefaultDescription`id`requiredUnique ID`title``''`Header title`placement``end``start` | `end` | `top` | `bottom``width``450px`Width (end/start only)`loader-type`config defaultLoader type while loading---

### `` — Button Trigger

[](#x-spa-btn--button-trigger)

```
{{-- Load into modal --}}

    New Employee

{{-- Delete with confirm --}}

    Delete

```

**Props**

PropDefaultDescription`url``''`Target URL`method``get`HTTP method`target``''`Load into `#spa-target` id`modal``''`Load into modal id`offcanvas``''`Load into offcanvas id`confirm``false`Show confirm dialog first`confirm-title`configConfirm dialog title`confirm-text`configConfirm dialog body text`confirm-type``warning`SweetAlert icon type`confirm-ok`configConfirm button label`confirm-cancel`configCancel button label`on-success-reload``''`Reload target by `#id``on-success-close``''`Close modal/offcanvas by `#id``on-success-toast``''`Show success toast message`on-success-redirect``''`Redirect to URL`on-success-emit``''`Dispatch custom Alpine event---

### `` — Anchor Trigger

[](#x-spa-link--anchor-trigger)

Same props as ``, renders as an `` tag.

```

    View Details

```

---

### `` — Axios Form Submit

[](#x-spa-form--axios-form-submit)

Handles form submission with error binding and submitting state. Pass initial field values through `:data` and bind inputs with `x-model="{model}.{field}"`.

```

        Save

```

**Props**

PropDefaultDescription`url`requiredSubmit URL`method``post`HTTP method`model``form`Name of the Alpine data object holding the fields`:data``[]`Initial field values, e.g. `:data="['name' => $item->name]"`---

### `` — Standalone Loader

[](#x-spa-loader--standalone-loader)

```

```

---

Dashboard — Independent Sections
--------------------------------

[](#dashboard--independent-sections)

Each section loads independently with its own loader, just like the AWS dashboard:

```

```

---

Controller — Fragment Detection
-------------------------------

[](#controller--fragment-detection)

Use Laravel's built-in fragment system with the `X-SPA-Request` header automatically sent by the package:

```
use Mojahed\Spa\SpaRequest;

public function index(Request $request)
{
    $employees = Employee::all();

    return SpaRequest::fragmentIf($request,
        view('employees.index', compact('employees')),
        'list'
    );
}
```

Or directly with Laravel's `fragmentIf`:

```
return view('employees.index', compact('employees'))
    ->fragmentIf($request->hasHeader('X-SPA-Request'), 'list');
```

---

JS Utilities
------------

[](#js-utilities)

All utilities are globally available:

```
// Toasts
spaToast({ type: 'success', title: 'Saved!', seconds: 3 });
spaToast({ type: 'error',   title: 'Something went wrong.' });

// URL params
spaSetParam('page', 2);
spaGetParam('page', 1);
spaRemoveParam('page');
spaGetAllParams();

// Script execution from fragment HTML
spaRunScriptCode(html);

// Trigger an action programmatically
spaAction({
    url:      '/employees/1',
    method:   'delete',
    confirm:  { enabled: true, title: 'Delete?' },
    onSuccess: { toast: 'Deleted!', reload: 'table-wrapper' }
});
```

---

Configuration
-------------

[](#configuration)

Publish and edit `config/spa.php`:

```
return [
    'asset_path'       => 'assets/spa',
    'asset_version'    => null,         // e.g. '1.0' for cache busting
    'default_loader'   => 'spinner',    // spinner | skeleton | table | card
    'auto_run_scripts' => true,
    'confirm' => [
        'title'  => 'Are you sure?',
        'text'   => "You won't be able to revert this!",
        'type'   => 'warning',
        'ok'     => 'Yes, proceed!',
        'cancel' => 'Cancel',
    ],
];
```

---

Legacy Compatibility
--------------------

[](#legacy-compatibility)

If you are migrating from existing code that uses `toast()`, `setParam()`, `getParam()`, `runScriptCode()` — these are aliased to the new `spa*` functions so your existing code continues to work without changes.

---

License
-------

[](#license)

MIT — [Md. Mojahedul Islam](https://github.com/md-mojahed)

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance99

Actively maintained with recent releases

Popularity7

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity33

Early-stage or recently created project

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

Unknown

Total

1

Last Release

3d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/92214734?v=4)[Md Mojahedul Islam](/maintainers/md-mojahed)[@md-mojahed](https://github.com/md-mojahed)

---

Tags

laravelcomponentsbladebootstrapalpineaxiosSPA

### Embed Badge

![Health badge](/badges/mojahed-spa/health.svg)

```
[![Health](https://phpackages.com/badges/mojahed-spa/health.svg)](https://phpackages.com/packages/mojahed-spa)
```

###  Alternatives

[moonshine/moonshine

Laravel administration panel

1.3k253.1k82](/packages/moonshine-moonshine)[blade-ui-kit/blade-icons

A package to easily make use of icons in your Laravel Blade views.

2.5k42.5M408](/packages/blade-ui-kit-blade-icons)[psalm/plugin-laravel

Psalm plugin for Laravel

3355.3M346](/packages/psalm-plugin-laravel)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

726175.4k14](/packages/tallstackui-tallstackui)[hasinhayder/tyro-dashboard

Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings

5443.8k](/packages/hasinhayder-tyro-dashboard)[hasinhayder/tyro-login

Tyro Login - Beautiful, customizable authentication views for Laravel 12 & 13

2464.9k6](/packages/hasinhayder-tyro-login)

PHPackages © 2026

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