Inertia.js

https://inertiajs.com/docs
Admin
Inertia.js is a modern approach for building classic server-driven web apps as single-page...
Tokens:76,444
Snippets:785
Trust Score:9.5
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Client-Side Adapters

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

Install the required client-side adapter for your specific framework.

```bash
npm install @inertiajs/vue3@^3.0
```

```bash
npm install @inertiajs/react@^3.0
```

```bash
npm install @inertiajs/svelte@^3.0
```

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

### Production Build and Start

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Commands to build production assets and start the SSR server.

```bash
npm run build
php artisan inertia:start-ssr
```

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

### router.on('start', callback)

Source: https://inertiajs.com/docs/v3/advanced/events

The 'start' event fires when a request to the server has officially started. This event is not cancelable and is typically used for displaying loading indicators.

```APIDOC
## router.on('start', callback)

### Description
Fires when a request to the server has started. Useful for triggering loading states.

### Callback Parameters
- **event** (object) - Contains details about the visit, including the target URL.

### Usage Example
```javascript
router.on('start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});
```
```

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

### Install NProgress

Source: https://inertiajs.com/docs/v3/advanced/progress-indicators

Install the NProgress library via npm.

```bash
npm install nprogress
```

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

### Performing HTTP requests with useHttp

Source: https://inertiajs.com/docs/v3/the-basics/http-requests

Examples of using the useHttp hook to handle reactive data and perform GET requests in different frameworks.

```vue
<script setup>
import { useHttp } from '@inertiajs/vue3'

const http = useHttp({
    query: '',
})

function search() {
    http.get('/api/search', {
        onSuccess: (response) => {
            console.log(response)
        },
    })
}
</script>

<template>
    <input v-model="http.query" @input="search" />
    <div v-if="http.processing">Searching...</div>
</template>
```

```jsx
import { useHttp } from '@inertiajs/react'

export default function Search() {
    const { data, setData, get, processing } = useHttp({
        query: '',
    })

    function search(e) {
        setData('query', e.target.value)
        get('/api/search', {
            onSuccess: (response) => {
                console.log(response)
            },
        })
    }

    return (
        <>
            <input value={data.query} onChange={search} />
            {processing && <div>Searching...</div>}
        </>
    )
}
```

```svelte
<script>
import { useHttp } from '@inertiajs/svelte'

const http = useHttp({
    query: '',
})

function search() {
    http.get('/api/search', {
        onSuccess: (response) => {
            console.log(response)
        },
    })
}
</script>

<input bind:value={http.query} oninput={search} />
{#if http.processing}
    <div>Searching...</div>
{/if}
```

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

### Install Vite Plugin

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

Optionally install the Vite plugin for simplified SSR and component resolution.

```bash
npm install @inertiajs/vite@^3.0
```

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

### Start the SSR server

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Command to initiate the SSR server after building client and server bundles.

```bash
php artisan inertia:start-ssr
```

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

### Run Development Server

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Start the Vite development server with automatic SSR support.

```bash
npm run dev
```

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

### Install qs Dependency

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

Install qs directly if your application imports it, as it is no longer a dependency of @inertiajs/core.

```bash
npm install qs
```

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

### Configure Start and Finish Listeners

Source: https://inertiajs.com/docs/v3/advanced/progress-indicators

Use router events to trigger NProgress start and finish methods.

```js
router.on("start", () => NProgress.start());
```

```js
router.on("finish", () => NProgress.done());
```

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

### Enable runtime existence check

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Configuration option to verify the existence of the runtime binary before starting the server.

```php
'ssr' => [
    'ensure_runtime_exists' => (bool) env('INERTIA_SSR_ENSURE_RUNTIME_EXISTS', false),
],
```

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

### Install Inertia Vite Plugin

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Install the required Vite plugin for Inertia SSR support.

```bash
npm install @inertiajs/vite
```

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

### Install Inertia core dependency

Source: https://inertiajs.com/docs/v3/advanced/typescript

Directly add the core package as a dependency to resolve module resolution issues.

```bash
pnpm add @inertiajs/core
```

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

### Enable SSR Clustering

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Start multiple Node servers on the same port using round-robin request handling by passing the cluster option to createServer.

```js
createServer(page =>
    createInertiaApp({
        // ...
    }),
    { cluster: true },
)
```

```jsx
createServer(page =>
    createInertiaApp({
        // ...
    }),
    { cluster: true },
)
```

```js
createServer(page =>
    createInertiaApp({
        // ...
    }),
    { cluster: true },
)
```

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

### Install lodash-es Dependency

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

Install lodash-es directly if your application imports it, as it has been replaced by es-toolkit.

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

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

### Configure Vite for SSR

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Examples for configuring the Inertia plugin in vite.config.js, including automatic detection, explicit options, and disabling SSR.

```javascript
import inertia from '@inertiajs/vite'
import laravel from 'laravel-vite-plugin'
import { defineConfig } from 'vite'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
        inertia(),
    ],
})
```

```javascript
inertia({
    ssr: {
        entry: 'resources/js/ssr.js',
        port: 13714,
        host: '127.0.0.1',
        cluster: true,
    },
})
```

```javascript
inertia({
    ssr: false,
})
```

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

### Fully-populated Inertia DevTools entry

Source: https://inertiajs.com/docs/v3/advanced/devtools-protocol

A complete example of the JSON structure required for an entry, including meta information, HTTP request/response data, and component details.

```json
{
    "__meta": {
        "id": "01JADEVTOOLS0000000000000",
        "tabUuid": "tab-abc",
        "batchId": null,
        "timestamp": "2026-07-09T10:00:00.000Z",
        "utime": 1783591200.123,
        "method": "GET",
        "url": "http://localhost/users",
        "component": "Users/Index",
        "requestType": "navigate",
        "status": 200,
        "redirectLocation": null,
        "serverTimingMs": 12.5,
        "visitId": "visit-1"
    },
    "http": {
        "requestHeaders": { "x-inertia": "true" },
        "responseHeaders": { "content-type": "application/json" },
        "requestBody": { "status": "empty" },
        "responseBody": {
            "status": "present",
            "value": {
                "component": "Users/Index",
                "props": { "name": "Alice" },
                "flash": { "message": "User created" }
            }
        }
    },
    "props": {
        "name": { "shared": false },
        "errors": { "inertiaType": "always", "shared": true, "shareSource": { "file": "Middleware.php", "line": 72 } }
    },
    "propValues": { "name": "Alice", "errors": {} },
    "route": {
        "name": "users.index",
        "uri": "/users",
        "action": "App\\Http\\Controllers\\UsersController@index",
        "actionSource": { "file": "UsersController.php", "line": 15 }
    },
    "renderSource": { "file": "UsersController.php", "line": 17 },
    "componentPath": "resources/js/Pages/Users/Index.vue"
}
```

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

### Define layout with defineOptions in Vue

Source: https://inertiajs.com/docs/v3/the-basics/layouts

Use defineOptions within script setup to define a layout in Vue 3.3+.

```vue
<script setup>
import Layout from './Layout'
defineOptions({ layout: Layout })
</script>
```

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

### usePoll(interval, options, config)

Source: https://inertiajs.com/docs/v3/data-props/polling

Initializes polling at a specified interval. Returns an object containing start, stop, and a reactive polling status.

```APIDOC
## usePoll(interval, options, config)

### Description
Initializes a polling mechanism that automatically reloads data from the server at a set interval. It automatically cleans up when the component is unmounted.

### Parameters
- **interval** (number) - Required - The polling interval in milliseconds.
- **options** (object|function) - Optional - Request options (same as router.reload) or a function returning these options.
- **config** (object) - Optional - Configuration object, such as { autoStart: boolean }.

### Returns
- **start** (function) - Manually starts the polling.
- **stop** (function) - Manually stops the polling.
- **polling** (boolean) - A reactive value indicating if the poll is currently active.
```

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

### Build SSR with Laravel Starter Kits

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Command to build the SSR bundle when using Laravel Starter Kits.

```bash
npm run build:ssr
```

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

### Manual Polling Control

Source: https://inertiajs.com/docs/v3/data-props/polling

Use start and stop methods for manual control. Set autoStart: false to prevent the poll from starting automatically on mount.

```vue
<script setup>
import { usePoll } from '@inertiajs/vue3'

const { start, stop } = usePoll(2000, {}, {
    autoStart: false,
})
</script>

<template>
    <button @click="start">Start polling</button>
    <button @click="stop">Stop polling</button>
</template>
```

```jsx
import { usePoll } from '@inertiajs/react'

export default () => {
    const { start, stop } = usePoll(2000, {}, {
        autoStart: false,
    })

    return (
        <div>
            <button onClick={start}>Start polling</button>
            <button onClick={stop}>Stop polling</button>
        </div>
    )
}
```

```js
import { usePoll } from '@inertiajs/svelte'

const { start, stop } = usePoll(2000, {}, {
    autoStart: false,
})
```

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

### Prefetch on Mount

Source: https://inertiajs.com/docs/v3/data-props/prefetching

Initiate data prefetching immediately when the component mounts.

```vue
import { Link } from '@inertiajs/vue3'

<Link href="/users" prefetch="mount">Users</Link>
```

```jsx
import { Link } from "@inertiajs/react";

<Link href="/users" prefetch="mount">
  Users
</Link>;
```

```svelte
import { inertia } from '@inertiajs/svelte'

<a href="/users" use:inertia={{ prefetch: 'mount' }}>Users</a>
```

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

### GET /_inertia/devtools/entries/{id}

Source: https://inertiajs.com/docs/v3/advanced/devtools-protocol

Retrieves a single specific entry by its unique identifier.

```APIDOC
## GET /_inertia/devtools/entries/{id}

### Description
Returns a single entry as a JSON object. If the provided ID is unknown, the server returns a 404 status code.

### Method
GET

### Endpoint
/_inertia/devtools/entries/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the entry to retrieve.

### Response
#### Success Response (200)
- **entry** (object) - The requested entry object containing metadata, http details, props, and route information.
```

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

### Configure SSR Entry Point

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Create a dedicated SSR entry point to handle server-side rendering logic for your framework.

```js
import { createInertiaApp } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import { createSSRApp, h } from 'vue'
import { renderToString } from 'vue/server-renderer'

createServer(page =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: name => {
            const pages = import.meta.glob('./Pages/**/*.vue')
            return pages[`./Pages/${name}.vue`]()
        },
        setup({ App, props, plugin }) {
            return createSSRApp({
                render: () => h(App, props),
            }).use(plugin)
        },
    }),
)
```

```jsx
import { createInertiaApp } from '@inertiajs/react'
import createServer from '@inertiajs/react/server'
import ReactDOMServer from 'react-dom/server'

createServer(page =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        resolve: name => {
            const pages = import.meta.glob('./Pages/**/*.jsx')
            return pages[`./Pages/${name}.jsx`]()
        },
        setup: ({ App, props }) => <App {...props} />,
    }),
)
```

```js
import { createInertiaApp } from '@inertiajs/svelte'
import createServer from '@inertiajs/svelte/server'
import { render } from 'svelte/server'

createServer(page =>
    createInertiaApp({
        page,
        resolve: name => {
            const pages = import.meta.glob('./Pages/**/*.svelte')
            return pages[`./Pages/${name}.svelte`]()
        },
        setup({ App, props }) {
            return render(App, { props })
        },
    }),
)
```

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

### GET /_inertia/devtools/entries

Source: https://inertiajs.com/docs/v3/advanced/devtools-protocol

Retrieves a list of entries, optionally filtered by component or request type.

```APIDOC
## GET /_inertia/devtools/entries

### Description
Returns a JSON array of entries, ordered from newest to oldest. This endpoint supports optional query filters for tooling that lists tab history.

### Method
GET

### Endpoint
/_inertia/devtools/entries

### Parameters
#### Query Parameters
- **component** (string) - Optional - Exact component name to filter by.
- **type** (string) - Optional - Comma-separated list of requestTypes to keep.
- **exclude** (string) - Optional - Comma-separated list of requestTypes to drop.
- **offset** (integer) - Optional - Number of entries to skip.
- **limit** (integer) - Optional - Maximum number of entries to return.

### Response
#### Success Response (200)
- **entries** (array) - A list of entry objects.
```

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

### Import NProgress and Router

Source: https://inertiajs.com/docs/v3/advanced/progress-indicators

Import the NProgress library and the Inertia router for your specific framework.

```js
import NProgress from "nprogress";
import { router } from "@inertiajs/vue3";
```

```js
import NProgress from "nprogress";
import { router } from "@inertiajs/react";
```

```js
import NProgress from "nprogress";
import { router } from "@inertiajs/svelte";
```

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

### Configure global View Transitions

Source: https://inertiajs.com/docs/v3/the-basics/view-transitions

Enable view transitions for all visits by setting the visitOptions default during app initialization.

```js
import { createInertiaApp } from "@inertiajs/vue3";

createInertiaApp({
  // ...
  defaults: {
    visitOptions: (href, options) => {
      return { viewTransition: true };
    },
  },
});
```

```jsx
import { createInertiaApp } from "@inertiajs/react";

createInertiaApp({
  // ...
  defaults: {
    visitOptions: (href, options) => {
      return { viewTransition: true };
    },
  },
});
```

```js
import { createInertiaApp } from "@inertiajs/svelte";

createInertiaApp({
  // ...
  defaults: {
    visitOptions: (href, options) => {
      return { viewTransition: true };
    },
  },
});
```

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

### Shared Props JSON Response

Source: https://inertiajs.com/docs/v3/the-basics/instant-visits

Example of the sharedProps metadata key included in the Inertia page response.

```json
{
  "component": "Dashboard",
  "props": { "auth": { "user": "..." }, "stats": { ... } },
  "sharedProps": ["auth"]
}
```

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

### router.prefetch(url, options, prefetchOptions)

Source: https://inertiajs.com/docs/v3/data-props/prefetching

Initiates a programmatic prefetch request for a given URL. The signature is similar to router.visit with an additional argument for prefetch configuration.

```APIDOC
## router.prefetch(url, options, prefetchOptions)

### Description
Prefetches data for a specified URL. If cacheFor is not provided, it defaults to 30 seconds.

### Parameters
- **url** (string) - Required - The URL to prefetch.
- **options** (object) - Optional - Visit options identical to router.visit (e.g., method, data).
- **prefetchOptions** (object) - Optional - Configuration for the prefetch, such as { cacheFor: string }.
```

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

### Configure prefetch with visit options

Source: https://inertiajs.com/docs/v3/data-props/prefetching

Pass visit options to the usePrefetch hook to differentiate request configurations for the same URL.

```js
import { usePrefetch } from "@inertiajs/vue3";

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
  headers: { "X-Custom-Header": "value" },
});
```

```js
import { usePrefetch } from "@inertiajs/react";

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
  headers: { "X-Custom-Header": "value" },
});
```

```js
import { usePrefetch } from "@inertiajs/svelte";

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
  headers: { "X-Custom-Header": "value" },
});
```

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

### Handling HTTP Request Responses

Source: https://inertiajs.com/docs/v3/the-basics/http-requests

Example of handling request errors using the onError callback within the options object.

```js
const response = await http.post('/api/comments', {
    onError: (errors) => {
        console.log(errors)
    },
})
```

```js
const response = await post('/api/comments', {
    onError: (errors) => {
        console.log(errors)
    },
})
```

```js
const response = await http.post('/api/comments', {
    onError: (errors) => {
        console.log(errors)
    },
})
```

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

### Preserve Fragment with Link Component

Source: https://inertiajs.com/docs/v3/the-basics/redirects

When using the Link component, fragments are automatically preserved. This example shows how to link to a section with a fragment.

```vue
import { Link } from '@inertiajs/vue3'

<Link href="/article/old-slug#section">View section</Link>
```

```jsx
import { Link } from "@inertiajs/react";

<Link href="/article/old-slug#section">View section</Link>
```

```svelte
import { Link } from '@inertiajs/svelte'

<Link href="/article/old-slug#section">View section</Link>
```

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

### Implement Custom Metadata Provider

Source: https://inertiajs.com/docs/v3/data-props/infinite-scroll

Create a class implementing ProvidesScrollMetadata to integrate with third-party libraries like Fractal.

```php
use League
actal\Resource\Collection;

class FractalScrollMetadata implements ProvidesScrollMetadata
{
    public function __construct(protected Collection $resource) {}
    public function getPageName(): string {}
    public function getPreviousPage(): int|string|null {}
    public function getNextPage(): int|string|null {}
    public function getCurrentPage(): int|string|null {}
}
```

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

### Using Custom Property Classes

Source: https://inertiajs.com/docs/v3/the-basics/responses

Shows how to instantiate and pass a custom property class to the Inertia render method.

```php
Inertia::render('Profile', [
    'user' => $user,
    'avatar' => new UserAvatar($user, 128),
]);
```

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

### Define a default layout

Source: https://inertiajs.com/docs/v3/the-basics/layouts

Sets a global layout for all pages using the layout option in createInertiaApp.

```js
import Layout from './Layout'

createInertiaApp({
    layout: () => Layout,
    // ...
})
```

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

### Define an Inertia Page Component

Source: https://inertiajs.com/docs/v3/the-basics/pages

Create a page component that accepts data as props. These examples demonstrate the structure for Vue, React, and Svelte.

```vue
<script setup>
import Layout from "./Layout";
import { Head } from "@inertiajs/vue3";

defineProps({ user: Object });
</script>

<template>
  <Layout>
    <Head title="Welcome" />
    <h1>Welcome</h1>
    <p>Hello {{ user.name }}, welcome to your first Inertia app!</p>
  </Layout>
</template>
```

```jsx
import Layout from "./Layout";
import { Head } from "@inertiajs/react";

export default function Welcome({ user }) {
  return (
    <Layout>
      <Head title="Welcome" />
      <h1>Welcome</h1>
      <p>Hello {user.name}, welcome to your first Inertia app!</p>
    </Layout>
  );
}
```

```svelte
<script>
    import Layout from './Layout.svelte'

    let { user } = $props()
</script>

<svelte:head>
    <title>Welcome</title>
</svelte:head>

<Layout>
    <h1>Welcome</h1>
    <p>Hello {user.name}, welcome to your first Inertia app!</p>
</Layout>
```

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

### Implement file upload with form helper

Source: https://inertiajs.com/docs/v3/the-basics/file-uploads

Use the useForm helper to manage form state and track upload progress during file submissions.

```vue
<script setup>
import { useForm } from "@inertiajs/vue3";

const form = useForm({
  name: null,
  avatar: null,
});

function submit() {
  form.post("/users");
}
</script>

<template>
  <form @submit.prevent="submit">
    <input type="text" v-model="form.name" />
    <input type="file" @input="form.avatar = $event.target.files[0]" />
    <progress v-if="form.progress" :value="form.progress.percentage" max="100">
      {{ form.progress.percentage }}%
    </progress>
    <button type="submit">Submit</button>
  </form>
</template>
```

```jsx
import { useForm } from "@inertiajs/react";

const { data, setData, post, progress } = useForm({
  name: null,
  avatar: null,
});

function submit(e) {
  e.preventDefault();
  post("/users");
}

return (
  <form onSubmit={submit}>
    <input
      type="text"
      value={data.name}
      onChange={(e) => setData("name", e.target.value)}
    />
    <input type="file" onChange={(e) => setData("avatar", e.target.files[0])} />
    {progress && (
      <progress value={progress.percentage} max="100">
        {progress.percentage}%
      </progress>
    )}
    <button type="submit">Submit</button>
  </form>
);
```

```svelte
<script>
    import { useForm } from '@inertiajs/svelte'

    const form = useForm({
        name: null,
        avatar: null,
    })

    function submit(e) {
        e.preventDefault()
        form.post('/users')
    }
</script>

<form onsubmit={submit}>
    <input type="text" bind:value={form.name} />
    <input type="file" oninput={e => form.avatar = e.target.files[0]} />
    {#if form.progress}
        <progress value={form.progress.percentage} max="100">
            {form.progress.percentage}%
        </progress>
    {/if}
    <button type="submit">Submit</button>
</form>
```

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

### Displaying Validation Errors in Frontend Components

Source: https://inertiajs.com/docs/v3/the-basics/validation

Examples of binding form inputs and conditionally rendering validation error messages in Vue, React, and Svelte.

```vue
<script setup>
import { reactive } from "vue";
import { router } from "@inertiajs/vue3";

defineProps({ errors: Object });

const form = reactive({
  first_name: null,
  last_name: null,
  email: null,
});

function submit() {
  router.post("/users", form);
}
</script>

<template>
  <form @submit.prevent="submit">
    <label for="first_name">First name:</label>
    <input id="first_name" v-model="form.first_name" />
    <div v-if="errors.first_name">{{ errors.first_name }}</div>
    <label for="last_name">Last name:</label>
    <input id="last_name" v-model="form.last_name" />
    <div v-if="errors.last_name">{{ errors.last_name }}</div>
    <label for="email">Email:</label>
    <input id="email" v-model="form.email" />
    <div v-if="errors.email">{{ errors.email }}</div>
    <button type="submit">Submit</button>
  </form>
</template>
```

```jsx
import { useState } from "react";
import { router, usePage } from "@inertiajs/react";

export default function Edit() {
  const { errors } = usePage().props;

  const [values, setValues] = useState({
    first_name: null,
    last_name: null,
    email: null,
  });

  function handleChange(e) {
    setValues((values) => ({
      ...values,
      [e.target.id]: e.target.value,
    }));
  }

  function handleSubmit(e) {
    e.preventDefault();
    router.post("/users", values);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="first_name">First name:</label>
      <input
        id="first_name"
        value={values.first_name}
        onChange={handleChange}
      />
      {errors.first_name && <div>{errors.first_name}</div>}
      <label htmlFor="last_name">Last name:</label>
      <input id="last_name" value={values.last_name} onChange={handleChange} />
      {errors.last_name && <div>{errors.last_name}</div>}
      <label htmlFor="email">Email:</label>
      <input id="email" value={values.email} onChange={handleChange} />
      {errors.email && <div>{errors.email}</div>}
      <button type="submit">Submit</button>
    </form>
  );
}
```

```svelte
<script>
    import { router } from '@inertiajs/svelte'

    let { errors = {} } = $props()

    let values = {
        first_name: null,
        last_name: null,
        email: null,
    }

    function handleSubmit() {
        router.post('/users', values)
    }
</script>

<form onsubmit={(e) => { e.preventDefault(); handleSubmit() }}>
    <label for="first_name">First name:</label>
    <input id="first_name" bind:value={values.first_name}>
    {#if errors.first_name}<div>{errors.first_name}</div>{/if}

    <label for="last_name">Last name:</label>
    <input id="last_name" bind:value={values.last_name}>
    {#if errors.last_name}<div>{errors.last_name}</div>{/if}

    <label for="email">Email:</label>
    <input id="email" bind:value={values.email}>
    {#if errors.email}<div>{errors.email}</div>{/if}

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

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

### usePrefetch(options)

Source: https://inertiajs.com/docs/v3/data-props/prefetching

A hook to track the prefetch state for the current page, providing status information and cache management.

```APIDOC
## usePrefetch(options)

### Description
Returns the current prefetch state for the page. Allows passing visit options to differentiate request configurations.

### Returns
- **lastUpdatedAt** (Date|null) - The timestamp of the last update.
- **isPrefetching** (boolean) - Whether the page is currently being prefetched.
- **isPrefetched** (boolean) - Whether the page has been prefetched.
- **flush** (function) - A method to clear the cache for the current page.
```

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

### Implement ProvidesInertiaProperties Interface

Source: https://inertiajs.com/docs/v3/the-basics/responses

Define a class that implements the ProvidesInertiaProperties interface to return a structured array of props based on the RenderContext.

```php
use App
Models
User;
use Illuminate\Container\Attributes\CurrentUser;
use Inertia\RenderContext;
use Inertia\ProvidesInertiaProperties;

class UserPermissions implements ProvidesInertiaProperties
{
    public function __construct(#[CurrentUser] protected User $user)
    {
        //
    }

    public function toInertiaProperties(RenderContext $context): array
    {
        return [
            'canEdit' => $this->user->can('edit'),
            'canDelete' => $this->user->can('delete'),
            'canPublish' => $this->user->can('publish'),
            'isAdmin' => $this->user->hasRole('admin'),
        ];
    }
}
```

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

### Handle Inertia Redirects in Controller

Source: https://inertiajs.com/docs/v3/the-basics/redirects

When creating or updating resources, return a redirect response to a GET endpoint. Inertia automatically handles the redirect and updates the page.

```php
class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            'users' => User::all(),
        ]);
    }

    public function store(Request $request)
    {
        User::create(
            $request->validate([
                'name' => ['required', 'max:50'],
                'email' => ['required', 'max:50', 'email'],
            ])
        );

        return to_route('users.index');
    }
}
```

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

### Republish Configuration

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

Republish the Inertia configuration file to apply v3 structural changes.

```bash
php artisan vendor:publish --provider="Inertia\ServiceProvider" --force
```

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

### Disable SSR in test base class

Source: https://inertiajs.com/docs/v3/advanced/testing

Call Inertia::disableSsr() within the setUp method of a test base class to disable SSR globally for tests.

```php
use Inertia\Inertia;

