Inertia

https://inertiajs.com/docs/v3/
Admin
Inertia is a modern approach to building server-driven web applications that creates single-page...
Tokens:194,806
Snippets:1,675
Trust Score:9.5
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install NProgress library

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

Installs the NProgress library, which is used as an example for custom page loading indicators.

```bash
npm install nprogress
```

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

### Manual setup for Vue with createInertiaApp

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Manual Inertia setup for Vue 3. Provides resolve and setup callbacks: resolve uses import.meta.glob to load .vue page components, and setup mounts the app with the Inertia plugin. Prevents auto SSR handling, so a separate SSR entry point is needed.

```javascript
import { createApp, h } from 'vue'
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) })
            .use(plugin)
            .mount(el)
    },
})
```

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

### Build and start SSR server for production

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

For production, build both bundles and start the SSR server. The command `php artisan inertia:start-ssr` starts the SSR server.

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

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

### router.on('start')

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

Registers a listener for the 'start' event, which fires when a request to the server has started. Useful for displaying loading indicators.

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

### Description
Registers a listener for the 'start' event, which fires when a request to the server has started. Useful for displaying loading indicators.

### Method
Event registration

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

### Parameters
- **callback** (function) - Required - The event listener. Receives an event object with `event.detail.visit.url`.

### Request Example
```js
import { router } from "@inertiajs/vue3";

router.on("start", (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});
```

### Response
No response value.

### Notes
- The event is not cancelable.
- Available in Vue, React, and Svelte adapters.
```

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

### Manual setup for React with createInertiaApp

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Manual Inertia setup for React. Uses import.meta.glob to resolve .jsx page components and createRoot to render the app. Requires a separate SSR entry point since the manual setup prevents auto SSR handling.

```javascript
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

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

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

### Install qs directly

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
```

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

### Manual setup for Svelte with createInertiaApp

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Manual Inertia setup for Svelte. Resolves .svelte page components via import.meta.glob and mounts the app using Svelte's mount function. Requires a separate SSR entry point because the manual setup disables auto SSR handling.

```javascript
import { createInertiaApp } from '@inertiajs/svelte'
import { mount } from 'svelte'

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

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

### Client-side hydration setup for Vue, React, and Svelte (update app.js)

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

Client-side hydration setup for Vue, React, and Svelte. Update app.js to use hydration instead of normal rendering so the framework can adopt server-rendered HTML and make it interactive. Note the duplicate import lines in the Vue and Svelte examples (createApp/createSSRApp and mount/hydrate) are from the source; the examples show the intended hydration approach for each framework.

```javascript
import { createApp, h } from 'vue'
import { createSSRApp, h } from 'vue'
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) }) 
    createSSRApp({ render: () => h(App, props) }) 
        .use(plugin)
        .mount(el)
    },
})

```

```javascript
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'
import { hydrateRoot } from 'react-dom/client'

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

```

```javascript
import { createInertiaApp } from '@inertiajs/svelte'
import { mount } from 'svelte'
import { hydrate, mount } from 'svelte'

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

```

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

### Install @inertiajs/react v3

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

Install the React client-side adapter for Inertia.js v3.0.

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

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

### Install Vue and Vite plugin

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Install Vue and its Vite plugin as prerequisites for using Inertia with Vue.

```bash
npm install vue @vitejs/plugin-vue

```

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

### Install React and Vite plugin

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Install React, ReactDOM, and the React Vite plugin as prerequisites for using Inertia with React.

```bash
npm install react react-dom @vitejs/plugin-react

```

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

### Install @inertiajs/svelte v3

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

Install the Svelte client-side adapter for Inertia.js v3.0.

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

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

### Install Inertia Svelte adapter and Vite plugin

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Install the Inertia client-side adapter for Svelte and the Vite plugin.

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

```

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

### Install Inertia React adapter and Vite plugin

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Install the Inertia client-side adapter for React and the Vite plugin.

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

```

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

### Install Svelte and Vite plugin

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Install Svelte and its Vite plugin as prerequisites for using Inertia with Svelte.

```bash
npm install svelte @sveltejs/vite-plugin-svelte

```

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

### Install @inertiajs/vue3 v3

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

Install the Vue 3 client-side adapter for Inertia.js v3.0.

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

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

### start event - Svelte

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

Registers a 'start' event listener in Svelte to log the URL of a visit that has started. The event fires when a request to the server has started and is useful for displaying loading indicators.

```javascript
import { router } from "@inertiajs/svelte";

router.on("start", (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});
```

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

