Laravel Jetstream Inertia – Jetstream’s Inertia.js integration

Projects Inventory

2 months ago

Laravel Jetstream Inertia is a powerful integration that allows you to build modern single-page applications (SPAs) using Laravel as the backend and Inertia.js as the frontend framework. Inertia.js provides a simple way to create SPAs while leveraging existing server-side frameworks, enabling developers to build dynamic applications without the complexity of a traditional frontend framework like React or Vue.js.

Key Features

Single-Page Application Experience: Provides a seamless user experience with page transitions and dynamic content updates.

Server-Side Routing: Utilize Laravel’s routing capabilities directly, simplifying navigation and state management.
Blade Components: Leverage Laravel Blade components alongside Inertia.js for reusable UI elements.
No API Required: Inertia.js allows you to use server-side data directly in your components, eliminating the need to build a separate API.
Frontend Flexibility: Choose your preferred frontend framework (React, Vue.js, or Svelte) while maintaining a consistent backend with Laravel.

Installation

To get started with Laravel Jetstream using Inertia.js, follow these steps:

Create a New Laravel Project:If you don’t have a Laravel project yet, you can create one using Composer:

bash

composer create-project laravel/laravel your-project-name cd your-project-name

1
2

composer create-project laravel/laravel your-project-name
cd your-project-name
Install Jetstream:Use Composer to install Jetstream:

bash

composer require laravel/jetstream

1

composer require laravel/jetstream
Install Jetstream with Inertia:You can install Jetstream with Inertia by running the following command:

bash

php artisan jetstream:install inertia

1

php artisan jetstream:install inertia

This command will scaffold the necessary files for Inertia.js integration, including Vue components.
Install NPM Dependencies:After installing Jetstream, you’ll need to install the required NPM packages:

bash

npm install

1

npm install
Build the Assets:Compile your frontend assets using Laravel Mix:

bash

npm run dev

1

npm run dev

Basic Usage

Routing

With Inertia.js, you can define your routes in routes/web.php

. Here’s an example of a simple route that returns an Inertia view:

php

use Inertia\Inertia;

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth']);

use Inertia\Inertia;

Route::get('/dashboard', function () {

return Inertia::render('Dashboard');

})->middleware(['auth']);

Creating Vue Components

You can create Vue components in the resources/js/Pages directory. For example, create a Dashboard.vue component:

vue

<template>
    <div>
        <h1>Dashboard</h1>
        <p>Welcome to your dashboard!</p>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log('Dashboard component mounted');
    },
};
</script>

<style>
/* Add your styles here */
</style>

<div>

<h1>Dashboard</h1>

<p>Welcome to your dashboard!</p>

</div>

</template>

export default {

mounted() {

console.log('Dashboard component mounted');

};

</script>

<style>

/* Add your styles here */

</style>

Blade Templates

You can still use Blade templates in conjunction with Inertia.js. For example, in your resources/views/app.blade.php, you can include the Inertia app layout:

html

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title inertia>{{ config('app.name', 'Laravel') }}</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    @routes
    @vite(['resources/js/app.js'])
</head>
<body>
    @inertia
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title inertia>{{ config('app.name', 'Laravel') }}</title>

@routes

@vite(['resources/js/app.js'])

</head>

<body>

@inertia

</body>

</html>

Forms and Validation

Inertia.js supports server-side validation and error handling. For example, when submitting a form, you can handle validation in your controller:

php

use Illuminate\Http\Request;
use Inertia\Inertia;

Route::post('/submit', function (Request $request) {
    $request->validate([
        'name' => 'required|string|max:255',
    ]);

    // Handle form submission...

    return redirect()->back()->with('success', 'Form submitted successfully!');
});

use Illuminate\Http\Request;

use Inertia\Inertia;

Route::post('/submit', function (Request $request) {

$request->validate([

'name' => 'required|string|max:255',

]);

// Handle form submission...

return redirect()->back()->with('success', 'Form submitted successfully!');

});

You can display error messages and success notifications directly in your Vue components:

vue

<template>
    <div>
        <form @submit.prevent="submit">
            <input v-model="form.name" type="text" placeholder="Enter your name">
            <button type="submit">Submit</button>
        </form>

        <div v-if="errors.name">{{ errors.name[0] }}</div>
        <div v-if="success">{{ success }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name: '',
            },
            errors: {},
            success: '',
        };
    },
    methods: {
        submit() {
            this.$inertia.post('/submit', this.form)
                .then(response => {
                    this.success = response.data.success;
                })
                .catch(error => {
                    this.errors = error.response.data.errors;
                });
        },
    },
};
</script>

<div>

<button type="submit">Submit</button>

</form>

<div v-if="errors.name">{{ errors.name[0] }}</div>

<div v-if="success">{{ success }}</div>

</div>

</template>

export default {

data() {

return {

form: {

name: '',

errors: {},

success: '',

};

methods: {

submit() {

this.$inertia.post('/submit', this.form)

.then(response => {

this.success = response.data.success;

})

.catch(error => {

this.errors = error.response.data.errors;

});

};