abstract class TestCase extends BaseTestCase
{
    protected function setUp(): void
    {
        parent::setUp();

        Inertia::disableSsr();
    }
}
```

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

### Configure usePoll concurrency mode to rest

Source: https://inertiajs.com/docs/v3/data-props/polling

Sets the polling mode to 'rest', ensuring requests do not overlap by waiting for the previous request to finish before starting the next interval.

```js
import { usePoll } from '@inertiajs/vue3'

usePoll(2000, {}, {
    mode: 'rest',
})
```

```jsx
import { usePoll } from '@inertiajs/react'

usePoll(2000, {}, {
    mode: 'rest',
})
```

```js
import { usePoll } from '@inertiajs/svelte'

usePoll(2000, {}, {
    mode: 'rest',
})
```

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

### Configure DevTools Environment Variables

Source: https://inertiajs.com/docs/v3/advanced/devtools

Enable DevTools and reference the defined gate using environment variables.

```env
INERTIA_DEVTOOLS_ENABLED=true
INERTIA_DEVTOOLS_GATE=viewInertiaDevTools
```

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

### Create a once prop

Source: https://inertiajs.com/docs/v3/data-props/once-props

Use the Inertia::once method with a callback to define data that should be cached by the client.

```php
return Inertia::render('Billing', [
    'plans' => Inertia::once(fn () => Plan::all()),
]);
```

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

### Use ProvidesInertiaProperties at Nested Levels

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

Classes implementing the ProvidesInertiaProperties interface are now supported at any nesting level.

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

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

### Configure Default Progress Indicator

Source: https://inertiajs.com/docs/v3/advanced/progress-indicators

Customize the NProgress-based indicator by passing a configuration object to the progress property in createInertiaApp.

```js
createInertiaApp({
  progress: {
    // The delay after which the progress bar will appear, in milliseconds...
    delay: 250,
    // The color of the progress bar...
    color: "#29d",
    // Whether to include the default NProgress styles...
    includeCSS: true,
    // Whether the NProgress spinner will be shown...
    showSpinner: false,
  },
  // ...
});
```

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

### Configure Wayfinder for Inertia

Source: https://inertiajs.com/docs/v3/the-basics/instant-visits

Enable component generation in the Wayfinder configuration file.

```php
return [
    'generate' => [
        'inertia' => [
            'component' => true,
        ],
    ],
];
```

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

### Apply optimistic updates to router visits

Source: https://inertiajs.com/docs/v3/the-basics/optimistic-updates

Chain the optimistic method before a router visit to apply partial prop updates immediately.

```js
import { router } from '@inertiajs/vue3'

