3.x

docs.json

@@ -94,6 +94,93 @@
                     }
                 ]
             },
+            {
+                "version": "3.x",
+                "groups": [
+                    {
+                        "group": "Getting Started",
+                        "pages": [
+                            "v3/getting-started/index",
+                            "v3/getting-started/demo-application",
+                            "v3/getting-started/upgrade-guide"
+                        ]
+                    },
+                    {
+                        "group": "Installation",
+                        "pages": [
+                            "v3/installation/server-side-setup",
+                            "v3/installation/client-side-setup"
+                        ]
+                    },
+                    {
+                        "group": "Core Concepts",
+                        "pages": [
+                            "v3/core-concepts/who-is-it-for",
+                            "v3/core-concepts/how-it-works",
+                            "v3/core-concepts/the-protocol"
+                        ]
+                    },
+                    {
+                        "group": "The Basics",
+                        "pages": [
+                            "v3/the-basics/pages",
+                            "v3/the-basics/responses",
+                            "v3/the-basics/redirects",
+                            "v3/the-basics/routing",
+                            "v3/the-basics/title-and-meta",
+                            "v3/the-basics/links",
+                            "v3/the-basics/manual-visits",
+                            "v3/the-basics/instant-visits",
+                            "v3/the-basics/forms",
+                            "v3/the-basics/http-requests",
+                            "v3/the-basics/optimistic-updates",
+                            "v3/the-basics/file-uploads",
+                            "v3/the-basics/validation",
+                            "v3/the-basics/layouts",
+                            "v3/the-basics/view-transitions"
+                        ]
+                    },
+                    {
+                        "group": "Data & Props",
+                        "pages": [
+                            "v3/data-props/shared-data",
+                            "v3/data-props/flash-data",
+                            "v3/data-props/partial-reloads",
+                            "v3/data-props/deferred-props",
+                            "v3/data-props/merging-props",
+                            "v3/data-props/once-props",
+                            "v3/data-props/polling",
+                            "v3/data-props/prefetching",
+                            "v3/data-props/load-when-visible",
+                            "v3/data-props/infinite-scroll",
+                            "v3/data-props/remembering-state"
+                        ]
+                    },
+                    {
+                        "group": "Security",
+                        "pages": [
+                            "v3/security/authentication",
+                            "v3/security/authorization",
+                            "v3/security/csrf-protection",
+                            "v3/security/history-encryption"
+                        ]
+                    },
+                    {
+                        "group": "Advanced",
+                        "pages": [
+                            "v3/advanced/asset-versioning",
+                            "v3/advanced/code-splitting",
+                            "v3/advanced/error-handling",
+                            "v3/advanced/events",
+                            "v3/advanced/progress-indicators",
+                            "v3/advanced/scroll-management",
+                            "v3/advanced/server-side-rendering",
+                            "v3/advanced/testing",
+                            "v3/advanced/typescript"
+                        ]
+                    }
+                ]
+            },
             {
                 "version": "1.x",
                 "groups": [
@@ -181,6 +268,10 @@
         }
     },
     "redirects": [
+        {
+            "source": "/index",
+            "destination": "/v2/getting-started/index"
+        },
         {
             "source": "/demo-application",
             "destination": "/v2/getting-started/demo-application"
@@ -253,6 +344,26 @@
             "source": "/view-transitions",
             "destination": "/v2/the-basics/view-transitions"
         },
+        {
+            "source": "/instant-visits",
+            "destination": "/v3/the-basics/instant-visits"
+        },
+        {
+            "source": "/http-requests",
+            "destination": "/v3/the-basics/http-requests"
+        },
+        {
+            "source": "/optimistic-updates",
+            "destination": "/v3/the-basics/optimistic-updates"
+        },
+        {
+            "source": "/layout-props",
+            "destination": "/v3/the-basics/layouts"
+        },
+        {
+            "source": "/v3/the-basics/layout-props",
+            "destination": "/v3/the-basics/layouts"
+        },
         {
             "source": "/shared-data",
             "destination": "/v2/data-props/shared-data"
@@ -342,4 +453,4 @@
             "destination": "/v2/advanced/typescript"
         }
     ]
-}
+}

snippets/v3-beta-warning.mdx

@@ -0,0 +1 @@
+<Warning>You are viewing the documentation for Inertia.js v3, which is currently in **beta**. For the current stable release, please visit the [v2 documentation](/v2/getting-started/index).</Warning>

