Inertia.js

https://inertiajs.com/docs/v2/
Admin
Inertia.js is a new approach to building modern server-driven web applications, enabling client-side...
Tokens:148,833
Snippets:1,238
Trust Score:9.5
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install Inertia React adapter

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

Install the Inertia client-side adapter for React.

```bash
npm install @inertiajs/react

```

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

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

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

Registers a listener for the 'start' event, which fires when a request to the server has started. This event is useful for displaying loading indicators. The 'start' event is not cancelable.

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

### Description
Registers a listener for the `start` event, which fires when a request to the server has started. This event is useful for displaying loading indicators. The `start` event is not cancelable.

### Method
`router.on`

### Parameters
- **eventName** (string) - Required - The name of the event to listen for, which is `'start'`.
- **callback** (function) - Required - A function that receives the event object. The event object has a `detail.visit.url` property containing the URL of the visit.

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

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

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

### Install NProgress library

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

Install the NProgress library using npm.

```bash
npm install nprogress

```

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

### Install Inertia.js v2 client-side adapters

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

Install the client-side adapter for Vue, React, or Svelte. Each command installs the v2.0 version of the corresponding adapter.

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

```

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

```

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

```

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

### Install Inertia Svelte adapter

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

Install the Inertia client-side adapter for Svelte.

```bash
npm install @inertiajs/svelte

```

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

### Install React and Vite plugin

Source: https://inertiajs.com/docs/v2/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

```

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

### React SSR entry point

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

Complete example of an SSR entry point for React, using createInertiaApp and createServer.

```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', { eager: true })
            return pages[`./Pages/${name}.jsx`]
        },
        setup: ({ App, props }) => <App {...props} />,
    }),
)
```

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

### Install Inertia Vue3 adapter

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

Install the Inertia client-side adapter for Vue 3.

```bash
npm install @inertiajs/vue3

```

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

### Install Vue and Vite plugin

Source: https://inertiajs.com/docs/v2/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 Svelte and Vite plugin

Source: https://inertiajs.com/docs/v2/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

```

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

### Start Inertia SSR server with Bun runtime

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

Use the '--runtime' option to switch from the default Node.js runtime to Bun.

```bash
php artisan inertia:start-ssr --runtime=bun

```

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

### Svelte SSR entry point

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

Complete example of an SSR entry point for Svelte, using createInertiaApp and createServer.

```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', { eager: true })
            return pages[`./Pages/${name}.svelte`]
        },
        setup({ App, props }) {
            return render(App, { props })
        },
    }),
)
```

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

### File upload example with Svelte useForm (legacy syntax)

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

Complete file upload example using the Svelte form helper with legacy event syntax (on:submit|preventDefault and on:input). Includes name and avatar inputs, displays upload progress via $form.progress, and submits with $form.post('/users').

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

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

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

<form on:submit|preventDefault={submit}>
    <input type="text" bind:value={$form.name} />
    <input type="file" on:input={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>

```

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

### Manual removal with router.on() - Svelte

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

Registers a 'start' event listener using Inertia's router helper and stores the returned callback. Invoking the callback removes the listener. This example uses Svelte.

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

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

// Remove the listener...
removeStartEventListener()

```

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

### Install Inertia Laravel adapter with Composer

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

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

```bash
composer require inertiajs/inertia-laravel

```

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

### Vue SSR entry point

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

Complete example of an SSR entry point for Vue 3, using createInertiaApp and createServer.

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

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

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

### File upload example with Svelte useForm (modern syntax)

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

Complete file upload example using the Svelte form helper with modern event syntax (onsubmit and oninput). Includes name and avatar inputs, displays upload progress via $form.progress, and submits with $form.post('/users').

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

```

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

### Add start event listener

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

Add a 'start' event listener to show the progress bar when a new Inertia visit begins.

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

```

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

### File upload example with React useForm

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

Complete file upload example using the React form helper. Includes name and avatar inputs, displays upload progress via the progress object, and submits with post('/users').

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

```

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

### Start Inertia SSR server

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