router.optimistic((props) => ({
    post: {
        ...props.post,
        likes: props.post.likes + 1,
    },
})).post(`/posts/${post.id}/like`)
```

```js
import { router } from '@inertiajs/react'

router.optimistic((props) => ({
    post: {
        ...props.post,
        likes: props.post.likes + 1,
    },
})).post(`/posts/${post.id}/like`)
```

```js
import { router } from '@inertiajs/svelte'

router.optimistic((props) => ({
    post: {
        ...props.post,
        likes: props.post.likes + 1,
    },
})).post(`/posts/${post.id}/like`)
```

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

### Share once props globally

Source: https://inertiajs.com/docs/v3/data-props/once-props

Use Inertia::once or shareOnce to share data globally that should only be evaluated once.

```php
Inertia::share('countries', Inertia::once(fn () => Country::all()));
```

```php
Inertia::shareOnce('countries', fn () => Country::all());
```

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

### HTTP Convenience Methods

Source: https://inertiajs.com/docs/v3/the-basics/http-requests

Standard methods for dispatching HTTP requests across different frameworks.

```js
http.get(url, options)
http.post(url, options)
http.put(url, options)
http.patch(url, options)
http.delete(url, options)
http.submit(method, url, options)
```

```js
const { get, post, put, patch, delete: destroy, submit } = useHttp({ ... })

