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