Run the Node-based Inertia SSR server with 'php artisan inertia:start-ssr'.

```bash
php artisan inertia:start-ssr

```

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

### usePoll(interval, options?, pollOptions?)

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

Starts polling the server at the given interval. Accepts an interval in milliseconds, optional router.reload options, and optional poll options like autoStart and keepAlive. Returns an object with start and stop methods.

```APIDOC
## [usePoll] [usePoll(interval, options?, pollOptions?)]

### Description
Starts polling the server for new information on the current page at the specified interval. Automatically stops when the component is unmounted. Accepts additional router.reload options and poll options.

### Method
usePoll

### Endpoint
usePoll(interval, options?, pollOptions?)

### Parameters
#### Path Parameters
- **interval** (number) - Required - The polling interval in milliseconds.

#### Query Parameters
- **options** (object) - Optional - Additional router.reload options (e.g., onStart, onFinish).
- **pollOptions** (object) - Optional - Polling options: autoStart (boolean) and keepAlive (boolean).

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

const { start, stop } = usePoll(2000, {
    onStart() {
        console.log('Polling request started')
    },
    onFinish() {
        console.log('Polling request finished')
    }
}, {
    autoStart: false,
    keepAlive: true
})
```

### Response
#### Success Response (200)
- **start** (function) - Manually starts polling.
- **stop** (function) - Manually stops polling.

#### Response Example
```js
const { start, stop } = usePoll(2000)
```
```

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

### Install @babel/plugin-syntax-dynamic-import

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

Installs the Babel plugin required for dynamic imports in Webpack. This is a prerequisite for code splitting with Webpack.

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

```

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

### Manual start/stop with autoStart: false

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

Manual control of polling using the start and stop methods returned by usePoll. The autoStart: false option prevents polling from starting automatically when the component is mounted.

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

```

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

```

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

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

```

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

### File upload example with Vue 3 useForm

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

Complete file upload example using the Vue 3 form helper. Includes a name text input and an avatar file input, and displays upload progress via form.progress. Submits with form.post('/users').

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

```

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

### Defining a macro for scroll

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

Shows how to define a macro in the AppServiceProvider's boot method to avoid repeating setup. The macro is then used in controllers.

```php
// In your AppServiceProvider's boot method
Inertia::macro('fractalScroll', function (Collection $data) {
    return Inertia::scroll(
        $data,
        metadata: fn(Collection $data) => new FractalScrollMetadata($data)
    );
});

// Then use it in your controllers
return Inertia::render('Users/Index', [
    'users' => Inertia::fractalScroll($fractalCollection)
]);
```

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

### Prefetch on click (Svelte)

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

Starts prefetching on `mousedown` instead of hover by setting `prefetch: 'click'` in the `use:inertia` action.

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

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

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

### usePrefetch with visit options in React

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

Passes visit options to usePrefetch to differentiate request configurations for the same URL. Example includes custom headers.

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

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

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

### usePrefetch with visit options in Svelte

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

Passes visit options to usePrefetch to differentiate request configurations for the same URL. Example includes custom headers.

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

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

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

### router.on('prefetching')

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

Registers a callback for the 'prefetching' event, which fires when the router starts prefetching a page.

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

### Description
Registers a callback that fires when the router starts prefetching a page.

### Method
on

### Parameters
- **event** (object) - The event object. Contains `event.detail.visit.url`. Not cancelable.

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

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

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

### Create first Inertia response

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

Example controller action that renders an Inertia page with data from an Event model.

```php
use Inertia\Inertia;

class EventsController extends Controller
{
    public function show(Event $event)
    {
        return Inertia::render('Event/Show', [
            'event' => $event->only(
                'id',
                'title',
                'start_date',
                'description',
            ),
        ]);
    }
}

```

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

### usePrefetch with visit options in Vue 3

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

Passes visit options to usePrefetch to differentiate request configurations for the same URL. Example includes custom headers.

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

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

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

### Vue: Using template refs with InfiniteScroll

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

Vue 3 script setup example. Uses refs for tableHeader, tableFooter, and tableBody, passed as functions to items-element, start-element, and end-element props.

