Introducing Laravel Splade: The easiest way to build interactive Single-Page applications (SPA) using Laravel Blade templates

A few weeks ago, we introduced Laravel Splade. In a nutshell, it combines the magic of Inertia.js with the simplicity of Laravel Blade. It started as an experiment to bring that magical SPA feeling to Blade and worked incredibly well. I introduced it on Twitter, and the response was overwhelming! You never know how people respond to new concepts and ideas, but it turned out many developers were looking for a way to make Blade templates interactive.

So, what is Laravel Splade? It consists of two major concepts. The first one is being able to create a SPA with Blade templates. No need for React or Vue templates, no Inertia, no Livewire, just plain old Blade templates. Under the hood, it uses Vue 3's render engine, but that's all managed for you. The second concept is making Blade templates interactive. Splade comes with more than 20 components. Some focus on one specific feature (like toggling, two-way data binding, session flash data, etc.), and some are somewhat bigger (modals, slideovers, table and form components). Some components come with a default Tailwind styling, but you can fully customize it, and you don't even have to use Tailwind.

Here's a video that shows the basics and some components of Laravel Splade:

After the first release, we added many features. For example, it now supports Server-side Rendering (SSR) and SEO handling, there's a super-rich Table component (like DataTables), and it's got fantastic Form components with support for model binding, validation, and 3rd-party libraries. The Table component is based on another Table package we introduced last year, and it integrates beautifully with one of Spatie's most fabulous packages: Laravel Query Builder. Check out the Table component introduction video:

Over the last six weeks, we began using Splade in our real-life projects. We started two new projects with Splade, and we're currently moving one giant app over to Splade. The benefits are enormous. Links and form submissions without full page reload, giving the user a smooth experience. We removed numerous custom Vue components, and integrating Modals has become much cleaner. The Form components can clean up your templates, as you never have to worry about validation messages and 'old' data ever again. Take a look at the Form components:

We will work on improving Splade and the documentation, tagging the next major version in the coming weeks.