Add docs on defaults configuration and view transitions

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' },
           ],
         },
         {

docs/guide/client-side-setup.md

@@ -114,6 +114,102 @@ createInertiaApp({
 
 The `setup` callback receives everything necessary to initialize the client-side framework, including the root Inertia `App` component.
 
+## 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
+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.

docs/guide/error-handling.md

@@ -6,6 +6,25 @@ 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
+
+@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).
+
+```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.

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,15 +160,15 @@ 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>
       <option value="ca">Canada</option>
       <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>
@@ -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.

docs/guide/links.md

@@ -416,6 +416,49 @@ export default () => (
 
 For more information on this topic, check out the complete documentation on [partial reloads](/guide/partial-reloads.md).
 
+## 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
+== 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.

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