get(url, options)
post(url, options)
put(url, options)
patch(url, options)
destroy(url, options)
submit(method, url, options)
```

```js
http.get(url, options)
http.post(url, options)
http.put(url, options)
http.patch(url, options)
http.delete(url, options)
http.submit(method, url, options)
```

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

### Implementing ProvidesInertiaProperty Interface

Source: https://inertiajs.com/docs/v3/the-basics/responses

Defines a custom class that implements the ProvidesInertiaProperty interface to transform data into an Inertia property.

```php
use Inertia\PropertyContext;
use Inertia\ProvidesInertiaProperty;

class UserAvatar implements ProvidesInertiaProperty
{
    public function __construct(protected User $user, protected int $size = 64)
    {
        //
    }

    public function toInertiaProperty(PropertyContext $context): mixed
    {
        return $this->user->avatar
            ? Storage::url($this->user->avatar)
            : "https://ui-avatars.com/api/?name={$this->user->name}&size={$this->size}";
    }
}
```

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

### Assign custom keys to once props

Source: https://inertiajs.com/docs/v3/data-props/once-props

Use the as() method to share data across multiple pages using a consistent key, ensuring the prop is resolved only once.

```php
// Team member list...
return Inertia::render('Team/Index', [
    'memberRoles' => Inertia::once(fn () => Role::all())->as('roles'),
]);