```vue
<script setup>
import { ref } from 'vue'
const tableHeader = ref()
const tableFooter = ref()
const tableBody = ref()
</script>

<template>
    <InfiniteScroll
        data="users"
        :items-element="() => tableBody"
        :start-element="() => tableHeader"
        :end-element="() => tableFooter"
    >
        <table>
            <thead ref="tableHeader">
                <tr><th>Name</th></tr>
            </thead>
            <tbody ref="tableBody">
                <tr v-for="user in users.data" :key="user.id">
                    <td>{{ user.name }}</td>
                </tr>
            </tbody>
            <tfoot ref="tableFooter">
                <tr><td>Footer</td></tr>
            </tfoot>
        </table>
    </InfiniteScroll>
</template>
```

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

### Automatic removal with onMount - Svelte

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

Registers a 'start' event listener inside onMount. The callback returned by router.on() is returned from the onMount callback, so it is called when the component unmounts.

```javascript
import { router } from '@inertiajs/svelte'
import { onMount } from 'svelte'

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

```

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

### Build SSR with Laravel Starter Kit

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

Run this command to build the SSR bundle when using Laravel Starter Kits.

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

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

### Manual removal with router.on() - React

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

Registers a 'start' event listener using Inertia's router helper and stores the returned callback. Invoking the callback removes the listener. This example uses React.

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

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

// Remove the listener...
removeStartEventListener()

```

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

### Manual removal with router.on() - Vue 3

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

Registers a 'start' event listener using Inertia's router helper and stores the returned callback. Invoking the callback removes the listener. This example uses Vue 3.

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

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

// Remove the listener...
removeStartEventListener()

```

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

### Retrieve Inertia props with inertiaProps method

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

Shows how to use the inertiaProps method to get all props, a specific prop, or a nested prop using dot notation.

```php
$response = $this->get('/podcasts/41');

// Returns all props...
$response->inertiaProps();

// Returns a specific prop...
$response->inertiaProps('podcast');

// Returns a nested prop using "dot" notation...
$response->inertiaProps('podcast.id');
```

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

### Build client and server bundles

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

Run 'npm run build' to build both client-side and server-side bundles.

```bash
npm run build

```

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

### React: Link with method prop

Source: https://inertiajs.com/docs/v2/the-basics/links

Use the `method` prop on the Inertia `Link` component to make POST, PUT, PATCH, or DELETE requests. The default is GET. This example shows a POST logout link rendered as a button.

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

<Link href="/logout" method="post" as="button">Logout</Link>
```

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

### Initialize Inertia app with React

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

Update your main JavaScript file to boot the Inertia app using React. The setup callback receives everything needed to initialize the client-side framework, including the root Inertia App component.

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

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

```

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

### Vue 3: Link with method prop

Source: https://inertiajs.com/docs/v2/the-basics/links

Use the `method` prop on the Inertia `Link` component to make POST, PUT, PATCH, or DELETE requests. The default is GET. This example shows a POST logout link rendered as a button.

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

<Link href="/logout" method="post" as="button">Logout</Link>
```

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

### Form visit events in Vue, React, Svelte, and TypeScript

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

The `<Form>` component emits all standard visit events. This example shows how to listen to `before`, `start`, `progress`, `success`, `error`, `finish`, `cancel`, and `cancelToken` events in Vue, React, Svelte, and TypeScript.

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

```jsx
<Form
    action="/users"
    method="post"
    onCancelToken={handleCancelToken}
    onBefore={handleBefore}
    onStart={handleStart}
    onProgress={handleProgress}
    onCancel={handleCancel}
    onSuccess={handleSuccess}
    onError={handleError}
    onFinish={handleFinish}
>
    <input type="text" name="name" />
    <button type="submit">Create User</button>
</Form>
```

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

```tsx
<Form
    action="/users"
    method="post"
    onCancelToken={handleCancelToken}
    onBefore={handleBefore}
    onStart={handleStart}
    onProgress={handleProgress}
    onCancel={handleCancel}
    onSuccess={handleSuccess}
    onError={handleError}
    onFinish={handleFinish}
