Coming from Inertia

A page is its own controller

An Inertia page is two things: a controller action that gathers props and calls Inertia::render(), and a JavaScript page that receives them. Every change goes back through another route and controller: a form posts, the controller validates and redirects back, and the page receives its props again.

A Nitro page is one class. Its public properties are the props, mount() is the controller action, and its methods are the actions on the page. There is no Nitro::render(): you route the class, and Nitro renders it.

The same page, both ways

A post with a comment form. In Inertia, two routes, two controllers and a page:

// routes/web.php
Route::get('/posts/{post}', [PostController::class, 'show']);
Route::post('/posts/{post}/comments', [CommentController::class, 'store']);

// app/Http/Controllers/PostController.php
class PostController extends Controller
{
    public function show(Post $post)
    {
        return Inertia::render('Posts/Show', [
            'post' => $post->only('id', 'title', 'body'),
        ]);
    }
}

// app/Http/Controllers/CommentController.php
class CommentController extends Controller
{
    public function store(Request $request, Post $post)
    {
        $request->validate(['comment' => 'required|max:1000']);
        $post->comments()->create(['body' => $request->comment, 'user_id' => auth()->id()]);

        return back();
    }
}

<script setup>
import { useForm } from '@inertiajs/vue3';

const props = defineProps({ post: Object });
const form = useForm({ comment: '' });

function submit() {
    form.post(`/posts/${props.post.id}/comments`, { onSuccess: () => form.reset() });
}
</script>

<template>
    <article>
        <h1>{{ post.title }}</h1>
        <p>{{ post.body }}</p>

        <form @submit.prevent="submit">
            <textarea v-model="form.comment"></textarea>
            <p v-if="form.errors.comment" class="error">{{ form.errors.comment }}</p>
            <button :disabled="form.processing">Comment</button>
        </form>
    </article>
</template>

In Nitro, one route and one class, with its view:

Route::nitro('/posts/{post}', Show::class)->name('posts.show');

<?php

namespace App\Nitro\Pages\Posts;

use App\Models\Post;
use Nitro\Attributes\Locked;
use Nitro\Attributes\Server;
use Nitro\Attributes\Title;
use Nitro\Attributes\Validate;
use Nitro\Attributes\View;
use Nitro\Component;

#[Title('Post')]
#[View(vue: 'posts/show')]
class Show extends Component
{
    #[Locked]
    public array $post = [];

    #[Validate('required|max:1000')]
    public string $comment = '';

    public function mount(Post $post): void
    {
        $this->post = $post->only('id', 'title', 'body');
    }

    #[Server]
    public function addComment(): void
    {
        $this->validate();
        Post::findOrFail($this->post['id'])->comments()->create(['body' => $this->comment, 'user_id' => auth()->id()]);
        $this->reset('comment');
    }
}

<template>
    <article>
        <h1>{{ post.title }}</h1>
        <p>{{ post.body }}</p>

        <form @submit.prevent="addComment()">
            <textarea v-model="comment"></textarea>
            <p v-if="errors.comment" class="error">{{ errors.comment[0] }}</p>
            <button :disabled="addComment.processing">Comment</button>
        </form>
    </article>
</template>

• No props to declare. The view reads the page's properties by their PHP names: post, comment, errors. v-model writes them.
• No form helper. The form's fields are properties, and addComment() is the submit. addComment.processing is what form.processing was, and errors holds the messages.
• No second route. #[Server] methods are called on the page itself, with its state signed by the server. #[Locked] keeps the browser from changing post.
• No redirect back. The page stays where it is: the call changes comment, and the view shows it.

The view could be Blade instead, with the same class: drop vue: from #[View]. Pages with Blade views run their browser methods without any framework at all, and a Blade page can place components with Vue, React, Solid or Svelte views side by side (see JavaScript views).

Inertia's features in Nitro

The server side:

The browser side:

Read more in Pages, Page data, Navigation, The page's head, Forms and validation, Server methods, Properties, Directives and Testing.

What Nitro adds

• Methods that run in the browser, written in PHP. A method without #[Server] is compiled to JavaScript and runs on a click with no request. In Inertia, that logic is written again in the page's JavaScript. See Methods.
• Server calls without routes. A #[Server] method is called from the view by name, with its arguments and its return value, and the page's state travels with it, signed. See Server methods.
• Validation as fields are left. #[Validate(onBlur: true)] checks a field on the server when the visitor leaves it, before the form is sent. See Forms and validation.
• Components, not only pages. A search box, a cart or a table is a component with its own state and methods, placed on any page. See Components.
• Stores. State shared between components, per tab or per request, with methods compiled like a component's. See Sharing state.
• Blade views that run in the browser. No framework needed for a page that doesn't want one; islands and server-made HTML for the parts that should stay on the server. See Islands and Server-made HTML.
• Mistakes fail the build. A browser method that queries the database, or a reserved name, is an error naming the file and line. See How Nitro works.

What is different

Some of Inertia's features have no counterpart in Nitro:

And some things work differently:

• Posting forms to routes. You can, but you don't need to: a #[Server] method replaces the route, the controller and the redirect back.
• One Vue app per page. Inertia mounts one app and swaps pages inside it. In Nitro each component with a Vue view is its own app; share state between them with stores, events or one Pinia (see Vue).
• A JavaScript view can't place Nitro components. Compose components from Blade: a Blade page or layout can hold several, whatever their views.

Next steps