// Invite form...
return Inertia::render('Team/Invite', [
    'availableRoles' => Inertia::once(fn () => Role::all())->as('roles'),
]);
```

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

### Prefetch data programmatically

Source: https://inertiajs.com/docs/v3/data-props/prefetching

Use router.prefetch to initiate data fetching with optional cache duration settings.

```js
router.prefetch("/users", { method: "get", data: { page: 2 } });

router.prefetch(
  "/users",
  { method: "get", data: { page: 2 } },
  { cacheFor: "1m" },
);
```

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

### Configure Loading Buffer for WhenVisible

Source: https://inertiajs.com/docs/v3/data-props/load-when-visible

Use the buffer prop to trigger data loading a specified number of pixels before the element enters the viewport.

```vue
<script setup>
import { WhenVisible } from "@inertiajs/vue3";
</script>

<template>
  <WhenVisible data="permissions" :buffer="500">
    <template #fallback>
      <div>Loading...</div>
    </template>

    <div v-for="permission in permissions">
      <!-- ... -->
    </div>
  </WhenVisible>
</template>
```

```jsx
import { WhenVisible } from "@inertiajs/react";

export default () => (
  <WhenVisible
    data="permissions"
    buffer={500}
    fallback={() => <div>Loading...</div>}
  >
    <PermissionsChildComponent />
  </WhenVisible>
);
```

```svelte
<script>
    import { WhenVisible } from '@inertiajs/svelte'

    let { permissions } = $props()
