From fbdbbac7e178258a0b6d2d21f1fdb1c7867f878f Mon Sep 17 00:00:00 2001
From: Svyatoslav Kryukov <me@skryukov.dev>
Date: Sat, 15 Nov 2025 00:23:04 +0300
Subject: [PATCH 1/5] Add docs on defaults configuration

---
 docs/guide/client-side-setup.md | 94 +++++++++++++++++++++++++++++++++
 docs/guide/error-handling.md    | 17 ++++++
 docs/guide/forms.md             |  2 +
 docs/guide/manual-visits.md     | 69 ++++++++++++++++++++++++
 docs/guide/prefetching.md       |  4 +-
 docs/guide/title-and-meta.md    | 17 ++++++
 6 files changed, 201 insertions(+), 2 deletions(-)

diff --git a/docs/guide/client-side-setup.md b/docs/guide/client-side-setup.md
index 9029720d..ab3f5790 100644
--- a/docs/guide/client-side-setup.md
+++ b/docs/guide/client-side-setup.md
@@ -114,6 +114,100 @@ createInertiaApp({
 
 The `setup` callback receives everything necessary to initialize the client-side framework, including the root Inertia `App` component.
 
+## Configuring defaults
+
+You may pass a `defaults` object to `createInertiaApp()` to configure default settings for various features. You don't have to pass all keys, just the ones you want to tweak.
+
+```js
+createInertiaApp({
+  // ...
+  defaults: {
+    form: {
+      recentlySuccessfulDuration: 5000,
+    },
+    prefetch: {
+      cacheFor: '1m',
+      hoverDelay: 150,
+    },
+    visitOptions: (href, options) => {
+      return {
+        headers: {
+          ...options.headers,
+          'X-Custom-Header': 'value',
+        },
+      }
+    },
+  },
+})
+```
+
+The `visitOptions` callback receives the target URL and the current visit options, and should return an object with any options you want to override. For more details on the available configuration options, see the [forms](/guide/forms#form-errors), [prefetching](/guide/prefetching), and [manual visits](/guide/manual-visits#global-visit-options) documentation.
+
+### Updating at runtime
+
+You may also update configuration values at runtime using the exported `config` instance. This is
+particularly useful when you need to adjust settings based on user preferences or application state.
+
+:::tabs key:frameworks
+== Vue
+
+```js
+import { router } from '@inertiajs/vue3'
+
+// Set a single value using dot notation...
+config.set('form.recentlySuccessfulDuration', 1000)
+config.set('prefetch.cacheFor', '5m')
+
+// Set multiple values at once...
+config.set({
+  'form.recentlySuccessfulDuration': 1000,
+  'prefetch.cacheFor': '5m',
+})
+
+// Get a configuration value...
+const duration = config.get('form.recentlySuccessfulDuration')
+```
+
+== React
+
+```js
+import { router } from '@inertiajs/react'
+
+// Set a single value using dot notation...
+config.set('form.recentlySuccessfulDuration', 1000)
+config.set('prefetch.cacheFor', '5m')
+
+// Set multiple values at once...
+config.set({
+  'form.recentlySuccessfulDuration': 1000,
+  'prefetch.cacheFor': '5m',
+})
+
+// Get a configuration value...
+const duration = config.get('form.recentlySuccessfulDuration')
+```
+
+== Svelte 4|Svelte 5
+
+```js
+import { router } from '@inertiajs/svelte'
+
+// Set a single value using dot notation...
+config.set('form.recentlySuccessfulDuration', 1000)
+config.set('prefetch.cacheFor', '5m')
+
+// Set multiple values at once...
+config.set({
+  'form.recentlySuccessfulDuration': 1000,
+  'prefetch.cacheFor': '5m',
+})
+
+// Get a configuration value...
+const duration = config.get('form.recentlySuccessfulDuration')
+```
+
+:::
+
 # Resolving components
 
 The `resolve` callback tells Inertia how to load a page component. It receives a page name (string), and returns a page component module. How you implement this callback depends on which bundler (Vite or Webpack) you're using.
diff --git a/docs/guide/error-handling.md b/docs/guide/error-handling.md
index c808c214..a6facea1 100644
--- a/docs/guide/error-handling.md
+++ b/docs/guide/error-handling.md
@@ -6,6 +6,23 @@ One of the advantages to working with a robust server-side framework is the buil
 
 Inertia solves this issue by showing all non-Inertia responses in a modal. This means you get the same beautiful error-reporting you're accustomed to, even though you've made that request over XHR.
 
+## Dialog element
+
+By default, Inertia displays error modals using a custom `<div>` overlay. However, you can opt-in to using the native HTML `<dialog>` element instead, which provides built-in modal functionality including backdrop handling.
+
+To enable this, configure the `future.useDialogForErrorModal` option in your [application defaults](/guide/client-side-setup#configuring-defaults).
+
+```js
+createInertiaApp({
+  // resolve, setup, etc.
+  defaults: {
+    future: {
+      useDialogForErrorModal: true,
+    },
+  },
+})
+```
+
 ## Production
 
 In production you will want to return a proper Inertia error response instead of relying on the modal-driven error reporting that is present during development. To accomplish this, you'll need to update your framework's default exception handler to return a custom error page.
diff --git a/docs/guide/forms.md b/docs/guide/forms.md
index 3378abc5..5301a0fa 100644
--- a/docs/guide/forms.md
+++ b/docs/guide/forms.md
@@ -1452,6 +1452,8 @@ $form.setError({
 
 When a form has been successfully submitted, the `wasSuccessful` property will be `true`. In addition to this, forms have a `recentlySuccessful` property, which will be set to `true` for two seconds after a successful form submission. This property can be utilized to show temporary success messages.
 
+You may customize the duration of the `recentlySuccessful` state by setting the `form.recentlySuccessfulDuration` option in your [application defaults](/guide/client-side-setup#configuring-defaults). The default value is `2000` milliseconds.
+
 ### Resetting the Form
 
 To reset the form's values back to their default values, you can use the `reset()` method.
diff --git a/docs/guide/manual-visits.md b/docs/guide/manual-visits.md
index af9d8ee0..55b708f3 100644
--- a/docs/guide/manual-visits.md
+++ b/docs/guide/manual-visits.md
@@ -326,6 +326,75 @@ router.post('/users', data, {
 > [!NOTE]
 > The headers Inertia uses internally to communicate its state to the server take priority and therefore cannot be overwritten.
 
+## Global visit options
+
+You may configure a `visitOptions` callback when [initializing your Inertia app](/guide/client-side-setup#configuring-defaults) to modify visit options globally for every request. The callback receives the target URL and the current visit options, and should return an object with any options you want to override.
+
+:::tabs key:frameworks
+== Vue
+
+```js
+import { createApp, h } from 'vue'
+import { createInertiaApp } from '@inertiajs/vue3'
+
+createInertiaApp({
+  // ...
+  defaults: {
+    visitOptions: (href, options) => {
+      return {
+        headers: {
+          ...options.headers,
+          'X-Custom-Header': 'value',
+        },
+      }
+    },
+  },
+})
+```
+
+== React
+
+```js
+import { createInertiaApp } from '@inertiajs/react'
+import { createRoot } from 'react-dom/client'
+
+createInertiaApp({
+  // ...
+  defaults: {
+    visitOptions: (href, options) => {
+      return {
+        headers: {
+          ...options.headers,
+          'X-Custom-Header': 'value',
+        },
+      }
+    },
+  },
+})
+```
+
+== Svelte 4|Svelte 5
+
+```js
+import { createInertiaApp } from '@inertiajs/svelte'
+
+createInertiaApp({
+  // ...
+  defaults: {
+    visitOptions: (href, options) => {
+      return {
+        headers: {
+          ...options.headers,
+          'X-Custom-Header': 'value',
+        },
+      }
+    },
+  },
+})
+```
+
+:::
+
 ## File uploads
 
 When making visits / requests that include files, Inertia will automatically convert the request data into a `FormData` object. If you would like the request to always use a `FormData` object, you may use the `forceFormData` option.
diff --git a/docs/guide/prefetching.md b/docs/guide/prefetching.md
index d4e6b379..9c935f22 100644
--- a/docs/guide/prefetching.md
+++ b/docs/guide/prefetching.md
@@ -4,7 +4,7 @@ Inertia supports prefetching data for pages that are likely to be visited next.
 
 ## Link prefetching
 
-To prefetch data for a page, you can add the `prefetch` prop to the Inertia link component. By default, Inertia will prefetch the data for the page when the user hovers over the link for more than 75ms.
+To prefetch data for a page, you can add the `prefetch` prop to the Inertia link component. By default, Inertia will prefetch the data for the page when the user hovers over the link for more than 75ms. You may customize this hover delay by setting the `prefetch.hoverDelay` option in your [application defaults](/guide/client-side-setup#configuring-defaults).
 
 :::tabs key:frameworks
 == Vue
@@ -43,7 +43,7 @@ export default () => (
 
 :::
 
-By default, data is cached for 30 seconds before being evicted. You can customize this behavior by passing a `cacheFor` prop to the `Link` component.
+By default, data is cached for 30 seconds before being evicted. You may customize this default value by setting the `prefetch.cacheFor` option in your [application defaults](/guide/client-side-setup#configuring-defaults). You may also customize the cache duration on a per-link basis by passing a `cacheFor` prop to the `Link` component.
 
 :::tabs key:frameworks
 == Vue
diff --git a/docs/guide/title-and-meta.md b/docs/guide/title-and-meta.md
index 28d73be9..92769442 100644
--- a/docs/guide/title-and-meta.md
+++ b/docs/guide/title-and-meta.md
@@ -347,3 +347,20 @@ export default () => <AppHead title="About" />
 ```
 
 :::
+
+## Inertia attribute on elements
+
+Inertia has historically used the `inertia` attribute to track and manage elements in the document `<head>`. However, you can now opt-in to using the more standards-compliant `data-inertia` attribute instead. According to the HTML specification, custom attributes should be prefixed with `data-` to avoid conflicts with future HTML standards.
+
+To enable this, configure the `future.useDataInertiaHeadAttribute` option in your [application defaults](/guide/client-side-setup#configuring-defaults).
+
+```js
+createInertiaApp({
+  // resolve, setup, etc.
+  defaults: {
+    future: {
+      useDataInertiaHeadAttribute: true,
+    },
+  },
+})
+```

From 965f540ef7684da6ddef6038508a6c8c604197da Mon Sep 17 00:00:00 2001
From: Svyatoslav Kryukov <me@skryukov.dev>
Date: Sat, 15 Nov 2025 00:24:00 +0300
Subject: [PATCH 2/5] Advise using defaultValue for Vue

---
 docs/guide/forms.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/guide/forms.md b/docs/guide/forms.md
index 5301a0fa..55ece8e3 100644
--- a/docs/guide/forms.md
+++ b/docs/guide/forms.md
@@ -151,7 +151,7 @@ You can pass a `transform` prop to modify the form data before submission. This
 
 ### Default values
 
-You can set default values for form inputs using standard HTML attributes. Use <React>`defaultValue`</React><Vue>`value`</Vue><Svelte4>`value`</Svelte4><Svelte5>`defaultValue` (`value` for Svelte < `5.6.0`)</Svelte5> for text inputs and textareas, and <React>`defaultChecked`</React><Vue>`checked`</Vue><Svelte4>`checked`</Svelte4><Svelte5>`defaultChecked` (`checked` for Svelte < `5.6.0`)</Svelte5> for checkboxes and radios.
+You can set default values for form inputs using standard HTML attributes. Use <React>`defaultValue`</React><Vue>`defaultValue`</Vue><Svelte4>`value`</Svelte4><Svelte5>`defaultValue` (`value` for Svelte < `5.6.0`)</Svelte5> for text inputs and textareas, and <React>`defaultChecked`</React><Vue>`defaultChecked`</Vue><Svelte4>`checked`</Svelte4><Svelte5>`defaultChecked` (`checked` for Svelte < `5.6.0`)</Svelte5> for checkboxes and radios.
 
 :::tabs key:frameworks
 
@@ -160,7 +160,7 @@ You can set default values for form inputs using standard HTML attributes. Use <
 ```vue
 <template>
   <Form action="/users" method="post">
-    <input type="text" name="name" value="John Doe" />
+    <input type="text" name="name" defaultValue="John Doe" />
 
     <select name="country">
       <option value="us">United States</option>
@@ -168,7 +168,7 @@ You can set default values for form inputs using standard HTML attributes. Use <
       <option value="uk" selected>United Kingdom</option>
     </select>
 
-    <input type="checkbox" name="subscribe" value="yes" checked />
+    <input type="checkbox" name="subscribe" value="yes" defaultChecked />
 
     <button type="submit">Submit</button>
   </Form>

From 867a68db0bf870b19f133038bcf3c460d91eba5c Mon Sep 17 00:00:00 2001
From: Svyatoslav Kryukov <me@skryukov.dev>
Date: Sat, 15 Nov 2025 00:24:26 +0300
Subject: [PATCH 3/5] Form submissions with WhenVisible

---
 docs/guide/load-when-visible.md | 118 ++++++++++++++++++++++++++++++++
 1 file changed, 118 insertions(+)

diff --git a/docs/guide/load-when-visible.md b/docs/guide/load-when-visible.md
index 7c973dd1..44dd6c6b 100644
--- a/docs/guide/load-when-visible.md
+++ b/docs/guide/load-when-visible.md
@@ -352,3 +352,121 @@ export default () => (
 ```
 
 :::
+
+## Form submissions
+
+When submitting forms, you may want to use the `except` option to exclude the props that are being used by the `WhenVisible` component. This prevents the props from being reloaded when you get redirected back to the current page because of validation errors.
+
+:::tabs key:frameworks
+== Vue
+
+```vue
+<script setup>
+import { useForm, WhenVisible } from '@inertiajs/vue3'
+
+const form = useForm({
+  name: '',
+  email: '',
+})
+
+function submit() {
+  form.post('/users', {
+    except: ['permissions'],
+  })
+}
+</script>
+
+<template>
+  <form @submit.prevent="submit">
+    <!-- ... -->
+  </form>
+
+  <WhenVisible data="permissions">
+    <!-- ... -->
+  </WhenVisible>
+</template>
+```
+
+== React
+
+```jsx
+import { useForm, WhenVisible } from '@inertiajs/react'
+
+export default function CreateUser() {
+  const { data, setData, post } = useForm({
+    name: '',
+    email: '',
+  })
+
+  function submit(e) {
+    e.preventDefault()
+    post('/users', {
+      except: ['permissions'],
+    })
+  }
+
+  return (
+    <>
+      <form onSubmit={submit}>{/* ... */}</form>
+
+      <WhenVisible data="permissions">{/* ... */}</WhenVisible>
+    </>
+  )
+}
+```
+
+== Svelte 4
+
+```svelte
+<script>
+  import { useForm, WhenVisible } from '@inertiajs/svelte'
+
+  const form = useForm({
+    name: '',
+    email: '',
+  })
+
+  function submit() {
+    $form.post('/users', {
+      except: ['permissions'],
+    })
+  }
+</script>
+
+<form on:submit|preventDefault={submit}>
+  <!-- ... -->
+</form>
+
+<WhenVisible data="permissions">
+  <!-- ... -->
+</WhenVisible>
+```
+
+== Svelte 5
+
+```svelte
+<script>
+  import { useForm, WhenVisible } from '@inertiajs/svelte'
+
+  const form = useForm({
+    name: '',
+    email: '',
+  })
+
+  function submit() {
+    form.post('/users', {
+      except: ['permissions'],
+    })
+  }
+</script>
+
+<form onsubmit={submit}>
+  <!-- ... -->
+</form>
+
+<WhenVisible data="permissions">
+  <!-- ... -->
+</WhenVisible>
+```
+
+:::

From 663ddf133448e6b0762a35eb76ef101b920350ae Mon Sep 17 00:00:00 2001
From: Svyatoslav Kryukov <me@skryukov.dev>
Date: Fri, 14 Nov 2025 23:43:07 +0300
Subject: [PATCH 4/5] Add docs on view transitions

---
 docs/.vitepress/config.mts     |   1 +
 docs/guide/links.md            |  41 ++++
 docs/guide/manual-visits.md    |  34 +++
 docs/guide/view-transitions.md | 376 +++++++++++++++++++++++++++++++++
 4 files changed, 452 insertions(+)
 create mode 100644 docs/guide/view-transitions.md

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 5bb2b747..1ca2cee5 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -115,6 +115,7 @@ export default defineConfig({
             { text: 'Forms', link: '/guide/forms' },
             { text: 'File uploads', link: '/guide/file-uploads' },
             { text: 'Validation', link: '/guide/validation' },
+            { text: 'View transitions', link: '/guide/view-transitions' },
           ],
         },
         {
diff --git a/docs/guide/links.md b/docs/guide/links.md
index f4eabe2c..85b545ce 100644
--- a/docs/guide/links.md
+++ b/docs/guide/links.md
@@ -416,6 +416,47 @@ export default () => (
 
 For more information on this topic, check out the complete documentation on [partial reloads](/guide/partial-reloads.md).
 
+## View transitions
+
+You may enable [View transitions](/guide/view-transitions) for a link by setting the `viewTransition` prop to `true`. This will use the browser's View Transitions API to animate the page transition.
+
+:::tabs key:frameworks
+== Vue
+
+```vue
+<script setup>
+import { router } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <Link href="/another-page" view-transition>Navigate</Link>
+</template>
+```
+
+== React
+
+```jsx
+import { router } from '@inertiajs/react'
+
+export default () => (
+  <Link href="/another-page" viewTransition>
+    Navigate
+  </Link>
+)
+```
+
+== Svelte 4|Svelte 5
+
+```svelte
+<script>
+  import { router } from '@inertiajs/svelte'
+</script>
+
+<Link href="/another-page" viewTransition>Navigate</Link>
+```
+
+:::
+
 ## Active states
 
 It's common to set an active state for navigation links based on the current page. This can be accomplished when using Inertia by inspecting the `page` object and doing string comparisons against the `page.url` and `page.component` properties.
diff --git a/docs/guide/manual-visits.md b/docs/guide/manual-visits.md
index 55b708f3..48e78089 100644
--- a/docs/guide/manual-visits.md
+++ b/docs/guide/manual-visits.md
@@ -26,6 +26,7 @@ router.visit(url, {
   reset: [],
   preserveUrl: false,
   prefetch: false,
+  viewTransition: false,
   onCancelToken: (cancelToken) => {},
   onCancel: () => {},
   onBefore: (visit) => {},
@@ -62,6 +63,7 @@ router.visit(url, {
   reset: [],
   preserveUrl: false,
   prefetch: false,
+  viewTransition: false,
   onCancelToken: (cancelToken) => {},
   onCancel: () => {},
   onBefore: (visit) => {},
@@ -98,6 +100,7 @@ router.visit(url, {
   reset: [],
   preserveUrl: false,
   prefetch: false,
+  viewTransition: false,
   onCancelToken: (cancelToken) => {},
   onCancel: () => {},
   onBefore: (visit) => {},
@@ -912,6 +915,37 @@ router.get('/users', { search: 'John' }, { only: ['users'] })
 
 For more information on this feature, check out the [partial reloads](/guide/partial-reloads.md) documentation.
 
+## View transitions
+
+You may enable [View transitions](/guide/view-transitions) for a visit by setting the `viewTransition` option to `true`. This will use the browser's View Transitions API to animate the page transition.
+
+:::tabs key:frameworks
+== Vue
+
+```js
+import { router } from '@inertiajs/vue3'
+
+router.visit('/another-page', { viewTransition: true })
+```
+
+== React
+
+```js
+import { router } from '@inertiajs/react'
+
+router.visit('/another-page', { viewTransition: true })
+```
+
+== Svelte 4|Svelte 5
+
+```js
+import { router } from '@inertiajs/svelte'
+
+router.visit('/another-page', { viewTransition: true })
+```
+
+:::
+
 ## Visit cancellation
 
 You can cancel a visit using a cancel token, which Inertia automatically generates and provides via the `onCancelToken()` callback prior to making the visit.
diff --git a/docs/guide/view-transitions.md b/docs/guide/view-transitions.md
new file mode 100644
index 00000000..5278317a
--- /dev/null
+++ b/docs/guide/view-transitions.md
@@ -0,0 +1,376 @@
+# View Transitions
+
+Inertia supports the [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions), allowing you to animate page transitions.
+
+> [!NOTE]
+> The View Transitions API is a [relatively new browser feature](https://caniuse.com/view-transitions). Inertia gracefully falls back to standard page transitions in browsers that don't support the API.
+
+## Enabling transitions
+
+You may enable view transitions for a visit by setting the `viewTransition` option to `true`. By default, this will apply a cross-fade transition between pages.
+
+:::tabs key:frameworks
+== Vue
+
+```js
+import { router } from '@inertiajs/vue3'
+
+router.visit('/another-page', { viewTransition: true })
+```
+
+== React
+
+```js
+import { router } from '@inertiajs/react'
+
+router.visit('/another-page', { viewTransition: true })
+```
+
+== Svelte 4|Svelte 5
+
+```js
+import { router } from '@inertiajs/svelte'
+
+router.visit('/another-page', { viewTransition: true })
+```
+
+:::
+
+## Transition callbacks
+
+You may also pass a callback to the `viewTransition` option, which will receive the standard [`ViewTransition`](https://developer.mozilla.org/en-US/docs/Web/API/ViewTransition) instance provided by the browser. This allows you to hook into the various promises provided by the API.
+
+:::tabs key:frameworks
+== Vue
+
+```js
+import { router } from '@inertiajs/vue3'
+
+router.visit('/another-page', {
+  viewTransition: (transition) => {
+    transition.ready.then(() => console.log('Transition ready'))
+    transition.updateCallbackDone.then(() => console.log('DOM updated'))
+    transition.finished.then(() => console.log('Transition finished'))
+  },
+})
+```
+
+== React
+
+```js
+import { router } from '@inertiajs/react'
+
+router.visit('/another-page', {
+  viewTransition: (transition) => {
+    transition.ready.then(() => console.log('Transition ready'))
+    transition.updateCallbackDone.then(() => console.log('DOM updated'))
+    transition.finished.then(() => console.log('Transition finished'))
+  },
+})
+```
+
+== Svelte 4|Svelte 5
+
+```js
+import { router } from '@inertiajs/svelte'
+
+router.visit('/another-page', {
+  viewTransition: (transition) => {
+    transition.ready.then(() => console.log('Transition ready'))
+    transition.updateCallbackDone.then(() => console.log('DOM updated'))
+    transition.finished.then(() => console.log('Transition finished'))
+  },
+})
+```
+
+:::
+
+## Links
+
+The `viewTransition` option is also available on the `Link` component.
+
+:::tabs key:frameworks
+== Vue
+
+```vue
+<script setup>
+import { router } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <Link href="/another-page" view-transition>Navigate</Link>
+</template>
+```
+
+== React
+
+```jsx
+import { router } from '@inertiajs/react'
+
+export default () => (
+  <Link href="/another-page" viewTransition>
+    Navigate
+  </Link>
+)
+```
+
+== Svelte 4|Svelte 5
+
+```svelte
+<script>
+  import { router } from '@inertiajs/svelte'
+</script>
+
+<Link href="/another-page" viewTransition>Navigate</Link>
+```
+
+:::
+
+You may also pass a callback to access the `ViewTransition` instance.
+
+:::tabs key:frameworks
+== Vue
+
+```vue
+<script setup>
+import { router } from '@inertiajs/vue3'
+</script>
+
+<template>
+  <Link
+    href="/another-page"
+    :view-transition="
+      (transition) => transition.finished.then(() => console.log('Done'))
+    "
+  >
+    Navigate
+  </Link>
+</template>
+```
+
+== React
+
+```jsx
+import { router } from '@inertiajs/react'
+
+export default () => (
+  <Link
+    href="/another-page"
+    viewTransition={(transition) =>
+      transition.finished.then(() => console.log('Done'))
+    }
+  >
+    Navigate
+  </Link>
+)
+```
+
+== Svelte 4|Svelte 5
+
+```svelte
+<script>
+  import { router } from '@inertiajs/svelte'
+</script>
+
+<Link
+  href="/another-page"
+  viewTransition={(transition) =>
+    transition.finished.then(() => console.log('Done'))}
+>
+  Navigate
+</Link>
+```
+
+:::
+
+## Global configuration
+
+You may enable view transitions globally for all visits by configuring the `visitOptions` callback
+when [initializing your Inertia app](/guide/client-side-setup#configuring-defaults).
+
+:::tabs key:frameworks
+== Vue
+
+```js
+import { router } from '@inertiajs/vue3'
+
+createInertiaApp({
+  // ...
+  defaults: {
+    visitOptions: (href, options) => {
+      return { viewTransition: true }
+    },
+  },
+})
+```
+
+== React
+
+```js
+import { router } from '@inertiajs/react'
+
+createInertiaApp({
+  // ...
+  defaults: {
+    visitOptions: (href, options) => {
+      return { viewTransition: true }
+    },
+  },
+})
+```
+
+== Svelte 4|Svelte 5
+
+```js
+import { router } from '@inertiajs/svelte'
+
+createInertiaApp({
+  // ...
+  defaults: {
+    visitOptions: (href, options) => {
+      return { viewTransition: true }
+    },
+  },
+})
+```
+
+:::
+
+## Customizing transitions
+
+You may customize the transition animations using CSS. The View Transitions API uses several pseudo-elements that you can target with CSS to create custom animations. The following examples are taken from the [Chrome documentation](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#customize_the_transition).
+
+```css
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-from-right {
+  from {
+    transform: translateX(30px);
+  }
+}
+
+@keyframes slide-to-left {
+  to {
+    transform: translateX(-30px);
+  }
+}
+
+::view-transition-old(root) {
+  animation:
+    90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+}
+
+::view-transition-new(root) {
+  animation:
+    210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
+    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+}
+```
+
+You may also animate individual elements between pages by assigning them a unique `view-transition-name`. For example, you may animate an avatar from a large size on a profile page to a small size on a dashboard.
+
+:::tabs key:frameworks
+== Vue
+
+```vue
+<!-- Profile.vue -->
+<template>
+  <img src="/avatar.jpg" alt="User" class="avatar-large" />
+</template>
+
+<style>
+.avatar-large {
+  view-transition-name: user-avatar;
+  width: auto;
+  height: 200px;
+}
+</style>
+```
+
+```vue
+<!-- Dashboard.vue -->
+<template>
+  <img src="/avatar.jpg" alt="User" class="avatar-small" />
+</template>
+
+<style>
+.avatar-small {
+  view-transition-name: user-avatar;
+  width: auto;
+  height: 40px;
+}
+</style>
+```
+
+== React
+
+```jsx
+// Profile.jsx
+export default function Profile() {
+  return <img src="/avatar.jpg" alt="User" className="avatar-large" />
+}
+```
+
+```jsx
+// Dashboard.jsx
+export default function Dashboard() {
+  return <img src="/avatar.jpg" alt="User" className="avatar-small" />
+}
+```
+
+```css
+.avatar-large {
+  view-transition-name: user-avatar;
+  width: auto;
+  height: 200px;
+}
+
+.avatar-small {
+  view-transition-name: user-avatar;
+  width: auto;
+  height: 40px;
+}
+```
+
+== Svelte 4|Svelte 5
+
+```svelte
+<!-- Profile.svelte -->
+<img src="/avatar.jpg" alt="User" class="avatar-large" />
+
+<style>
+  .avatar-large {
+    view-transition-name: user-avatar;
+    width: auto;
+    height: 200px;
+  }
+</style>
+```
+
+```svelte
+<!-- Dashboard.svelte -->
+<img src="/avatar.jpg" alt="User" class="avatar-small" />
+
+<style>
+  .avatar-small {
+    view-transition-name: user-avatar;
+    width: auto;
+    height: 40px;
+  }
+</style>
+```
+
+:::
+
+You may customize view transitions to your liking using any CSS animations you wish. For more information, please consult the [View Transitions API documentation](https://developer.chrome.com/docs/web-platform/view-transitions/same-document#customize_the_transition).

From 8092c53e6501d349e71aacce262047ebb081fede Mon Sep 17 00:00:00 2001
From: Svyatoslav Kryukov <me@skryukov.dev>
Date: Sat, 15 Nov 2025 00:29:45 +0300
Subject: [PATCH 5/5] Add available since tags

---
 docs/guide/client-side-setup.md | 2 ++
 docs/guide/error-handling.md    | 2 ++
 docs/guide/links.md             | 2 ++
 docs/guide/manual-visits.md     | 2 ++
 docs/guide/title-and-meta.md    | 2 ++
 docs/guide/view-transitions.md  | 2 ++
 6 files changed, 12 insertions(+)

diff --git a/docs/guide/client-side-setup.md b/docs/guide/client-side-setup.md
index ab3f5790..01732666 100644
--- a/docs/guide/client-side-setup.md
+++ b/docs/guide/client-side-setup.md
@@ -116,6 +116,8 @@ The `setup` callback receives everything necessary to initialize the client-side
 
 ## Configuring defaults
 
+@available_since core=2.2.11
+
 You may pass a `defaults` object to `createInertiaApp()` to configure default settings for various features. You don't have to pass all keys, just the ones you want to tweak.
 
 ```js
diff --git a/docs/guide/error-handling.md b/docs/guide/error-handling.md
index a6facea1..5acca89d 100644
--- a/docs/guide/error-handling.md
+++ b/docs/guide/error-handling.md
@@ -8,6 +8,8 @@ Inertia solves this issue by showing all non-Inertia responses in a modal. This
 
 ## Dialog element
 
+@available_since core=2.2.13
+
 By default, Inertia displays error modals using a custom `<div>` overlay. However, you can opt-in to using the native HTML `<dialog>` element instead, which provides built-in modal functionality including backdrop handling.
 
 To enable this, configure the `future.useDialogForErrorModal` option in your [application defaults](/guide/client-side-setup#configuring-defaults).
diff --git a/docs/guide/links.md b/docs/guide/links.md
index 85b545ce..48e9ddaa 100644
--- a/docs/guide/links.md
+++ b/docs/guide/links.md
@@ -418,6 +418,8 @@ For more information on this topic, check out the complete documentation on [par
 
 ## View transitions
 
+@available_since core=2.2.13
+
 You may enable [View transitions](/guide/view-transitions) for a link by setting the `viewTransition` prop to `true`. This will use the browser's View Transitions API to animate the page transition.
 
 :::tabs key:frameworks
diff --git a/docs/guide/manual-visits.md b/docs/guide/manual-visits.md
index 48e78089..5bc9b73b 100644
--- a/docs/guide/manual-visits.md
+++ b/docs/guide/manual-visits.md
@@ -917,6 +917,8 @@ For more information on this feature, check out the [partial reloads](/guide/par
 
 ## View transitions
 
+@available_since core=2.2.13
+
 You may enable [View transitions](/guide/view-transitions) for a visit by setting the `viewTransition` option to `true`. This will use the browser's View Transitions API to animate the page transition.
 
 :::tabs key:frameworks
diff --git a/docs/guide/title-and-meta.md b/docs/guide/title-and-meta.md
index 92769442..a0a38436 100644
--- a/docs/guide/title-and-meta.md
+++ b/docs/guide/title-and-meta.md
@@ -350,6 +350,8 @@ export default () => <AppHead title="About" />
 
 ## Inertia attribute on elements
 
+@available_since core=2.2.13
+
 Inertia has historically used the `inertia` attribute to track and manage elements in the document `<head>`. However, you can now opt-in to using the more standards-compliant `data-inertia` attribute instead. According to the HTML specification, custom attributes should be prefixed with `data-` to avoid conflicts with future HTML standards.
 
 To enable this, configure the `future.useDataInertiaHeadAttribute` option in your [application defaults](/guide/client-side-setup#configuring-defaults).
diff --git a/docs/guide/view-transitions.md b/docs/guide/view-transitions.md
index 5278317a..5de7e8a0 100644
--- a/docs/guide/view-transitions.md
+++ b/docs/guide/view-transitions.md
@@ -1,5 +1,7 @@
 # View Transitions
 
+@available_since core=2.2.13
+
 Inertia supports the [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions), allowing you to animate page transitions.
 
 > [!NOTE]