Inertia.js lets you quickly build modern single-page React, Vue, and Svelte apps using classic server-side routing and controllers.
Laravel Data works excellent with Inertia.
You can pass a complete data object to an Inertia response:
return Inertia::render('Song', SongsData::from($song));
##Lazy properties
This package supports lazy properties, which can be manually included or excluded.
Inertia has a similar concept called lazy data evaluation, where some properties wrapped in a closure only get evaluated and included in the response when explicitly asked.
This package can output specific properties as Inertia lazy props as such:
class SongData extends Data
{
public function __construct(
public Lazy|string $title,
public Lazy|string $artist,
) {
}
public static function fromModel(Song $song): self
{
return new self(
Lazy::inertia(fn() => $song->title),
Lazy::closure(fn() => $song->artist)
);
}
}
We provide two kinds of lazy properties:
- Lazy::inertia() Never included on first visit, optionally included on partial reloads
- Lazy::closure() Always included on first visit, optionally included on partial reloads
Now within your JavaScript code, you can include the properties as such:
router.reload((url, {
only: ['title'],
});
##Auto lazy Inertia properties
We already saw earlier that the package can automatically make properties Lazy, the same can be done for Inertia properties.
It is possible to rewrite the previous example as follows:
use Spatie\LaravelData\Attributes\AutoClosureLazy;use Spatie\LaravelData\Attributes\AutoInertiaLazy;
class SongData extends Data
{
public function __construct(
#[AutoInertiaLazy]
public Lazy|string $title,
#[AutoClosureLazy]
public Lazy|string $artist,
) {
}
}
If all the properties of a class should be either Inertia or closure lazy, you can use the attributes on the class level:
#[AutoInertiaLazy]
class SongData extends Data
{
public function __construct(
public Lazy|string $title,
public Lazy|string $artist,
) {
}
}