>
    <input type="text" name="name" />
    <button type="submit">Create User</button>
</Form>
```

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

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

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

Use the `data` option with `router.visit()` to add data to a POST request. The same example is shown for Vue 3, React, and Svelte adapters.

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

```

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

### Svelte: Link with method prop

Source: https://inertiajs.com/docs/v2/the-basics/links

Use the `method` prop on the Inertia `Link` component to make POST, PUT, PATCH, or DELETE requests. The default is GET. This example shows a POST logout link and a button using the `use:inertia` action.

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

<button use:inertia={{ href: '/logout', method: 'post' }} type="button">Logout</button>

<Link href="/logout" method="post">Logout</Link>
```

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

### Start timeout in start event

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

Update the start event listener to set a timeout that shows the progress bar after 250 milliseconds.

```javascript
router.on('start', () => {
    timeout = setTimeout(() => NProgress.start(), 250)
})

```

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

### Initialize Inertia app with Svelte

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

Update your main JavaScript file to boot the Inertia app using Svelte. The setup callback receives everything needed to initialize the client-side framework, including the root Inertia App component.

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

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

```

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

### Initialize Inertia app with Vue

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

Update your main JavaScript file to boot the Inertia app using Vue. The setup callback receives everything needed to initialize the client-side framework, including the root Inertia App component.

```javascript
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

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

```

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

### Create SSR entry point files

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

Commands to create the SSR entry point file for JavaScript or JSX projects.

```bash
touch resources/js/ssr.js
```

```bash
touch resources/js/ssr.jsx
```

```bash
touch resources/js/ssr.js
```

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

### Check if progress bar started in progress event

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

In the progress event, check if the progress bar has started before updating.

```javascript
router.on('progress', event => {
    if (!NProgress.isStarted()) {
        return
    }
    // ...
})

```

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

### Check if progress bar started in finish event

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

In the finish event, check if the progress bar has started before proceeding.

```javascript
router.on('finish', (event) => {
    clearTimeout(timeout)

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

```

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

### Import NProgress and Inertia router (Svelte)

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

Import NProgress and the Inertia router for Svelte.

```javascript
import NProgress from 'nprogress'
import { router } from '@inertiajs/svelte'

```

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

### router.post with data

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

Demonstrates using the `post()` method with data as the second argument.

```APIDOC
## [POST] /users

### Description
Uses the `post()` method to send data as the 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
```javascript
import { router } from '@inertiajs/vue3'

router.post('/users', {
    name: 'John Doe',
    email: 'john.doe@example.com',
})
```

### Response
No response schema is documented in the source.
```

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

### Preserve state on GET request with preserveState: true

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

Preserve the page component state when making a GET request by setting the preserveState option to true. This is useful for keeping local state like form inputs and scroll positions across visits to the same page.

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

router.get('/users', { search: 'John' }, { preserveState: true })

```

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

router.get('/users', { search: 'John' }, { preserveState: true })

```

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

router.get('/users', { search: 'John' }, { preserveState: true })

```

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

### Using custom metadata provider

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

Shows how to use the custom metadata provider directly or via a callback. The callback receives the $data parameter.

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

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

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

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

Shows the full set of options accepted by router.visit() for Vue 3, React, and Svelte. All options are optional; defaults are shown inline. Use this when you need to manually trigger an Inertia visit with custom configuration.

```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,
    viewTransition: false,
    onCancelToken: cancelToken => {},
    onCancel: () => {},
    onBefore: visit => {},
    onStart: visit => {},
    onProgress: progress => {},
    onSuccess: page => {},
    onError: errors => {},
    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,
    viewTransition: false,
    onCancelToken: cancelToken => {},
    onCancel: () => {},
    onBefore: visit => {},
    onStart: visit => {},
    onProgress: progress => {},
    onSuccess: page => {},
    onError: errors => {},
    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,
    viewTransition: false,
    onCancelToken: cancelToken => {},
    onCancel: () => {},
    onBefore: visit => {},
    onStart: visit => {},
    onProgress: progress => {},
    onSuccess: page => {},
    onError: errors => {},
    onFinish: visit => {},
    onPrefetching: () => {},
    onPrefetched: () => {},
})
```

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

### Set HTTP method with router.visit

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

Sets the HTTP method for a manual visit using the `method` option. The default method is `get`; supported values are `get`, `post`, `put`, `patch`, and `delete`. Note that uploading files via `put` or `patch` is not supported in Laravel; use `post` with a `_method` field instead.

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

router.visit(url, { method: 'post' })

```

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