### Install Inertia Vue3 adapter and Vite plugin

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Install the Inertia client-side adapter for Vue 3 and the Vite plugin.

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

```

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

### Start the SSR server with Artisan command

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

Starts the SSR server in production after building both client-side and server-side bundles. During development, the Vite plugin handles SSR automatically.

```php
php artisan inertia:start-ssr

```

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

### start event - React

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

Registers a 'start' event listener in React to log the URL of a visit that has started. The event fires when a request to the server has started and is useful for displaying loading indicators.

```javascript
import { router } from "@inertiajs/react";

router.on("start", (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});
```

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

### Install Inertia Laravel adapter with Composer

Source: https://inertiajs.com/docs/v3/installation/server-side-setup

Installs the Inertia server-side adapter for Laravel using Composer.

```bash
composer require inertiajs/inertia-laravel

```

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

### Register event listener with router.on()

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

Registers a listener for the 'start' event using the router.on() method. The event object contains a detail.visit.url property. The three blocks show the same example for Vue, React, and Svelte adapters.

```javascript
import { router } from "@inertiajs/vue3";

router.on("start", (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});

```

```javascript
import { router } from "@inertiajs/react";

router.on("start", (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});

```

```javascript
import { router } from "@inertiajs/svelte";

router.on("start", (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});

```

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

### Deferred props response example

Source: https://inertiajs.com/docs/v3/core-concepts/the-protocol

Example of a full visit response with deferredProps, showing the default and sidebar groups. The client issues partial reloads per group to fetch the deferred data.

```json
{
  "component": "Posts/Index",
  "props": {
    "errors": {},
    "user": {
      "name": "Jonathan"
    }
  },
  "url": "/posts",
  "version": "6b16b94d7c51cbe5b1fa42aac98241d5",
  "deferredProps": {
    "default": ["comments", "analytics"],
    "sidebar": ["relatedPosts"]
  }
}
```

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

### Install @inertiajs/vite plugin

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

Install the @inertiajs/vite plugin, which is the recommended way to configure SSR. It handles SSR configuration automatically, including development mode SSR without a separate Node.js server.

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

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

### Webpack: Install Babel Dynamic Import Plugin

Source: https://inertiajs.com/docs/v3/advanced/code-splitting

Installs the Babel plugin for dynamic imports, required for Webpack code splitting.

```bash
npm install @babel/plugin-syntax-dynamic-import

```

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

### Merging props response example

Source: https://inertiajs.com/docs/v3/core-concepts/the-protocol

Example of a partial reload response with mergeProps, prependProps, deepMergeProps, and matchPropsOn. Shows how incoming data is combined with existing page data.

```json
{
  "component": "Feed/Index",
  "props": {
    "errors": {},
    "user": {
      "name": "Jonathan"
    },
    "posts": [
      {
        "id": 1,
        "title": "First Post"
      }
    ],
    "notifications": [
      {
        "id": 2,
        "message": "New comment"
      }
    ],
    "conversations": {
      "data": [
        {
          "id": 1,
          "title": "Support Chat",
          "participants": ["John", "Jane"]
        }
      ]
    }
  },
  "url": "/feed",
  "version": "6b16b94d7c51cbe5b1fa42aac98241d5",
  "mergeProps": ["posts"],
  "prependProps": ["notifications"],
  "deepMergeProps": ["conversations"],
  "matchPropsOn": ["posts.id", "notifications.id", "conversations.data.id"]
}
```

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

### Svelte: Combine prefetch strategies

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

Combines prefetch strategies by passing an array of values to the prefetch option. This example uses both 'mount' and 'hover'.

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

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

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

### Enable clustering with createServer

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

Pass the `cluster` option to `createServer` to start multiple Node servers on the same port, with requests handled by each thread in a round-robin fashion.

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

```

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

### React: Combine prefetch strategies

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

Combines prefetch strategies by passing an array of values to the prefetch prop. This example uses both 'mount' and 'hover'.

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

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

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

### router.visit with method option

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

Sets the HTTP method for a manual visit. The default is get, but you can specify post, put, patch, or delete.

```APIDOC
## router.visit(url, { method: "post" })

### Description
Sets the HTTP method for a manual visit. The default is get, but you can specify post, put, patch, or delete.

### Method
POST

### Endpoint
url (provided by user)

### Parameters
#### Options
- **method** (string) - Optional - The HTTP method to use: `get`, `post`, `put`, `patch`, or `delete`. Defaults to `get`.

### Request Example
```javascript
import { router } from "@inertiajs/vue3";
router.visit(url, { method: "post" });
```

### Response
No response body is returned; the visit triggers a page load.

### Error Handling
Uploading files via `put` or `patch` is not supported in Laravel. Use `post` with a `_method` field set to `put` or `patch` (form method spoofing).
```

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

