Should I use Laravel Jetstream with InertiaJS?

Image for post
Image for post
Immo Wegmann

Is this for me?

The Good Stuff

Sweet, Sweet Scaffolding

Managing State? No more.

public function index(Project $project)
{
$tasks = ProjectTask::where('project_id', $project->id)
->paginate(10);

return Inertia::render('Tasks/Index', compact('tasks', 'project'));
}
<template>
<div>
<h1>Tasks in {{ project.name }}</h1>
<div v-for="task in tasks" :key="task.id">
{{ task.name }}
</div>
</div>
</template>

<script>
export default {
name: 'TaskShow',
props: ['tasks', 'project']
}
</script>

Forget about Vue Router, use Inertia Link.

<inertia-link href="/">Home</inertia-link><inertia-link :href="route('projects.index').url()">Projects</inertia-link>
this.$inertia.visit(url)

Globally shared Data.

public function register()
{
Inertia::share('flash', function () {
return [
'success' => Session::get('success'),
'error' => Session::get('error'),
];
});
<div v-if="$page.flash.success" class="mx-auto max-w-7xl rounded text-white w-full my-5 p-3 bg-green-500 border border-green-600 shadow-sm">
{{ $page.flash.success }}
</div>

Things to Watch Out

Tailwind CSS is the default, no Bootstrap.

<button class="bg-green-500 hover:bg-green-400 py-5 px-2 text-white rounded shadow-md">Hello</button>
<template>
<input class="form-input p2 rounded-md shadow-sm" :value="value" @input="$emit('input', $event.target.value)" ref="input">
</template>
// how we use it
<jet-input v-model="something"/>

Jetstream Authentication Views are Blade.

protected function redirectTo($request)
{
// redirect to login if intertia request and session expired
if (! $request->expectsJson() && Request::inertia()) {
abort(409, '', ['X-Inertia-Location' => url()->route('login')]);
} else if (! $request->expectsJson()) {
return route('login');
}
}

Redirecting PUT/PATCH/DELETE requests, you need a 303.

this.$inertia.put(route('projects.tasks.update', {project: this.project.id, task: this.task.id}), this.form)
return redirect()->route('projects.tasks.index', compact('project'))
->setStatusCode(303);

Conclusion

Written by

Full Stack Web Dev // Certified AWS SA // I run a Web Dev Agency (nedex.io). Twitter @elsodev.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store