v2/advanced/events.mdx

@@ -486,24 +486,24 @@ The `error` event fires when validation errors are present on "successful" page
 ```js Vue icon="vuejs"
 import { router } from '@inertiajs/vue3'
 
-router.on('error', (errors) => {
-    console.log(errors)
+router.on('error', (event) => {
+    console.log(event.detail.errors)
 })
 ```
 
 ```jsx React icon="react"
 import { router } from '@inertiajs/react'
 
-router.on('error', (errors) => {
-    console.log(errors)
+router.on('error', (event) => {
+    console.log(event.detail.errors)
 })
 ```
 
 ```js Svelte icon="s"
 import { router } from '@inertiajs/svelte'
 
-router.on('error', (errors) => {
-    console.log(errors)
+router.on('error', (event) => {
+    console.log(event.detail.errors)
 })
 ```
 
@@ -732,23 +732,23 @@ The `prefetching` event fires when the router starts prefetching a page.
 import { router } from '@inertiajs/vue3'
 
 router.on('prefetching', (event) => {
-    console.log(`Prefetching ${event.detail.page.url}`)
+    console.log(`Prefetching ${event.detail.visit.url}`)
 })
 ```
 
 ```jsx React icon="react"
 import { router } from '@inertiajs/react'
 
 router.on('prefetching', (event) => {
-    console.log(`Prefetching ${event.detail.page.url}`)
+    console.log(`Prefetching ${event.detail.visit.url}`)
 })
 ```
 
 ```js Svelte icon="s"
 import { router } from '@inertiajs/svelte'
 
 router.on('prefetching', (event) => {
-    console.log(`Prefetching ${event.detail.page.url}`)
+    console.log(`Prefetching ${event.detail.visit.url}`)
 })
 ```
 
@@ -766,23 +766,23 @@ The `prefetched` event fires when the router has successfully prefetched a page.
 import { router } from '@inertiajs/vue3'
 
 router.on('prefetched', (event) => {
-    console.log(`Prefetched ${event.detail.page.url}`)
+    console.log(`Prefetched ${event.detail.visit.url}`)
 })
 ```
 
 ```jsx React icon="react"
 import { router } from '@inertiajs/react'
 
 router.on('prefetched', (event) => {
-    console.log(`Prefetched ${event.detail.page.url}`)
+    console.log(`Prefetched ${event.detail.visit.url}`)
 })
 ```
 
 ```js Svelte icon="s"
 import { router } from '@inertiajs/svelte'
 
 router.on('prefetched', (event) => {
-    console.log(`Prefetched ${event.detail.page.url}`)
+    console.log(`Prefetched ${event.detail.visit.url}`)
 })
 ```
 

v3/advanced/asset-versioning.mdx