</script>

<WhenVisible data="permissions" buffer={500}>
    {#snippet fallback()}
        <div>Loading...</div>
    {/snippet}

    {#each permissions as permission}
        <!-- ... -->
    {/each}
</WhenVisible>
```

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

### Customize Scroll Configuration

Source: https://inertiajs.com/docs/v3/data-props/infinite-scroll

Override the default data wrapper key or provide custom metadata resolution for non-standard pagination.

```php
// Customize the data wrapper key (defaults to 'data')...
Inertia::scroll($customPaginatedData, wrapper: 'items');

// Provide custom metadata resolution...
Inertia::scroll($data, metadata: $metadataProvider);
```

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

### Combine Prefetch Strategies

Source: https://inertiajs.com/docs/v3/data-props/prefetching

Use multiple prefetch strategies simultaneously by passing an array of values to the prefetch prop.

```vue
import { Link } from '@inertiajs/vue3'

<Link href="/users" :prefetch="['mount', 'hover']">Users</Link>
```

```jsx
import { Link } from "@inertiajs/react";

<Link href="/users" prefetch={["mount", "hover"]}>
  Users
</Link>;
```

```svelte
import { inertia } from '@inertiajs/svelte'

<a href="/users" use:inertia={{ prefetch: ['mount', 'hover'] }}>Users</a>
```

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

### Include NProgress Styles

Source: https://inertiajs.com/docs/v3/advanced/progress-indicators

Add the NProgress CSS file to your project via CDN.

```html
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css"
/>
```

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

### Configure SSR runtime

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Configuration setting in config/inertia.php to define the runtime binary for the SSR server.

```php
'ssr' => [
    'runtime' => env('INERTIA_SSR_RUNTIME', 'node'),
],
```

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

### router.on('prefetching', callback)

Source: https://inertiajs.com/docs/v3/advanced/events

Registers a listener for the prefetching event, which fires when the router begins prefetching a page. This event is not cancelable.

```APIDOC
## router.on('prefetching', callback)

### Description
Fires when the router starts prefetching a page. This event is not cancelable.

### Parameters
- **event** (Object) - The event object containing details about the visit, accessible via `event.detail.visit.url`.
```

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

### Configure global title callback

Source: https://inertiajs.com/docs/v3/the-basics/title-and-meta

Use the title callback in createInertiaApp to globally format page titles.

```js
createInertiaApp({
  title: (title) => `${title} - My App`,
  // ...
});
```

```js
createInertiaApp({
  title: (title, page) => `${title} - ${page.props.appName}`,
  // ...
});
```

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

### Chain flash with back

Source: https://inertiajs.com/docs/v3/data-props/flash-data

Flash data can be chained directly with the back method for concise controller responses.

```php
return Inertia::flash('newUserId', $user->id)->back();
```

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

### Implement Client-Side Hydration

Source: https://inertiajs.com/docs/v3/advanced/server-side-rendering

Update your client-side entry point to use hydration, allowing the framework to attach to server-rendered HTML.

```js
import { createApp, h } from 'vue' // [!code --]
import { createSSRApp, h } from 'vue' // [!code ++]
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue')
        return pages[`./Pages/${name}.vue`]()
    },
    setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) }) // [!code --]
    createSSRApp({ render: () => h(App, props) }) // [!code ++]
        .use(plugin)
        .mount(el)
    },
})
```

```js
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client' // [!code --]
import { hydrateRoot } from 'react-dom/client' // [!code ++]

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.jsx')
        return pages[`./Pages/${name}.jsx`]()
    },
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />) // [!code --]
        hydrateRoot(el, <App {...props} />) // [!code ++]
    },
})
```

```js
import { createInertiaApp } from '@inertiajs/svelte'
import { mount } from 'svelte' // [!code --]
import { hydrate, mount } from 'svelte' // [!code ++]

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.svelte')
        return pages[`./Pages/${name}.svelte`]()
    },
    setup({ el, App, props }) {
        mount(App, { target: el, props }) // [!code --]
        if (el.dataset.serverRendered === 'true') { // [!code ++:5]
            hydrate(App, { target: el, props })
        } else {
            mount(App, { target: el, props })
        }
    },
})
```

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

### Implement Custom Loading Indicator with NProgress

Source: https://inertiajs.com/docs/v3/advanced/progress-indicators

Configures NProgress to trigger after a 250ms delay, updating progress based on event details and handling completion, interruption, or cancellation states.

```Vue
import NProgress from "nprogress";
import { router } from "@inertiajs/vue3";