### Listen to native inertia:start event

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

Listens for the native browser event 'inertia:start' using document.addEventListener(). The event name must be prefixed with 'inertia:'. The three blocks show the same example for Vue, React, and Svelte adapters.

```javascript
import { router } from "@inertiajs/vue3";

document.addEventListener("inertia:start", (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});

```

```javascript
import { router } from "@inertiajs/react";

document.addEventListener("inertia:start", (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});

```

```javascript
import { router } from "@inertiajs/svelte";

document.addEventListener("inertia:start", (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});

```

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

### Vue Form with events

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

Vue example of the `<Form>` component emitting all standard visit events: `before`, `start`, `progress`, `success`, `error`, `finish`, `cancel`, and `cancelToken`.

```Vue
<template>
  <Form
    action="/users"
    method="post"
    @before="handleBefore"
    @start="handleStart"
    @progress="handleProgress"
    @success="handleSuccess"
    @error="handleError"
    @finish="handleFinish"
    @cancel="handleCancel"
    @cancelToken="handleCancelToken"
  >
    <input type="text" name="name" />
    <button type="submit">Create User</button>
  </Form>
</template>

```

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

### Get All Errors in React

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

React example requesting all validation errors as arrays using withAllErrors(). By default, validation errors are simplified to strings (the first error message).

```javascript
const form = useForm("post", "/users", {
  name: "",
});

form.withAllErrors();

```

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

### router.visit() with all options (Vue, React, Svelte)

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

Programmatically initiate an Inertia visit using the router.visit() method. The example shows all available options, including method, data, replace, preserveState, preserveScroll, only, except, headers, errorBag, forceFormData, queryStringArrayFormat, async, showProgress, fresh, reset, preserveUrl, prefetch, preserveErrors, viewTransition, component, pageProps, and various event callbacks. The same options apply to all shortcut methods.

```javascript
import { router } from "@inertiajs/vue3";

router.visit(url, {
  method: "get",
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  except: [],
  headers: {},
  errorBag: null,
  forceFormData: false,
  queryStringArrayFormat: "brackets",
  async: false,
  showProgress: true,
  fresh: false,
  reset: [],
  preserveUrl: false,
  prefetch: false,
  preserveErrors: false,
  viewTransition: false,
  component: null,
  pageProps: null,
  onCancelToken: (cancelToken) => {},
  onCancel: () => {},
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onHttpException: (response) => {},
  onNetworkError: (error) => {},
  onFinish: (visit) => {},
  onPrefetching: () => {},
  onPrefetched: () => {},
});
```

```javascript
import { router } from "@inertiajs/react";

router.visit(url, {
  method: "get",
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  except: [],
  headers: {},
  errorBag: null,
  forceFormData: false,
  queryStringArrayFormat: "brackets",
  async: false,
  showProgress: true,
  fresh: false,
  reset: [],
  preserveUrl: false,
  prefetch: false,
  preserveErrors: false,
  viewTransition: false,
  component: null,
  pageProps: null,
  onCancelToken: (cancelToken) => {},
  onCancel: () => {},
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onHttpException: (response) => {},
  onNetworkError: (error) => {},
  onFinish: (visit) => {},
  onPrefetching: () => {},
  onPrefetched: () => {},
});
```

```javascript
import { router } from "@inertiajs/svelte";

router.visit(url, {
  method: "get",
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  except: [],
  headers: {},
  errorBag: null,
  forceFormData: false,
  queryStringArrayFormat: "brackets",
  async: false,
  showProgress: true,
  fresh: false,
  reset: [],
  preserveUrl: false,
  prefetch: false,
  preserveErrors: false,
  viewTransition: false,
  component: null,
  pageProps: null,
  onCancelToken: (cancelToken) => {},
  onCancel: () => {},
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onHttpException: (response) => {},
  onNetworkError: (error) => {},
  onFinish: (visit) => {},
  onPrefetching: () => {},
  onPrefetched: () => {},
});
```

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

### Vue: Combine prefetch strategies

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

Combines prefetch strategies by passing an array of values to the prefetch prop. This example uses both 'mount' and 'hover'.

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

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

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

### Get All Errors in Vue

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

