Document future app settings (#483)

pascalbaljet · web-flow · commit cd7e77a1aad1 · 2025-10-28T19:29:01.000+01:00
diff --git a/resources/js/Pages/error-handling.jsx b/resources/js/Pages/error-handling.jsx
@@ -1,10 +1,11 @@
-import { Code, H1, H2, P, TabbedCode } from '@/Components'
+import { A, Code, CodeBlock, H1, H2, P, TabbedCode } from '@/Components'
 import dedent from 'dedent-js'
 
 export const meta = {
   title: 'Error handling',
   links: [
     { url: '#development', name: 'Development' },
+    { url: '#dialog-element', name: 'Dialog element' },
     { url: '#production', name: 'Production' },
   ],
 }
@@ -34,6 +35,29 @@ export default function () {
           src="https://player.vimeo.com/video/363562630?autoplay=1&loop=1&muted=1&background=1"
         ></iframe>
       </div>
+      <H2>Dialog element</H2>
+      <P>
+        By default, Inertia displays error modals using a custom <Code>{'<div>'}</Code> overlay. However, you can opt-in
+        to using the native HTML <Code>{'<dialog>'}</Code> element instead, which provides built-in modal functionality
+        including backdrop handling.
+      </P>
+      <P>
+        To enable this, configure the <Code>future.useDialogForErrorModal</Code> option in your{' '}
+        <A href="/client-side-setup#configuring-defaults">application defaults</A>.
+      </P>
+      <CodeBlock
+        language="js"
+        children={dedent`
+          createInertiaApp({
+            // resolve, setup, etc.
+            defaults: {
+              future: {
+                useDialogForErrorModal: true,
+              },
+            },
+          })
+        `}
+      />
       <H2>Production</H2>
       <P>
         In production you will want to return a proper Inertia error response instead of relying on the modal-driven
diff --git a/resources/js/Pages/title-and-meta.jsx b/resources/js/Pages/title-and-meta.jsx
@@ -1,4 +1,4 @@
-import { Code, CodeBlock, H1, H2, Notice, P, TabbedCode } from '@/Components'
+import { A, Code, CodeBlock, H1, H2, Notice, P, TabbedCode } from '@/Components'
 import dedent from 'dedent-js'
 
 export const meta = {
@@ -9,6 +9,7 @@ export const meta = {
     { url: '#title-callback', name: 'Title callback' },
     { url: '#multiple-head-instances', name: 'Multiple Head instances' },
     { url: '#head-extension', name: 'Head extension' },
+    { url: '#inertia-attribute-on-elements', name: 'Inertia attribute' },
   ],
 }
 
@@ -371,6 +372,30 @@ export default function () {
           },
         ]}
       />
+      <H2>Inertia attribute on elements</H2>
+      <P>
+        Inertia has historically used the <Code>inertia</Code> attribute to track and manage elements in the document{' '}
+        <Code>{'<head>'}</Code>. However, you can now opt-in to using the more standards-compliant{' '}
+        <Code>data-inertia</Code> attribute instead. According to the HTML specification, custom attributes should be
+        prefixed with <Code>data-</Code> to avoid conflicts with future HTML standards.
+      </P>
+      <P>
+        To enable this, configure the <Code>future.useDataInertiaHeadAttribute</Code> option in your{' '}
+        <A href="/client-side-setup#configuring-defaults">application defaults</A>.
+      </P>
+      <CodeBlock
+        language="js"
+        children={dedent`
+          createInertiaApp({
+            // resolve, setup, etc.
+            defaults: {
+              future: {
+                useDataInertiaHeadAttribute: true,
+              },
+            },
+          })
+        `}
+      />
     </>
   )
 }
