←Back

(using inertiajs/svelte 2.0.0 and inertiajs/laravel 1.0 versions)

Inertia, in my view, is somewhat of a replacement for an API, and is used to communicate between front-end and back-end.

From the official docs: Inertia.js - The Modern Monolith

“ Inertia is a new approach to building classic server-driven web apps. We call it the modern monolith. Inertia allows you to create fully client-side rendered, single-page apps, without the complexity that comes with modern SPAs. It does this by leveraging existing server-side patterns that you already love. Inertia has no client-side routing, nor does it require an API. Simply build controllers and page views like you've always done! Inertia works great with any backend framework, but it's fine-tuned for Laravel. “

in routes/web.php, you specify which page should be rendered when what url is visited, or alternatively, when inside a component you use e.g. router.post(’/url’, data) to send data to the back-end, web.php specifies which function from which back-end controller we should execute then.

Here, you can also specify if the route should be publically accessible, or be behind the auth middleware and only accessible to logged-in users (if you’re using Breeze for login)

Example below: the / (index) is accessible to everyone, but when you want to create, edit, delete mixes or share them with other users, a user should be logged in (so that we can attach his created data to his user_id, and make sure only this user sees the data.). This is done with the ‘middleware’/auth wrapper.

Route::get('/', [MixesController::class, 'index'])->name('home');

Route::middleware(['auth', 'verified'])->group(function () {
    Route::resource('mixes', MixesController::class);
    // Route::get('mixes', [MixesController::class, 'home'])->name('mixes');
    Route::get('mixes/create', [MixesController::class, 'create'], function () {
        return Inertia::render('Mixes/Add');
    })->name('mixes.create');
    Route::post('mixes', [MixesController::class, 'store'])->name('mixes');

    Route::get('mixes/edit/{id}', [MixesController::class, 'edit'])->name('mixes.edit');
    Route::post('mixes/{id}', [MixesController::class, 'update'])->name('mixes.update');
    Route::delete('mixes/delete/{id}', [MixesController::class, 'destroy']);
    Route::post('shares/accept/{id}', [SharesController::class, 'accept'])->name('shares.accept');
    Route::post('shares/decline/{id}', [SharesController::class, 'decline'])->name(
        'shares.decline'
    );
    Route::post('shares/send', [SharesController::class, 'send'])->name('shares.send');
});

The function in the PHP/Laravel controller (e.g. the index function in the MixesController for the first line), then might return an entire page with data (refer to Laravel notes), or e.g. a message like ‘record created succesfully’.

When we return an entire inertia page from Laravel, data we pass along (like mix, cuisines) is imported into the component like you would the regular props;

(depending on using runes mode or not):

    export let mixes;
    export let measures;
    export let cuisines;
    export let selectedCuisineId;
    export let is_own;
    export let show_favorites;
    export let search;
    export let pageNumber;

Or, in the newer runes mode;

    let { mix, errors, measures, cuisines } = $props();

Global props that are included on every page, are imported with the $page object;

    import { router, page, Link } from '@inertiajs/svelte';

Which data this should be, is defined in app/http/middleware/handleinertiarequests → public function share. If you used breeze for authentication, you’ll see here that every page gets the user object, so you have the user’s name on every component!

HandleInertiaRequests.php;