Vue example requesting all validation errors as arrays using withAllErrors(). By default, validation errors are simplified to strings (the first error message).

```javascript
const form = useForm("post", "/users", {
  name: "",
}).withAllErrors();

```

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

### Basic useHttp usage in Vue, React, and Svelte

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

Basic usage of the useHttp hook in Vue, React, and Svelte. It accepts initial data and returns reactive state and methods for making HTTP requests. The example performs a GET request to /api/search and logs the response on success.

```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}
```

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

### Initialize Inertia app with React

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Minimal entry point to boot the Inertia app for React. The Vite plugin handles page resolution and mounting automatically.

```javascript
import { createInertiaApp } from '@inertiajs/react'

createInertiaApp()

```

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

### progress.start()

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

Begins the progress animation.

```APIDOC
## progress.start()

### Description
Begins the progress animation.

### Method
start

### Parameters
None

### Returns
None

### Example
```js
import { progress } from "@inertiajs/vue3";
progress.start();
```
```

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

### start event - Vue 3

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

Registers a 'start' event listener in Vue 3 to log the URL of a visit that has started. The event fires when a request to the server has started and is useful for displaying loading indicators.

```javascript
import { router } from "@inertiajs/vue3";

router.on("start", (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`);
});
```

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

### Initialize Inertia app with Svelte

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Minimal entry point to boot the Inertia app for Svelte. The Vite plugin handles page resolution and mounting automatically.

```javascript
import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp()

```

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

### router.post convenience method

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

Shows how to use the `post()` convenience method to send data directly as the second argument.

```APIDOC
## [POST] /users

### Description
Convenience method `post()` that accepts data as its second argument.

### Method
POST

### Endpoint
/users

### Parameters
#### Request Body
- **name** (string) - Required - The name of the user.
- **email** (string) - Required - The email of the user.

### Request Example
```json
{
  "name": "John Doe",
  "email": "john.doe@example.com"
}
```
```

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

### Install lodash-es directly

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

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

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

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

### Initialize Inertia app with Vue 3

Source: https://inertiajs.com/docs/v3/installation/client-side-setup

Minimal entry point to boot the Inertia app for Vue 3. The Vite plugin handles page resolution and mounting automatically.

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

createInertiaApp()

```

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

### React Form with all props and options

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

React example of the `<Form>` component with all available props and options, including `errorBag`, `queryStringArrayFormat`, `headers`, `transform`, `optimistic`, `invalidateCacheTags`, `disableWhileProcessing`, `cancelOnUnmount`, and the `options` object for visit configuration.

```React
<Form
  action="/profile"
  method="put"
  errorBag="profile"
  queryStringArrayFormat="indices"
  headers={{ "X-Custom-Header": "value" }}
  showProgress={false}
  transform={(data) => ({ ...data, timestamp: Date.now() })}
  optimistic={(props, data) => ({ ...props })}
  invalidateCacheTags={["users", "dashboard"]}
  disableWhileProcessing
  cancelOnUnmount
  options={{
    preserveScroll: true,
    preserveState: true,
    preserveUrl: true,
    replace: true,
    only: ["users", "flash"],
    except: ["secret"],
    reset: ["page"],
  }}
>
  <input type="text" name="name" />
  <button type="submit">Update</button>
</Form>

```

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

### Build SSR with Laravel Starter Kits

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

Build the SSR bundle when using Laravel Starter Kits. This command is provided by the starter kits and is required to enable Inertia SSR.

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

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

### Define SSR entry point for Vue, React, and Svelte (resources/js/ssr.js)

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

Custom SSR entry point for Vue, React, or Svelte using Inertia. The createServer callback sets up createInertiaApp with the appropriate render function and resolve hook. Note that Vue's setup uses createSSRApp, React uses ReactDOMServer.renderToString, and Svelte uses svelte/server's render. Be sure to include any plugins or mixins from app.js that need to run during SSR.

```javascript
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)
        },
    }),
)

```

```javascript
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} />,
    }),
)

```

```javascript
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 })
        },
    }),
)

```

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

### Pre-bind endpoint with http.post

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

Shows how to pre-bind the HTTP method and URL by passing them to useHttp, then call submit() without arguments. This unlocks real-time validation (see Precognition). The example uses the http instance and includes an onError callback.

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

