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.

X-Splade-State Component

The State Component is a convenient wrapper around validation errors, flash data, and shared data.

Errors

The state prop has a hasError method, and you may access the first error of a key with the state.errors object. If you want full access to the server-side error bag, you may use the rawErrors object. To determine if there are any errors, you may use the hasErrors boolean.

<x-splade-state>
<p v-if="state.hasError('name')" v-text="state.errors.name" />
 
<div v-for="(errorArray, key) in state.rawErrors">
...
</div>
 
<div v-if="state.hasErrors">
Whoops!
</div>
</x-splade-state>

Flash Data

Similar to validation errors, there is a hasFlash method and a flash object to access flashed data.

<x-splade-state>
<p v-if="state.hasFlash('message')" v-text="state.flash.message" />
</x-splade-state>

Shared Data

The same applies to shared data:

<x-splade-state>
<p v-if="state.hasShared('publicKey')" v-text="state.shared.publicKey" />
</x-splade-state>