Check out Inertia UI 🔥

As of August 2024, Splade is no longer actively maintained. Though we will try to keep up with future Laravel and PHP versions, we discourage using Splade in new projects.

After a period of reflection, we've come full circle and decided to bring the magic of Splade back to Inertia, where it all started. Please check out this new chapter in our journey: Inertia UI.

Laravel Splade

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>
Read more

Modals and slideovers that can show any route?

(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>
Read more

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>
Read more

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>
Read more

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);
Read more

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(),
];
}
}
Read more

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>
Read more

Splade allows you to build Single Page Applications with the Laravel Blade templating engine while still having the full power of Vue.js.

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.

Open source MIT License.
Brought to you by Protone Media.