```

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

### Show progress bar on Inertia start event

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

Adds a 'start' event listener that shows the progress bar when a new Inertia visit begins.

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

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

### Customize Inertia progress indicator with createInertiaApp progress options

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

Configure Inertia's default progress indicator by passing a `progress` object to `createInertiaApp()`. The `delay` option sets the delay before the progress bar appears (in milliseconds), `color` sets the bar color, `includeCSS` controls whether default NProgress styles are included, and `showSpinner` toggles the NProgress spinner. For applications with a Content Security Policy that restricts inline styles, you can pass a `nonce` to `createInertiaApp()` to permit the injected styles.

```javascript
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,
  },
  // ...
});
```

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

### Svelte: Register all event callbacks with router.post

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

Shows the complete set of per-visit event callbacks available in Inertia for Svelte, including onBefore, onStart, onProgress, onSuccess, onError, onHttpException, onNetworkError, onCancel, onFinish, onPrefetching, and onPrefetched. Use this as a reference for hooking into the visit lifecycle.

```javascript
import { router } from "@inertiajs/svelte";

router.post("/users", data, {
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onHttpException: (response) => {},
  onNetworkError: (error) => {},
  onCancel: () => {},
  onFinish: (visit) => {},
  onPrefetching: () => {},
  onPrefetched: () => {},
});
```

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

### useHttp convenience methods (object syntax)

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

Lists the convenience methods available on the useHttp instance: get, post, put, patch, delete, and submit. Each method returns a Promise that resolves with parsed JSON response data.

```javascript
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)

```

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

### Rescued deferred props response example

Source: https://inertiajs.com/docs/v3/core-concepts/the-protocol

Example of a response where a deferred prop was rescued, showing the rescuedProps array. The prop is omitted from props and the response remains a 200.

```json
{
  "component": "Users/Index",
  "props": {
    "errors": {}
  },
  "url": "/users",
  "version": "6b16b94d7c51cbe5b1fa42aac98241d5",
  "rescuedProps": ["permissions"]
}
```

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

### Validate fields with validate(), invalid(), and validating

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

Trigger field validation with validate(), check errors with invalid(), and show a validating indicator while a request is in progress. The Vue and Svelte examples use the backward-compatible useForm signature; the React example destructures the returned helpers.

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

const form = useForm("post", "/users", {
  name: "",
  email: "",
});
</script>

<template>
  <form @submit.prevent="form.submit()">
    <input v-model="form.name" @change="form.validate('name')" />
    <p v-if="form.invalid('name')">{{ form.errors.name }}</p>

    <input v-model="form.email" @change="form.validate('email')" />
    <p v-if="form.invalid('email')">{{ form.errors.email }}</p>

    <p v-if="form.validating">Validating...</p>

    <button type="submit">Create User</button>
  </form>
</template>

```

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

const { data, setData, submit, errors, validating, validate, invalid } = useForm(
  "post",
  "/users",
  {
    name: "",
    email: "",
  },
);

function handleSubmit(e) {
  e.preventDefault();
  submit();
}

return (
  <form onSubmit={handleSubmit}>
    <input
      value={data.name}
      onChange={(e) => setData("name", e.target.value)}
      onBlur={() => validate("name")}
    />
    {invalid("name") && <p>{errors.name}</p>}

    <input
      value={data.email}
      onChange={(e) => setData("email", e.target.value)}
      onBlur={() => validate("email")}
    />
    {invalid("email") && <p>{errors.email}</p>}

    {validating && <p>Validating...</p>}

    <button type="submit">Create User</button>
  </form>
);

```

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

const form = useForm('post', '/users', {
    name: '',
    email: '',
})
</script>

<form onsubmit={(e) => { e.preventDefault(); form.submit() }}>
    <input bind:value={form.name} onchange={() => form.validate('name')} />
    {#if form.invalid('name')}
        <p>{form.errors.name}</p>
    {/if}

    <input bind:value={form.email} onchange={() => form.validate('email')} />
    {#if form.invalid('email')}
        <p>{form.errors.email}</p>
    {/if}

    {#if form.validating}
        <p>Validating...</p>
    {/if}

    <button type="submit">Create User</button>
</form>

```

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

### Enable ensure_runtime_exists in config/inertia.php

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

Configuration to enable `ensure_runtime_exists`, which verifies the runtime binary exists before starting the SSR server. The command will exit with an error if the binary cannot be found.

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