router.visit(url, { method: 'post' })

```

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

router.visit(url, { method: 'post' })

```

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

### Start SSR server with inertia:start-ssr

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

Run the SSR server as a background process, typically using a process monitoring tool such as Supervisor, after building both client and server bundles.

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

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

### POST /login

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

Demonstrates how to submit a form using the Inertia form helper, including transforming data before submission and handling submission state.

```APIDOC
## Form Submission with Transform

### Description
Submits the form data to the specified endpoint, applying a transform function to the data before submission.

### Method
POST

### Endpoint
`/login`

### Parameters
#### Request Body
- **data** (object) - Required - The form data to be submitted.
- **remember** (string) - Optional - Transformed value: `'on'` if the original `remember` field is truthy, otherwise `''`.

### Request Example
```js
$form
    .transform((data) => ({
        ...data,
        remember: data.remember ? 'on' : '',
    }))
    .post('/login')
```

### Response
#### Success Response (200)
- **form.processing** (boolean) - Indicates if the form is currently being submitted.
- **form.progress** (object) - Contains upload progress information, including `percentage`.
- **form.errors** (object) - Contains validation errors keyed by field name.
- **form.hasErrors** (boolean) - Indicates if the form has any errors.
- **form.wasSuccessful** (boolean) - Indicates if the form was successfully submitted.
- **form.recentlySuccessful** (boolean) - Indicates if the form was successfully submitted within the last two seconds.

#### Response Example
```js
// After submission, the form object contains:
{
  processing: false,
  progress: null,
  errors: {},
  hasErrors: false,
  wasSuccessful: true,
  recentlySuccessful: true
}
```
```

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

### Customize progress indicator with createInertiaApp

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

Configure the default NProgress-based progress bar by passing a `progress` object to `createInertiaApp()`. Options include `delay` (ms), `color`, `includeCSS`, and `showSpinner`.

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

```

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

### Reset form on error with resetOnError

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

Use the `resetOnError` attribute on the Inertia `Form` component to reset the form after errors. The attribute can be a boolean to reset the entire form or an array of field names to reset only specific fields. The Vue example uses `:resetOnError="['name']"` for the array form, while the React and HTML examples use `resetOnError={['name']}`.

```vue
<template>
    <!-- Reset the entire form on success -->
    <Form action="/users" method="post" resetOnError>
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Submit</button>
    </Form>

    <!-- Reset specific fields on success -->
    <Form action="/users" method="post" :resetOnError="['name']">
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Submit</button>
    </Form>
</template>
```

```jsx
// Reset the entire form on success
<Form action="/users" method="post" resetOnError>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

// Reset specific fields on success
<Form action="/users" method="post" resetOnError={['name']}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>
```

```html
<!-- Reset the entire form on success -->
<Form action="/users" method="post" resetOnError>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

<!-- Reset specific fields on success -->
<Form action="/users" method="post" resetOnError={['name']}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>
```

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

### Dotted key notation in Inertia Form

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

The Inertia `<Form>` component uses dotted key notation to create nested objects from flat input names. The example shows inputs named `user.name`, `user.skills[]`, and `address.street`, which produce the nested JSON structure shown. The same example is repeated in three renderings (Vue template, JSX, and Svelte) but the code is identical.

```html
<template>
    <Form action="/users" method="post">
        <input type="text" name="user.name" />
        <input type="text" name="user.skills[]" />
        <input type="text" name="address.street" />
        <button type="submit">Submit</button>
    </Form>