let timeout = null;

router.on("start", () => {
  timeout = setTimeout(() => NProgress.start(), 250);
});

router.on("progress", (event) => {
  if (NProgress.isStarted() && event.detail.progress.percentage) {
    NProgress.set((event.detail.progress.percentage / 100) * 0.9);
  }
});

router.on("finish", (event) => {
  clearTimeout(timeout);

  if (!NProgress.isStarted()) {
    return;
  }

  if (event.detail.visit.completed) {
    NProgress.done();
  } else if (event.detail.visit.interrupted) {
    NProgress.set(0);
  } else if (event.detail.visit.cancelled) {
    NProgress.done();
    NProgress.remove();
  }
});
```

```React
import NProgress from "nprogress";
import { router } from "@inertiajs/react";

let timeout = null;

router.on("start", () => {
  timeout = setTimeout(() => NProgress.start(), 250);
});

router.on("progress", (event) => {
  if (NProgress.isStarted() && event.detail.progress.percentage) {
    NProgress.set((event.detail.progress.percentage / 100) * 0.9);
  }
});

router.on("finish", (event) => {
  clearTimeout(timeout);

  if (!NProgress.isStarted()) {
    return;
  }

  if (event.detail.visit.completed) {
    NProgress.done();
  } else if (event.detail.visit.interrupted) {
    NProgress.set(0);
  } else if (event.detail.visit.cancelled) {
    NProgress.done();
    NProgress.remove();
  }
});
```

```Svelte
import NProgress from "nprogress";
import { router } from "@inertiajs/svelte";

