Ability to configure defaults in createInertiaApp()

packages/core/src/router.ts

@@ -1,3 +1,4 @@
+import { mergeWith } from 'es-toolkit'
 import { hideProgress, revealProgress } from '.'
 import { eventHandler } from './eventHandler'
 import { fireBeforeEvent } from './events'
@@ -44,6 +45,12 @@ export class Router {
     interruptible: false,
   })
 
+  protected defaultVisitOptionsCallback: ((href: string | URL, options: Visit) => Partial<Visit>) | null = null
+
+  public withDefaultVisitOptions(cb: (href: string | URL, options: Visit) => Partial<Visit>): void {
+    this.defaultVisitOptionsCallback = cb
+  }
+
   public init({ initialPage, resolveComponent, swapComponent }: RouterInitParams): void {
     currentPage.init({
       initialPage,
@@ -323,12 +330,8 @@ export class Router {
     }
   }
 
-  protected getPendingVisit(
-    href: string | URL,
-    options: VisitOptions,
-    pendingVisitOptions: Partial<PendingVisitOptions> = {},
-  ): PendingVisit {
-    const mergedOptions: Visit = {
+  protected mergeVisitOptions(href: string | URL, mergeOptions: Partial<Visit> = {}): Visit {
+    const defaultOptions: Visit = {
       method: 'get',
       data: {},
       replace: false,
@@ -346,9 +349,37 @@ export class Router {
       reset: [],
       preserveUrl: false,
       prefetch: false,
-      ...options,
     }
 
+    if (!this.defaultVisitOptionsCallback) {
+      return { ...defaultOptions, ...mergeOptions }
+    }
+
+    const options = {
+      ...defaultOptions,
+      ...this.defaultVisitOptionsCallback(href, defaultOptions),
+    }
+
+    return mergeWith(options, mergeOptions, (originalValue, mergeValue) => {
+      if (Array.isArray(mergeValue) && Array.isArray(originalValue)) {
+        return [...originalValue, ...mergeValue]
+      }
+
+      if (typeof mergeValue === 'object' && typeof originalValue === 'object') {
+        return { ...originalValue, ...mergeValue }
+      }
+
+      return mergeValue
+    })
+  }
+
+  protected getPendingVisit(
+    href: string | URL,
+    options: VisitOptions,
+    pendingVisitOptions: Partial<PendingVisitOptions> = {},
+  ): PendingVisit {
+    const mergedOptions: Visit = this.mergeVisitOptions(href, options)
+
     const [url, _data] = transformUrlAndData(
       href,
       mergedOptions.data,

packages/vue3/src/app.ts

@@ -1,4 +1,4 @@
-import { createHeadManager, Page, PageProps, router } from '@inertiajs/core'
+import { createHeadManager, Page, PageProps, router, Visit } from '@inertiajs/core'
 import {
   computed,
   DefineComponent,
@@ -21,6 +21,9 @@ export interface InertiaAppProps {
   resolveComponent?: (name: string) => DefineComponent | Promise<DefineComponent>
   titleCallback?: (title: string) => string
   onHeadUpdate?: (elements: string[]) => void
+  defaults?: {
+    visitOptions?: (href: string | URL, options: Visit) => Partial<Visit>
+  }
 }
 
 export type InertiaApp = DefineComponent<InertiaAppProps>
@@ -56,8 +59,15 @@ const App: InertiaApp = defineComponent({
       required: false,
       default: () => () => {},
     },
+    defaults: {
+      type: Object as PropType<{
+        visitOptions?: (href: string | URL, options: Visit) => Partial<Visit>
+      }>,
+      required: false,
+      default: () => ({}),
+    },
   },
-  setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate }) {
+  setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate, defaults }) {
     component.value = initialComponent ? markRaw(initialComponent) : null
     page.value = initialPage
     key.value = null
@@ -76,6 +86,10 @@ const App: InertiaApp = defineComponent({
         },
       })
 
+      if (defaults?.visitOptions) {
+        router.withDefaultVisitOptions(defaults.visitOptions)
+      }
+
       router.on('navigate', () => headManager.forceUpdate())
     }
 

packages/vue3/src/createInertiaApp.ts

@@ -1,4 +1,4 @@
-import { Page, router, setupProgress } from '@inertiajs/core'
+import { Page, router, setupProgress, Visit } from '@inertiajs/core'
 import { DefineComponent, Plugin, App as VueApp, createSSRApp, h } from 'vue'
 import App, { InertiaApp, InertiaAppProps, plugin } from './app'
 
@@ -17,6 +17,9 @@ interface CreateInertiaAppProps {
       }
   page?: Page
   render?: (app: VueApp) => Promise<string>
+  defaults?: {
+    visitOptions?: (href: string | URL, options: Visit) => Partial<Visit>
+  }
 }
 
 export default async function createInertiaApp({
@@ -27,6 +30,7 @@ export default async function createInertiaApp({
   progress = {},
   page,
   render,
+  defaults,
 }: CreateInertiaAppProps): Promise<{ head: string[]; body: string }> {
   const isServer = typeof window === 'undefined'
   const el = isServer ? null : document.getElementById(id)
@@ -48,6 +52,7 @@ export default async function createInertiaApp({
         resolveComponent,
         titleCallback: title,
         onHeadUpdate: isServer ? (elements) => (head = elements) : null,
+        defaults,
       },
       plugin,
     })

playgrounds/vue3/resources/js/app.ts

@@ -14,4 +14,14 @@ createInertiaApp({
       .use(plugin)
       .mount(el)
   },
+  defaults: {
+    visitOptions: (href, options) => {
+      return {
+        // queryStringArrayFormat: 'indices',
+        // headers: {
+        //   'X-Foo': 'bar',
+        // },
+      }
+    },
+  },
 })