</template>

```

```html
<Form action="/users" method="post">
    <input type="text" name="user.name" />
    <input type="text" name="user.skills[]" />
    <input type="text" name="address.street" />
    <button type="submit">Submit</button>
</Form>

```

```html
<Form action="/users" method="post">
    <input type="text" name="user.name" />
    <input type="text" name="user.skills[]" />
    <input type="text" name="address.street" />
    <button type="submit">Submit</button>
</Form>

```

```json
{
    "user": {
        "name": "John Doe",
        "skills": ["JavaScript"]
    },
    "address": {
        "street": "123 Main St"
    }
}

```

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

### Svelte useForm helper with modern event syntax

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

Svelte example using the modern onsubmit event with the useForm helper from @inertiajs/svelte. Uses $form reactive store syntax and bind:value for inputs.

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

const form = useForm({
    email: null,
    password: null,
    remember: false,
})

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

<form onsubmit={submit}>
    <input type="text" bind:value={$form.email} />
    {#if $form.errors.email}
        <div class="form-error">{$form.errors.email}</div>
    {/if}
    <input type="password" bind:value={$form.password} />
    {#if $form.errors.password}
        <div class="form-error">{$form.errors.password}</div>
    {/if}
    <input type="checkbox" bind:checked={$form.remember} /> Remember Me
    <button type="submit" disabled={$form.processing}>Submit</button>
</form>
```

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

### Reset form on success with resetOnSuccess

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

Use the `resetOnSuccess` attribute on the Inertia `Form` component to reset the form after a successful submission. The attribute can be a boolean to reset the entire form or an array of field names to reset only specific fields. The Vue example uses `:resetOnSuccess="['name']"` for the array form, while the React and HTML examples use `resetOnSuccess={['name']}`.

```vue
<template>
    <!-- Reset the entire form on success -->
    <Form action="/users" method="post" resetOnSuccess>
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Submit</button>
    </Form>

    <!-- Reset specific fields on success -->
    <Form action="/users" method="post" :resetOnSuccess="['name']">
        <input type="text" name="name" />
        <input type="email" name="email" />
        <button type="submit">Submit</button>
    </Form>
</template>
```

```jsx
// Reset the entire form on success
<Form action="/users" method="post" resetOnSuccess>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

// Reset specific fields on success
<Form action="/users" method="post" resetOnSuccess={['name']}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>
```

```html
<!-- Reset the entire form on success -->
<Form action="/users" method="post" resetOnSuccess>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>

<!-- Reset specific fields on success -->
<Form action="/users" method="post" resetOnSuccess={['name']}>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <button type="submit">Submit</button>
</Form>
```

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

### Share once prop globally with shareOnce()

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

Shares a once prop globally using the convenience method shareOnce().

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

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

### Prefetch on click (React)

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

Starts prefetching on `mousedown` instead of hover by passing `prefetch="click"`.

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

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

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

### Combine prefetch strategies (Svelte)

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

Combines multiple prefetch triggers by setting `prefetch: ['mount', 'hover']` in the `use:inertia` action.

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

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

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

### Configure Defaults in createInertiaApp()

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

Pass a defaults object to createInertiaApp() to set default configuration for forms, prefetching, and visit options. The visitOptions callback receives the target URL and current visit options, and returns an object with overridden options.

```javascript
createInertiaApp({
    // ...
    defaults: {
        form: {
            recentlySuccessfulDuration: 5000,
        },
        prefetch: {
            cacheFor: "1m",
            hoverDelay: 150,
        },
        visitOptions: (href, options) => {
            return {
                headers: {
                    ...options.headers,
                    "X-Custom-Header": "value",
                },
            };
        },
    },
});
```

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

### router.visit(url, { method: 'post' })

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

Sets the HTTP method for a manual visit to `post`. The default method is `get`.

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

### Description
Sets the HTTP method for a manual visit to `post`. The default method is `get`.

### Method
POST

### Endpoint
`url` (the URL to visit)

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

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

### Response
No response body is returned; the visit triggers a page visit.
```
Tokens:
Raw