Laravel Splade - Single Page Applications with Laravel Blade

The magic of Inertia.js with the simplicity of Blade

Links and form submissions without full page reload?

Splade provides a super easy way to build Single Page Applications (SPA) using standard Laravel Blade templates, enhanced with renderless Vue 3 components. In essence, you can write your app using the simplicity of Blade, and besides that magic SPA-feeling, you can sparkle it to make it interactive. All without ever leaving Blade.

<Link href="/">Home</Link>
<Link href="{{ route('contact') }}">Contact</Link>

(and how about nested modals?)

With the Modal Component, Splade has built-in support for modals and slideover. This component allows you to load any route into a modal. Besides loading the content asynchronously, it also supports pre-loaded content.

<Link modal href="/users/create">
    Create new user
</Link>

Async requests and interactive elements without creating components or writing JavaScript?

You may use the Data Component to interact with a set of reactive data inside the component. To get started, you don't even need to define a structure or a default set of data.

<x-splade-data remember="cookie-popup" local-storage>
    <h1 v-if="!data.accepted">Cookie warning</h1>
    <button @click.prevent="data.accepted = true">Accept</button>
</x-splade-data>

Beautiful Form Components with Eloquent Model binding, validation, datetime picker, searchable and taggable selects, and async uploads?

Splade comes with a set of Form Components to rapidly build forms. It supports model binding and validation, integrates with Autosize to automatically adjust textarea height, Choices.js to make selects searchable and taggable, Flatpickr to provide a powerful datetime picker, and FilePond for smooth file uploads.

<x-splade-form :default="$user" confirm>
    <x-splade-input name="email" />
    <x-splade-select name="country_code" :options="$countries" />
    <x-splade-file name="avatar" filepond preview min-width="400" />
    <x-splade-submit>
</x-splade-form>

A DataTables-like Table Component that supports auto-fill, searching, filtering, sorting, toggling, and pagination?

Splade has an advanced Table component with built-in Query Builder. It supports searching through multiple columns and sorting by a relationship column. You may also perform bulk actions and exports.

SpladeTable::for(User::class)
    ->column('name')
    ->column('email')
    ->withGlobalSearch(columns: ['name', 'email'])
    ->export(
        label: 'CSV export',
        filename: 'users.csv',
        type: Excel::CSV
    );
    ->paginate(15);

Listen for broadcasted events and control browser behavior, like redirecting, refreshing, or showing a toast, from the backend?

The Event Component might be the most incredible Splade component of all. You may instruct pages to listen to more or more events and redirect, refresh, or show a toast when the event is broadcasted.

class HighServerLoadDetected implements ShouldBroadcast
{
    public function broadcastWith()
    {
        return [
            Splade::toastOnEvent('High server load detected')->warning(),
        ];
    }
}

Support for Lazy Loading + Animations + Teleports + Persistent Layout?

The Lazy Component allows you to load sections of your data and template lazily. Splade also has support for Persistent Layouts, like a media player that must continue playing while your users navigate your app.

<h1>Today's news items</h1>
 
<x-splade-lazy>
    <x-slot:placeholder>The items are loading...</x-slot:placeholder>
 
    <ul>
        @foreach($items as $item)
            <li>{{ $item->title }}</li>
        @endforeach
    </ul>
</x-splade-lazy>

Besides all the built-in components, you can use existing Blade and Vue libraries. It's not about replacing JavaScript. It's about giving you a massive head start with the built-in components.

The magic of Inertia.js with the simplicity of Blade

Links and form submissions without full page reload?

Modals and slideovers that can show any route?