let timeout = null;

router.on("start", () => {
  timeout = setTimeout(() => NProgress.start(), 250);
});

router.on("progress", (event) => {
  if (NProgress.isStarted() && event.detail.progress.percentage) {
    NProgress.set((event.detail.progress.percentage / 100) * 0.9);
  }
});

router.on("finish", (event) => {
  clearTimeout(timeout);

  if (!NProgress.isStarted()) {
    return;
  }

  if (event.detail.visit.completed) {
    NProgress.done();
  } else if (event.detail.visit.interrupted) {
    NProgress.set(0);
  } else if (event.detail.visit.cancelled) {
    NProgress.done();
    NProgress.remove();
  }
});
```

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

### Configure cacheFor with Link and inertia components

Source: https://inertiajs.com/docs/v3/data-props/prefetching

Define fresh and stale durations for prefetched links across different framework implementations.

```vue
import { Link } from '@inertiajs/vue3'

<Link href="/users" prefetch :cacheFor="['30s', '1m']">Users</Link>
```

```jsx
import { Link } from "@inertiajs/react";

<Link href="/users" prefetch cacheFor={["30s", "1m"]}>
  Users
</Link>;
```

```svelte
import { inertia } from '@inertiajs/svelte'

<a href="/users" use:inertia={{ prefetch: true, cacheFor: ['30s', '1m'] }}>Users</a>
```

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

### Configure pnpm hoisting

Source: https://inertiajs.com/docs/v3/advanced/typescript

Add this to your .npmrc file to resolve module augmentation issues with pnpm.

```ini
public-hoist-pattern[]=@inertiajs/core
```

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

### Define shareOnce in middleware

Source: https://inertiajs.com/docs/v3/data-props/once-props

Implement the shareOnce method within the HandleInertiaRequests middleware to merge custom once props.

```php
class HandleInertiaRequests extends Middleware
{
    public function shareOnce(Request $request): array
    {
        return array_merge(parent::shareOnce($request), [
            'countries' => fn () => Country::all(),
        ]);
    }
}
```

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

### Instant Visits via Link Component

Source: https://inertiajs.com/docs/v3/the-basics/instant-visits

Use the component prop on the Link component to trigger an instant visit. Ensure the target component can render with only shared props initially.

```vue
import { Link } from '@inertiajs/vue3'

<Link href="/dashboard" component="Dashboard">Dashboard</Link>
```

```jsx
import { Link } from "@inertiajs/react";

<Link href="/dashboard" component="Dashboard">
  Dashboard
</Link>;
```

```svelte
import { inertia, Link } from '@inertiajs/svelte'

<a href="/dashboard" use:inertia={{ component: 'Dashboard' }}>Dashboard</a>

<Link href="/dashboard" component="Dashboard">Dashboard</Link>
```

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

### Apply Custom Metadata Provider

Source: https://inertiajs.com/docs/v3/data-props/infinite-scroll

Pass the metadata provider instance or a callback directly to the scroll function.

```php
// Using an instance directly
Inertia::scroll($data, metadata: new FractalScrollMetadata($data));

// Using a callback
Inertia::scroll(
    fn() => $this->transformData($data),
    metadata: fn($data) => new FractalScrollMetadata($data)
);
```
Tokens:
Raw