@@ -0,0 +1,65 @@
+---
+title: Asset Versioning
+---
+
+import V3BetaWarning from "/snippets/v3-beta-warning.mdx";
+
+<V3BetaWarning />
+
+One common challenge when building single-page apps is refreshing site assets when they've been changed. Thankfully, Inertia makes this easy by optionally tracking the current version of your site assets. When an asset changes, Inertia will automatically make a full page visit instead of a XHR visit on the next request.
+
+## Configuration
+
+To enable automatic asset refreshing, you need to tell Inertia the current version of your assets. This can be any arbitrary string (letters, numbers, or a file hash), as long as it changes when your assets have been updated.
+
+Typically, your application's asset version can be specified within the `version` method of the Inertia `HandleInertiaRequests` middleware.
+
+```php
+class HandleInertiaRequests extends Middleware
+{
+    public function version(Request $request)
+    {
+        return parent::version($request);
+    }
+}
+```
+
+Alternatively, the asset version can be provided manually using the `Inertia::version()` method.
+
+```php
+use Inertia\Inertia;
+
+Inertia::version($version);
+Inertia::version(fn () => $version); // Lazily...
+```
+
+## Cache Busting
+
+Asset refreshing in Inertia works on the assumption that a hard page visit will trigger your assets to reload. However, Inertia doesn't actually do anything to force this. Typically this is done with some form of cache busting. For example, appending a version query parameter to the end of your asset URLs.
+
+With Laravel's Vite integration, asset versioning is done automatically. If you're using Laravel Mix, you can do this automatically by enabling [versioning](https://laravel.com/docs/mix#versioning-and-cache-busting) in your `webpack.mix.js` file.
+
+## Manual Refreshing
+
+If you want to take asset refreshing into your control, you can return a fixed value from the `version` method in the `HandleInertiaRequests` middleware. This disables Inertia's automatic asset versioning.
+
+For example, if you want to notify users when a new version of your frontend is available, you can still expose the actual asset version to the frontend by including it as [shared data](/v3/data-props/shared-data).
+
+```php
+class HandleInertiaRequests extends Middleware
+{
+    public function version(Request $request)
+    {
+        return null;
+    }
+
+    public function share(Request $request)
+    {
+        return array_merge(parent::share($request), [
+            'version' => parent::version($request),
+        ]);
+    }
+}
+```
+
+On the frontend, you can watch the `version` property and show a notification when a new version is detected.

v3/advanced/code-splitting.mdx

@@ -0,0 +1,106 @@
+---
+title: Code Splitting
+---
+
+import V3BetaWarning from "/snippets/v3-beta-warning.mdx";
+
+<V3BetaWarning />
+
+By default, Inertia lazy-loads page components, splitting each page into its own bundle that is loaded on demand. This reduces the initial JavaScript bundle size but requires additional requests when visiting new pages.
+
+You may disable lazy loading to eagerly bundle all pages into a single file. Eager loading eliminates per-page requests but increases the initial bundle size.
+
+## Vite Plugin
+
+The `lazy` option in the `pages` shorthand controls how page components are loaded. It defaults to `true`.
+
+```js
+createInertiaApp({
+    pages: {
+        lazy: false, // Bundle all pages into a single file
+    },
+    // ...
+})
+```
+
+## Manual Vite
+
+You may configure code splitting manually using Vite's `import.meta.glob()` function when not using the Inertia Vite plugin. Pass `{ eager: true }` to bundle all pages, or omit it to lazy-load them.
+
+<CodeGroup>
+
+```js Vue icon="vuejs"
+resolve: name => {
+    const pages = import.meta.glob('./Pages/**/*.vue') // [!code --:2]
+    return pages[`./Pages/${name}.vue`]()
+    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) // [!code ++:2]
+    return pages[`./Pages/${name}.vue`]
+},
+```
+
+```js React icon="react"
+resolve: name => {
+    const pages = import.meta.glob('./Pages/**/*.jsx') // [!code --:2]
+    return pages[`./Pages/${name}.jsx`]()
+    const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true }) // [!code ++:2]
+    return pages[`./Pages/${name}.jsx`]
+},
+```
+
+```js Svelte icon="s"
+resolve: name => {
+    const pages = import.meta.glob('./Pages/**/*.svelte') // [!code --:2]
+    return pages[`./Pages/${name}.svelte`]()
+    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true }) // [!code ++:2]
+    return pages[`./Pages/${name}.svelte`]
+},
+```
+
+</CodeGroup>
+
+## Webpack
+
+To use code splitting with Webpack, you will first need to enable [dynamic imports](https://github.com/tc39/proposal-dynamic-import) via a Babel plugin. Let's install it now.
+
+```bash
+npm install @babel/plugin-syntax-dynamic-import
+```
+
+Next, create a `.babelrc` file in your project with the following configuration:
+
+```json
+{
+    "plugins": ["@babel/plugin-syntax-dynamic-import"]
+}
+```
+
+If you're using Laravel Mix, the dynamic imports Babel plugin is already installed and configured, and you can skip these steps. We recommend using Laravel Mix 6 or above, as there are known issues with older versions.
+
+Finally, update the `resolve` callback in your app's initialization code to use `import` instead of `require`.
+
+<CodeGroup>
+
+```js Vue icon="vuejs"
+resolve: name => require(`./Pages/${name}`), // [!code --]
+resolve: name => import(`./Pages/${name}`), // [!code ++]
+```
+
+```js React icon="react"
+resolve: name => require(`./Pages/${name}`), // [!code --]
+resolve: name => import(`./Pages/${name}`), // [!code ++]
+```
+
+```js Svelte icon="s"
+resolve: name => require(`./Pages/${name}.svelte`), // [!code --]
+resolve: name => import(`./Pages/${name}.svelte`), // [!code ++]
+```
+
+</CodeGroup>
+
+You should also consider using cache busting to force browsers to load the latest version of your assets. To accomplish this, add the following configuration to your webpack configuration file.
+
+```js
+output: {
+    chunkFilename: 'js/[name].js?id=[chunkhash]',
+}
+```