Inertia

https://inertiajs.com/docs/v3/getting-started
Admin
Inertia is a modern framework for building server-driven single-page applications without the...
Tokens:3,518
Snippets:42
Trust Score:9.5
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install qs Dependency

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

The 'qs' package is no longer a dependency of '@inertiajs/core'. If your application imports 'qs', you should install it directly.

```bash
npm install qs
```

--------------------------------

### Install lodash-es Dependency

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

The 'lodash-es' package has been replaced with 'es-toolkit' in '@inertiajs/core'. If your application imports 'lodash-es', install it directly.

```bash
npm install lodash-es
```

--------------------------------

### Implement ProvidesInertiaProperties Interface

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

Illustrates how to use classes implementing the ProvidesInertiaProperties interface within a nested Inertia render structure.

```php
return Inertia::render('Dashboard', [
    'auth' => [
        new AuthProps,
        'team' => 'Inertia',
    ],
]);
```

--------------------------------

### Implement Inertia Blade Components

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

New Blade components <x-inertia::head> and <x-inertia::app> are now available as alternatives to @inertiaHead and @inertia directives, improving SSR title handling.

```blade
<html>
    <head>
        @vite('resources/js/app.js')
        <x-inertia::head>
            <title>{{ config('app.name') }}</title>
        </x-inertia::head>
    </head>
    <body>
        <x-inertia::app />
    </body>
</html>
```

--------------------------------

### Target Nested Props with Dot Notation

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

Shows how to perform a partial reload on the client side by targeting a specific nested property using dot-notation syntax.

```javascript
router.reload({ only: ['auth.notifications'] })
```

--------------------------------

### Replace router.cancel() with router.cancelAll()

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

The 'router.cancel()' method has been replaced by 'router.cancelAll()'. 'cancelAll()' cancels all request types (synchronous, asynchronous, and prefetch) by default. Options can be passed to limit cancellation to specific request types.

```javascript
// Before (v2) — only cancelled sync requests
router.cancel()

// After (v3) — cancels all request types
router.cancelAll()

// To match v2 behavior (sync only)...
router.cancelAll({ async: false, prefetch: false })
```

--------------------------------

### Define Nested Inertia Props with Closures

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

Demonstrates how to use Inertia::defer and Inertia::optional within nested arrays and closures in a PHP controller. These helpers allow for lazy-loading and conditional prop resolution at any depth.

```php
return Inertia::render('Dashboard', [
    'auth' => fn () => [
        'user' => Auth::user(),
        'notifications' => Inertia::defer(fn () => Auth::user()->unreadNotifications),
        'invoices' => Inertia::optional(fn () => Auth::user()->invoices),
    ],
]);
```

--------------------------------

### Handle HTTP and Network Errors Per Visit

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

Inertia.js v3 introduces 'onHttpException' and 'onNetworkError' callbacks for handling specific visit errors. Returning 'false' from 'onHttpException' or calling 'event.preventDefault()' on the global 'httpException' event prevents navigation to the error page.

```javascript
router.post('/users', data, {
    onHttpException: (response) => { ... },
    onNetworkError: (error) => { ... },
})
```

```javascript
router.post('/users', data, {
    onHttpException: (response) => {
        // Handle the error without navigating
        return false
    },
})
```

--------------------------------

### Update Global Event Listeners

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

Global events 'invalid' and 'exception' have been renamed to 'httpException' and 'networkError' respectively for better clarity. Update your event listeners accordingly.

```javascript
// Before (v2)
router.on('invalid', (event) => { ... })
router.on('exception', (event) => { ... })

// After (v3)
router.on('httpException', (event) => { ... })
router.on('networkError', (event) => { ... })
```

--------------------------------

### Replace LazyProp with Inertia::optional

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

The LazyProp class and Inertia::lazy method have been removed in v3. Use Inertia::optional as a direct replacement for lazy-loaded props.

```php
// Before (v2)
return Inertia::render('Users/Index', [
    'users' => Inertia::lazy(fn () => User::all()),
]);

// After (v3)
return Inertia::render('Users/Index', [
    'users' => Inertia::optional(fn () => User::all()),
]);
```

--------------------------------

### Configure Inertia App without Future Options

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

The 'future' configuration namespace has been removed in Inertia.js v3. All four future options are now always enabled and no longer configurable. Remove the 'future' block from your 'createInertiaApp' configuration.

```javascript
// Before (v2)
createInertiaApp({
    defaults: {
        future: {
            preserveEqualProps: true,
            useDataInertiaHeadAttribute: true,
            useDialogForErrorModal: true,
            useScriptElementForInitialPage: true,
        },
    },
})

// After (v3) - just remove the `future` block
createInertiaApp({
    // ...
})
```

--------------------------------

### Restructure Laravel Inertia Configuration

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

The inertia.php configuration file has been updated to nest page-related settings under a 'pages' key and simplify the 'testing' section.

```php
// Before (v2) - config/inertia.php
'testing' => [
    'ensure_pages_exist' => true,
    'page_paths' => [resource_path('js/Pages')],
    'page_extensions' => ['js', 'jsx', 'svelte', 'ts', 'tsx', 'vue'],
],

// After (v3) - config/inertia.php
'pages' => [
    'ensure_pages_exist' => false,
    'paths' => [resource_path('js/Pages')],
    'extensions' => ['js', 'jsx', 'svelte', 'ts', 'tsx', 'vue'],
],

'testing' => [
    'ensure_pages_exist' => true,
];
```

--------------------------------

### Use Progress Object for Progress Indicator

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

The named exports 'hideProgress()' and 'revealProgress()' have been removed from Inertia.js v3. Use the 'progress' object directly to control the progress indicator.

```javascript
import { progress } from '@inertiajs/vue3'

progress.hide()
progress.reveal()
```

--------------------------------

### Update Inertia Head Element Attribute

Source: https://inertiajs.com/docs/v3/getting-started/upgrade-guide

The 'inertia' attribute on head elements in your root Blade template has been renamed to 'data-inertia'. Update any elements using the 'inertia' attribute to 'data-inertia'.

```html
<!-- Before (v2) -->
<title inertia>My Website</title>

<!-- After (v3) -->
<title data-inertia>My Website</title>
```
Tokens:
Raw