Write Single Page Applications using Laravel Splade

Last updated on by

Laravel Splade, created by by Pascal Baljet, is a super easy way to build single-page applications (SPA) using Laravel Blade templates. Splade makes it easy to create modern, dynamic web applications that are a joy to use.

Splade provides useful Blade components that are enhanced with renderless Vue 3 components out of the box, such as the <Link /> Component component. It provides that SPA-like feeling, but you can use Blade, sprinkled with interactive Vue components when required.

As you can see, in the default installation, the <Link /> components fetch the page data via XHR and provide that SPA snappy feel without full page reloads.

You can use both Blade and Vue markup. Here's an example from Splade's <Toggle /> component. Note the v-show directive and @click listener from Vue, and the Blade-specific component and variable usage {{ }}:

<div v-show="toggled">{{ $blog->full_content }}</div>
<div v-show="!toggled">
<p>{{ $blog->excerpt }}</p>
<button @click="toggle">Expand</button>

If you need Custom Vue components, Splade has your back, and you can even utilize Server Side Rendering (SSR) to improve performance in your application.

If you also want to use Laravel Breeze or Laravel Jetstream, Splade provides starter kits for both. Splade also provides useful components out of the box you can use to get started quickly, with or without using the starter kits:

  • Forms
  • Links
  • Events
  • Flash
  • Modals
  • Table
  • Teleport
  • Toggle
  • Transition
  • And more!

You can get started with Splade quickly by checking out the homepage and accompanying documentation on splade.dev. You can also dive deeper and learn How Splade works under the hood.

Paul Redmond photo

Full stack web developer. Author of Lumen Programming Guide and Docker for PHP Developers.


Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.


Version 4 of Tinkerwell is available now. Get the most popular PHP scratchpad with all its new features and simplify your development workflow today.

Visit Tinkerwell

The latest

View all →
Announcing Laravel Pulse - A New Performance Monitoring Tool for Laravel Apps image

Announcing Laravel Pulse - A New Performance Monitoring Tool for Laravel Apps

Read article
Use Ollama LLM Models Locally with Laravel image

Use Ollama LLM Models Locally with Laravel

Read article
TallStackUI - a new component library for TALL Stack apps image

TallStackUI - a new component library for TALL Stack apps

Read article
Laravel 10.34 Released image

Laravel 10.34 Released

Read article
Laravel Tailwind Merge image

Laravel Tailwind Merge

Read article
Generate Validation Rules from a Database Schema in Laravel image

Generate Validation Rules from a Database Schema in Laravel

Read article
Honeybadger logo


Zero-instrumentation, 360 degree coverage of errors, outages and service degradation.

Laravel Forge logo

Laravel Forge

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Forge
Oh Dear logo

Oh Dear

Oh Dear is the best all-in-one monitoring tool for all your Laravel apps.

Oh Dear
Tinkerwell logo


The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Kirschbaum logo


Providing innovation and stability to ensure your web application succeeds.

Shift logo


Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Bacancy logo


Supercharge your project with a seasoned Laravel developer with 4-6 years of experience for just $2500/month. Get 160 hours of dedicated expertise & a risk-free 15-day trial. Schedule a call now!

LoadForge logo


Easy, affordable load testing and stress tests for websites, APIs and databases.

Paragraph logo


Manage your Laravel app as if it was a CMS – edit any text on any page or in any email without touching Blade or language files.

Lucky Media logo

Lucky Media

Bespoke software solutions built for your business. Partner with Lucky Media, your favorite Laravel Development Agency!

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar: Laravel E-Commerce

E-Commerce for Laravel. An open-source package that brings the power of modern headless e-commerce functionality to Laravel.

Lunar: Laravel E-Commerce