```

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

### useForm submit methods (get, post, put, patch, delete)

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

Available submit methods on the form object: submit, get, post, put, patch, and delete. In React, delete is destructured as destroy. These methods accept the URL and optional visit options.

```javascript
form.submit(method, url, options);
form.get(url, options);
form.post(url, options);
form.put(url, options);
form.patch(url, options);
form.delete(url, options);
```

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

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

```javascript
form.submit(method, url, options);
form.get(url, options);
form.post(url, options);
form.put(url, options);
form.patch(url, options);
form.delete(url, options);
```

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

### Vue 3: Register all event callbacks with router.post

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

Shows the complete set of per-visit event callbacks available in Inertia for Vue 3, including onBefore, onStart, onProgress, onSuccess, onError, onHttpException, onNetworkError, onCancel, onFinish, onPrefetching, and onPrefetched. Use this as a reference for hooking into the visit lifecycle.

```javascript
import { router } from "@inertiajs/vue3";

router.post("/users", data, {
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onHttpException: (response) => {},
  onNetworkError: (error) => {},
  onCancel: () => {},
  onFinish: (visit) => {},
  onPrefetching: () => {},
  onPrefetched: () => {},
});
```

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

### Add data to a request with router.visit()

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

Shows how to use the `data` option with `router.visit()` to add data to a POST request. The same example is provided for Vue, React, and Svelte, each importing from their respective package.

```javascript
import { router } from "@inertiajs/vue3";

router.visit("/users", {
  method: "post",
  data: {
    name: "John Doe",
    email: "john.doe@example.com",
  },
});

```

```javascript
import { router } from "@inertiajs/react";

router.visit("/users", {
  method: "post",
  data: {
    name: "John Doe",
    email: "john.doe@example.com",
  },
});

```

```javascript
import { router } from "@inertiajs/svelte";

router.visit("/users", {
  method: "post",
  data: {
    name: "John Doe",
    email: "john.doe@example.com",
  },
});

```

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

### GET /health

Source: https://inertiajs.com/docs/v3/core-concepts/the-protocol

Health check endpoint for the SSR server.

```APIDOC
## GET /health

### Description
Returns the status of the SSR server process. Used to verify the process is running before dispatching a render.

### Method
GET

### Endpoint
/health

### Response
#### Success Response (200)
- **status** (string) - Always "OK".

#### Response Example
{"status":"OK"}
```

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

### Example Inertia Devtools entry JSON

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

Fully-populated entry for a standard navigation. Required fields must be emitted for the panel to function; optional fields may be null, {}, or omitted. Unknown fields are ignored by the extension.

```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"
}
```

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

### progress.isStarted()

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

Returns a boolean indicating whether the progress animation has started.

```APIDOC
## progress.isStarted()

### Description
Returns a boolean indicating whether the progress animation has started.

### Method
isStarted

### Parameters
None

### Returns
- **boolean** - `true` if the progress animation has started, otherwise `false`.

### Example
```js
import { progress } from "@inertiajs/vue3";
const started = progress.isStarted();
```
```

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

### prefetching

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

The prefetching event fires when the router starts prefetching a page. It is not cancelable.

```APIDOC
## prefetching

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

### Method
Event

### Event Name
prefetching

### Event Detail
- **visit** (object) - The visit object containing the URL being prefetched.

### Example
```js
import { router } from "@inertiajs/vue3";

router.on("prefetching", (event) => {
  console.log(`Prefetching ${event.detail.visit.url}`);
});
```
```

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

### Complete file upload example with useForm (Svelte)

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

A complete Svelte component using the Inertia form helper to upload a name and avatar file. It shows how to set the file input and display upload progress.

```html
<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>

```

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

### React: Register all event callbacks with router.post

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

Shows the complete set of per-visit event callbacks available in Inertia for React, including onBefore, onStart, onProgress, onSuccess, onError, onHttpException, onNetworkError, onCancel, onFinish, onPrefetching, and onPrefetched. Use this as a reference for hooking into the visit lifecycle.

```javascript
import { router } from "@inertiajs/react";

router.post("/users", data, {
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onHttpException: (response) => {},
  onNetworkError: (error) => {},
  onCancel: () => {},
  onFinish: (visit) => {},
  onPrefetching: () => {},
  onPrefetched: () => {},
});
```

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

### router.get

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

Performs a GET request with the `only` option to request a subset of props from the server.

```APIDOC
## router.get

### Description
Performs a GET request to the given URL with the specified data and options. The `only` option allows requesting a subset of props from the server on subsequent visits to the same page.

### Method
GET

### Endpoint
`/users`

### Parameters
#### Query Parameters
- **search** (string) - Optional - The search query to filter users.

#### Options
- **only** (array) - Optional - An array of prop keys to request from the server.

### Request Example
```js
router.get("/users", { search: "John" }, { only: ["users"] });
```
```
Tokens:
Raw