@inertiajs/vue3 2.3.17 → 3.0.0-beta.2

package/dist/index.js

@@ -1,54 +1,64 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key2 of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key2) && key2 !== except)
-        __defProp(to, key2, { get: () => from[key2], enumerable: !(desc = __getOwnPropDesc(from, key2)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  App: () => app_default,
-  Deferred: () => deferred_default,
-  Form: () => form_default,
-  Head: () => head_default,
-  InfiniteScroll: () => infiniteScroll_default,
-  Link: () => link_default,
-  WhenVisible: () => whenVisible_default,
-  config: () => config,
-  createInertiaApp: () => createInertiaApp,
-  progress: () => import_core13.progress,
-  router: () => import_core13.router,
-  useForm: () => useForm,
-  useFormContext: () => useFormContext,
-  usePage: () => usePage,
-  usePoll: () => usePoll,
-  usePrefetch: () => usePrefetch,
-  useRemember: () => useRemember
-});
-module.exports = __toCommonJS(index_exports);
-var import_core12 = require("@inertiajs/core");
-var import_core13 = require("@inertiajs/core");
+import { config as coreConfig } from "@inertiajs/core";
+import { http as http2, progress, router as router12 } from "@inertiajs/core";
 
 // src/app.ts
-var import_core3 = require("@inertiajs/core");
-var import_vue2 = require("vue");
+import {
+  createHeadManager,
+  normalizeLayouts,
+  router as router4
+} from "@inertiajs/core";
+import {
+  computed as computed2,
+  defineComponent as defineComponent2,
+  h,
+  markRaw,
+  reactive as reactive2,
+  ref as ref2,
+  shallowRef
+} from "vue";
+
+// src/layoutProps.ts
+import { createLayoutPropsStore, mergeLayoutProps } from "@inertiajs/core";
+import { computed, defineComponent, inject, provide, ref, useAttrs } from "vue";
+var store = createLayoutPropsStore();
+var state = ref(store.get());
+store.subscribe(() => {
+  state.value = store.get();
+});
+function setLayoutProps(props) {
+  store.set(props);
+}
+function setLayoutPropsFor(name, props) {
+  store.setFor(name, props);
+}
+function resetLayoutProps() {
+  store.reset();
+}
+var LAYOUT_CONTEXT_KEY = /* @__PURE__ */ Symbol("inertia-layout");
+var LayoutProvider = defineComponent({
+  inheritAttrs: false,
+  props: {
+    layoutName: String
+  },
+  setup(props, { slots }) {
+    provide(LAYOUT_CONTEXT_KEY, props.layoutName);
+    return () => slots.default?.();
+  }
+});
+function useLayoutProps(defaults) {
+  const attrs = useAttrs();
+  const name = inject(LAYOUT_CONTEXT_KEY, void 0);
+  return computed(() => {
+    const { shared, named } = state.value;
+    const dynamicProps = name ? { ...shared, ...named[name] } : shared;
+    return mergeLayoutProps(defaults, attrs, dynamicProps);
+  });
+}
 
 // src/remember.ts
-var import_core = require("@inertiajs/core");
-var import_lodash_es = require("lodash-es");
+import { router } from "@inertiajs/core";
+import { cloneDeep } from "lodash-es";
 var remember = {
   created() {
     if (!this.$options.remember) {
@@ -64,7 +74,7 @@ var remember = {
       this.$options.remember = { data: [this.$options.remember.data] };
     }
     const rememberKey = this.$options.remember.key instanceof Function ? this.$options.remember.key.call(this) : this.$options.remember.key;
-    const restored = import_core.router.restore(rememberKey);
+    const restored = router.restore(rememberKey);
     const rememberable = this.$options.remember.data.filter((key2) => {
       return !(this[key2] !== null && typeof this[key2] === "object" && this[key2].__rememberable === false);
     });
@@ -78,11 +88,11 @@ var remember = {
       this.$watch(
         key2,
         () => {
-          import_core.router.remember(
+          router.remember(
             rememberable.reduce(
               (data, key3) => ({
                 ...data,
-                [key3]: (0, import_lodash_es.cloneDeep)(hasCallbacks(key3) ? this[key3].__remember() : this[key3])
+                [key3]: cloneDeep(hasCallbacks(key3) ? this[key3].__remember() : this[key3])
               }),
               {}
             ),
@@ -97,57 +107,59 @@ var remember = {
 var remember_default = remember;
 
 // src/useForm.ts
-var import_core2 = require("@inertiajs/core");
-var import_laravel_precognition = require("laravel-precognition");
-var import_lodash_es2 = require("lodash-es");
-var import_vue = require("vue");
-var reservedFormKeys = null;
-var bootstrapping = false;
-function validateFormDataKeys(data) {
-  if (bootstrapping) {
-    return;
-  }
-  if (reservedFormKeys === null) {
-    bootstrapping = true;
-    reservedFormKeys = new Set(Object.keys(useForm({})));
-    bootstrapping = false;
-  }
-  const conflicts = Object.keys(data).filter((key2) => reservedFormKeys.has(key2));
-  if (conflicts.length > 0) {
-    console.error(
-      `[Inertia] useForm() data contains field(s) that conflict with form properties: ${conflicts.map((k) => `"${k}"`).join(", ")}. These fields will be overwritten by form methods/properties. Please rename these fields.`
-    );
-  }
-}
-function useForm(...args) {
-  let { rememberKey, data, precognitionEndpoint } = import_core2.UseFormUtils.parseUseFormArguments(...args);
-  const restored = rememberKey ? import_core2.router.restore(rememberKey) : null;
-  let defaults = typeof data === "function" ? (0, import_lodash_es2.cloneDeep)(data()) : (0, import_lodash_es2.cloneDeep)(data);
-  validateFormDataKeys(defaults);
-  let cancelToken = null;
-  let recentlySuccessfulTimeoutId;
-  let transform = (data2) => data2;
+import {
+  router as router3,
+  UseFormUtils as UseFormUtils2
+} from "@inertiajs/core";
+import { cloneDeep as cloneDeep3 } from "lodash-es";
+
+// src/useFormState.ts
+import {
+  router as router2,
+  UseFormUtils
+} from "@inertiajs/core";
+import {
+  createValidator,
+  resolveName,
+  toSimpleValidationErrors
+} from "laravel-precognition";
+import { cloneDeep as cloneDeep2, get, has, isEqual, set } from "lodash-es";
+import { reactive, watch } from "vue";
+function useFormState(options) {
+  const { data: dataOption, rememberKey } = options;
+  let { precognitionEndpoint } = options;
+  const isDataFunction = typeof dataOption === "function";
+  const resolveData = () => isDataFunction ? dataOption() : dataOption;
+  const restored = rememberKey ? router2.restore(rememberKey) : null;
+  const initialData = restored?.data ?? cloneDeep2(resolveData());
+  let defaults = cloneDeep2(initialData);
+  let transform = (data) => data;
   let validatorRef = null;
-  let rememberExcludeKeys = [];
+  let withAllErrors = null;
+  const withAllErrorsEnabled = () => withAllErrors ?? config.get("form.withAllErrors");
+  let recentlySuccessfulTimeoutId;
   let defaultsCalledInOnSuccess = false;
-  const form = (0, import_vue.reactive)({
-    ...restored ? restored.data : (0, import_lodash_es2.cloneDeep)(defaults),
+  let rememberExcludeKeys = [];
+  const form = reactive({
+    ...cloneDeep2(defaults),
     isDirty: false,
-    errors: restored ? restored.errors : {},
+    errors: {},
     hasErrors: false,
     processing: false,
     progress: null,
     wasSuccessful: false,
     recentlySuccessful: false,
-    withPrecognition(...args2) {
-      precognitionEndpoint = import_core2.UseFormUtils.createWayfinderCallback(...args2);
+    withPrecognition(...args) {
+      precognitionEndpoint = UseFormUtils.createWayfinderCallback(...args);
       const formWithPrecognition = this;
-      let withAllErrors = null;
-      const validator = (0, import_laravel_precognition.createValidator)((client) => {
-        const { method, url } = precognitionEndpoint();
-        const transformedData = (0, import_lodash_es2.cloneDeep)(transform(this.data()));
-        return client[method](url, transformedData);
-      }, (0, import_lodash_es2.cloneDeep)(defaults));
+      const validator = createValidator(
+        (client) => {
+          const { method, url } = precognitionEndpoint();
+          const transformedData = cloneDeep2(transform(this.data()));
+          return client[method](url, transformedData);
+        },
+        cloneDeep2(defaults)
+      );
       validatorRef = validator;
       validator.on("validatingChanged", () => {
         formWithPrecognition.validating = validator.validating();
@@ -156,7 +168,7 @@ function useForm(...args) {
       }).on("touchedChanged", () => {
         formWithPrecognition.__touched = validator.touched();
       }).on("errorsChanged", () => {
-        const validationErrors = withAllErrors ?? config.get("form.withAllErrors") ? validator.errors() : (0, import_laravel_precognition.toSimpleValidationErrors)(validator.errors());
+        const validationErrors = withAllErrorsEnabled() ? validator.errors() : toSimpleValidationErrors(validator.errors());
         this.errors = {};
         this.setError(validationErrors);
         formWithPrecognition.__valid = validator.valid();
@@ -195,23 +207,23 @@ function useForm(...args) {
           if (field === void 0) {
             validator.validate(config3);
           } else {
-            const fieldName = (0, import_laravel_precognition.resolveName)(field);
+            const fieldName = resolveName(field);
             const transformedData = transform(this.data());
-            validator.validate(fieldName, (0, import_lodash_es2.get)(transformedData, fieldName), config3);
+            validator.validate(fieldName, get(transformedData, fieldName), config3);
           }
           return formWithPrecognition;
         },
         setErrors: (errors) => tap(formWithPrecognition, () => this.setError(errors)),
         forgetError: (field) => tap(
           formWithPrecognition,
-          () => this.clearErrors((0, import_laravel_precognition.resolveName)(field))
+          () => this.clearErrors(resolveName(field))
         )
       });
       return formWithPrecognition;
     },
     data() {
       return Object.keys(defaults).reduce((carry, key2) => {
-        return (0, import_lodash_es2.set)(carry, key2, (0, import_lodash_es2.get)(this, key2));
+        return set(carry, key2, get(this, key2));
       }, {});
     },
     transform(callback) {
@@ -219,30 +231,34 @@ function useForm(...args) {
       return this;
     },
     defaults(fieldOrFields, maybeValue) {
-      if (typeof data === "function") {
+      if (isDataFunction) {
         throw new Error("You cannot call `defaults()` when using a function to define your form data.");
       }
       defaultsCalledInOnSuccess = true;
       if (typeof fieldOrFields === "undefined") {
-        defaults = (0, import_lodash_es2.cloneDeep)(this.data());
+        defaults = cloneDeep2(this.data());
         this.isDirty = false;
       } else {
-        defaults = typeof fieldOrFields === "string" ? (0, import_lodash_es2.set)((0, import_lodash_es2.cloneDeep)(defaults), fieldOrFields, maybeValue) : Object.assign({}, (0, import_lodash_es2.cloneDeep)(defaults), fieldOrFields);
+        defaults = typeof fieldOrFields === "string" ? set(cloneDeep2(defaults), fieldOrFields, maybeValue) : Object.assign({}, cloneDeep2(defaults), fieldOrFields);
       }
       validatorRef?.defaults(defaults);
       return this;
     },
     reset(...fields) {
-      const resolvedData = typeof data === "function" ? (0, import_lodash_es2.cloneDeep)(data()) : (0, import_lodash_es2.cloneDeep)(defaults);
-      const clonedData = (0, import_lodash_es2.cloneDeep)(resolvedData);
+      const resolvedData = isDataFunction ? cloneDeep2(resolveData()) : defaults;
+      const clonedData = cloneDeep2(resolvedData);
       if (fields.length === 0) {
-        defaults = clonedData;
-        Object.assign(this, resolvedData);
+        if (isDataFunction) {
+          defaults = clonedData;
+        }
+        Object.assign(this, clonedData);
       } else {
         ;
-        fields.filter((key2) => (0, import_lodash_es2.has)(clonedData, key2)).forEach((key2) => {
-          (0, import_lodash_es2.set)(defaults, key2, (0, import_lodash_es2.get)(clonedData, key2));
-          (0, import_lodash_es2.set)(this, key2, (0, import_lodash_es2.get)(resolvedData, key2));
+        fields.filter((key2) => has(clonedData, key2)).forEach((key2) => {
+          if (isDataFunction) {
+            set(defaults, key2, get(clonedData, key2));
+          }
+          set(this, key2, get(clonedData, key2));
         });
       }
       validatorRef?.reset(...fields);
@@ -278,147 +294,238 @@ function useForm(...args) {
       this.clearErrors(...fields);
       return this;
     },
-    submit(...args2) {
-      const { method, url, options } = import_core2.UseFormUtils.parseSubmitArguments(args2, precognitionEndpoint);
+    __rememberable: rememberKey === null,
+    __remember() {
+      const formData = this.data();
+      if (rememberExcludeKeys.length > 0) {
+        const filtered = { ...formData };
+        rememberExcludeKeys.forEach((k) => delete filtered[k]);
+        return { data: filtered, errors: this.errors };
+      }
+      return { data: formData, errors: this.errors };
+    },
+    __restore(restored2) {
+      Object.assign(this, restored2.data);
+      this.setError(restored2.errors);
+    }
+  });
+  const typedForm = form;
+  if (restored?.errors) {
+    typedForm.setError(restored.errors);
+  }
+  watch(
+    typedForm,
+    () => {
+      typedForm.isDirty = !isEqual(typedForm.data(), defaults);
+    },
+    { immediate: true, deep: true }
+  );
+  watch(
+    typedForm,
+    (newValue) => {
+      if (!rememberKey) {
+        return;
+      }
+      const storedData = router2.restore(rememberKey);
+      const newData = cloneDeep2(newValue.__remember());
+      if (!isEqual(storedData, newData)) {
+        router2.remember(newData, rememberKey);
+      }
+    },
+    { immediate: true, deep: true }
+  );
+  if (precognitionEndpoint) {
+    typedForm.withPrecognition(precognitionEndpoint);
+  }
+  return {
+    form: typedForm,
+    setDefaults: (newDefaults) => {
+      defaults = newDefaults;
+    },
+    getTransform: () => transform,
+    getPrecognitionEndpoint: () => precognitionEndpoint ?? null,
+    markAsSuccessful: () => {
+      typedForm.clearErrors();
+      typedForm.wasSuccessful = true;
+      typedForm.recentlySuccessful = true;
+      recentlySuccessfulTimeoutId = setTimeout(
+        () => typedForm.recentlySuccessful = false,
+        config.get("form.recentlySuccessfulDuration")
+      );
+    },
+    wasDefaultsCalledInOnSuccess: () => defaultsCalledInOnSuccess,
+    resetDefaultsCalledInOnSuccess: () => {
       defaultsCalledInOnSuccess = false;
+    },
+    setRememberExcludeKeys: (keys) => {
+      rememberExcludeKeys = keys;
+    },
+    resetBeforeSubmit: () => {
+      typedForm.wasSuccessful = false;
+      typedForm.recentlySuccessful = false;
+      clearTimeout(recentlySuccessfulTimeoutId);
+    },
+    finishProcessing: () => {
+      typedForm.processing = false;
+      typedForm.progress = null;
+    },
+    withAllErrors: {
+      enabled: withAllErrorsEnabled,
+      enable: () => {
+        withAllErrors = true;
+      }
+    }
+  };
+}
+
+// src/useForm.ts
+var reservedFormKeys = null;
+var bootstrapping = false;
+function validateFormDataKeys(data) {
+  if (bootstrapping) {
+    return;
+  }
+  if (reservedFormKeys === null) {
+    bootstrapping = true;
+    reservedFormKeys = new Set(Object.keys(useForm({})));
+    bootstrapping = false;
+  }
+  const conflicts = Object.keys(data).filter((key2) => reservedFormKeys.has(key2));
+  if (conflicts.length > 0) {
+    console.error(
+      `[Inertia] useForm() data contains field(s) that conflict with form properties: ${conflicts.map((k) => `"${k}"`).join(", ")}. These fields will be overwritten by form methods/properties. Please rename these fields.`
+    );
+  }
+}
+function useForm(...args) {
+  const { rememberKey, data, precognitionEndpoint } = UseFormUtils2.parseUseFormArguments(...args);
+  const initialDefaults = typeof data === "function" ? cloneDeep3(data()) : cloneDeep3(data);
+  validateFormDataKeys(initialDefaults);
+  let cancelToken = null;
+  let pendingOptimisticCallback = null;
+  const {
+    form: baseForm,
+    setDefaults,
+    getTransform,
+    getPrecognitionEndpoint,
+    markAsSuccessful,
+    wasDefaultsCalledInOnSuccess,
+    resetDefaultsCalledInOnSuccess,
+    setRememberExcludeKeys,
+    resetBeforeSubmit,
+    finishProcessing
+  } = useFormState({
+    data,
+    rememberKey,
+    precognitionEndpoint
+  });
+  const form = baseForm;
+  const createSubmitMethod = (method) => (url, options = {}) => {
+    form.submit(method, url, options);
+  };
+  Object.assign(form, {
+    submit(...args2) {
+      const { method, url, options } = UseFormUtils2.parseSubmitArguments(args2, getPrecognitionEndpoint());
+      resetDefaultsCalledInOnSuccess();
       const _options = {
         ...options,
         onCancelToken: (token) => {
           cancelToken = token;
-          if (options.onCancelToken) {
-            return options.onCancelToken(token);
-          }
+          return options.onCancelToken?.(token);
         },
         onBefore: (visit) => {
-          this.wasSuccessful = false;
-          this.recentlySuccessful = false;
-          clearTimeout(recentlySuccessfulTimeoutId);
-          if (options.onBefore) {
-            return options.onBefore(visit);
-          }
+          resetBeforeSubmit();
+          return options.onBefore?.(visit);
         },
         onStart: (visit) => {
-          this.processing = true;
-          if (options.onStart) {
-            return options.onStart(visit);
-          }
+          form.processing = true;
+          return options.onStart?.(visit);
         },
         onProgress: (event) => {
-          this.progress = event ?? null;
-          if (options.onProgress) {
-            return options.onProgress(event);
-          }
+          form.progress = event ?? null;
+          return options.onProgress?.(event);
         },
         onSuccess: async (page2) => {
-          this.processing = false;
-          this.progress = null;
-          this.clearErrors();
-          this.wasSuccessful = true;
-          this.recentlySuccessful = true;
-          recentlySuccessfulTimeoutId = setTimeout(
-            () => this.recentlySuccessful = false,
-            config.get("form.recentlySuccessfulDuration")
-          );
+          markAsSuccessful();
           const onSuccess = options.onSuccess ? await options.onSuccess(page2) : null;
-          if (!defaultsCalledInOnSuccess) {
-            defaults = (0, import_lodash_es2.cloneDeep)(this.data());
-            this.isDirty = false;
+          if (!wasDefaultsCalledInOnSuccess()) {
+            setDefaults(cloneDeep3(form.data()));
+            form.isDirty = false;
           }
           return onSuccess;
         },
         onError: (errors) => {
-          this.processing = false;
-          this.progress = null;
-          this.clearErrors().setError(errors);
-          if (options.onError) {
-            return options.onError(errors);
-          }
+          form.clearErrors().setError(errors);
+          return options.onError?.(errors);
         },
         onCancel: () => {
-          this.processing = false;
-          this.progress = null;
-          if (options.onCancel) {
-            return options.onCancel();
-          }
+          return options.onCancel?.();
         },
         onFinish: (visit) => {
-          this.processing = false;
-          this.progress = null;
+          finishProcessing();
           cancelToken = null;
-          if (options.onFinish) {
-            return options.onFinish(visit);
-          }
+          return options.onFinish?.(visit);
         }
       };
-      const transformedData = transform(this.data());
+      _options.optimistic = _options.optimistic ?? pendingOptimisticCallback ?? void 0;
+      pendingOptimisticCallback = null;
+      const transformedData = getTransform()(form.data());
       if (method === "delete") {
-        import_core2.router.delete(url, { ..._options, data: transformedData });
+        router3.delete(url, { ..._options, data: transformedData });
       } else {
-        import_core2.router[method](url, transformedData, _options);
+        router3[method](url, transformedData, _options);
       }
     },
-    get(url, options) {
-      this.submit("get", url, options);
-    },
-    post(url, options) {
-      this.submit("post", url, options);
-    },
-    put(url, options) {
-      this.submit("put", url, options);
-    },
-    patch(url, options) {
-      this.submit("patch", url, options);
-    },
-    delete(url, options) {
-      this.submit("delete", url, options);
-    },
+    get: createSubmitMethod("get"),
+    post: createSubmitMethod("post"),
+    put: createSubmitMethod("put"),
+    patch: createSubmitMethod("patch"),
+    delete: createSubmitMethod("delete"),
     cancel() {
       if (cancelToken) {
         cancelToken.cancel();
       }
     },
     dontRemember(...keys) {
-      rememberExcludeKeys = keys;
-      return this;
+      setRememberExcludeKeys(keys);
+      return form;
     },
-    __rememberable: rememberKey === null,
-    __remember() {
-      const data2 = this.data();
-      if (rememberExcludeKeys.length > 0) {
-        const filtered = { ...data2 };
-        rememberExcludeKeys.forEach((k) => delete filtered[k]);
-        return { data: filtered, errors: this.errors };
-      }
-      return { data: data2, errors: this.errors };
-    },
-    __restore(restored2) {
-      Object.assign(this, restored2.data);
-      this.setError(restored2.errors);
+    optimistic(callback) {
+      pendingOptimisticCallback = callback;
+      return form;
     }
   });
-  const typedForm = form;
-  (0, import_vue.watch)(
-    typedForm,
-    (newValue) => {
-      typedForm.isDirty = !(0, import_lodash_es2.isEqual)(typedForm.data(), defaults);
-      const storedData = import_core2.router.restore(rememberKey);
-      const newData = (0, import_lodash_es2.cloneDeep)(newValue.__remember());
-      if (rememberKey && !(0, import_lodash_es2.isEqual)(storedData, newData)) {
-        import_core2.router.remember(newData, rememberKey);
-      }
-    },
-    { immediate: true, deep: true }
-  );
-  return precognitionEndpoint ? typedForm.withPrecognition(precognitionEndpoint) : typedForm;
+  return getPrecognitionEndpoint() ? form : form;
 }
 
 // src/app.ts
-var component = (0, import_vue2.ref)(void 0);
-var page = (0, import_vue2.ref)();
-var layout = (0, import_vue2.shallowRef)(null);
-var key = (0, import_vue2.ref)(void 0);
+function isComponent(value) {
+  if (!value) {
+    return false;
+  }
+  if (typeof value === "function") {
+    return true;
+  }
+  if (typeof value === "object") {
+    const obj = value;
+    return typeof obj.render === "function" || typeof obj.setup === "function" || typeof obj.template === "string" || "__file" in obj || "__name" in obj;
+  }
+  return false;
+}
+function isRenderFunction(value) {
+  if (typeof value !== "function") {
+    return false;
+  }
+  const fn = value;
+  return fn.length === 2 && typeof fn.prototype === "undefined";
+}
+var component = ref2(void 0);
+var page = ref2();
+var pageAccessor = null;
+var layout = shallowRef(null);
+var key = ref2(void 0);
 var headManager;
-var App = (0, import_vue2.defineComponent)({
+var App = defineComponent2({
   name: "Inertia",
   props: {
     initialPage: {
@@ -443,21 +550,35 @@ var App = (0, import_vue2.defineComponent)({
       required: false,
       default: () => () => {
       }
+    },
+    defaultLayout: {
+      type: Function,
+      required: false
     }
   },
-  setup({ initialPage, initialComponent, resolveComponent, titleCallback, onHeadUpdate }) {
-    component.value = initialComponent ? (0, import_vue2.markRaw)(initialComponent) : void 0;
+  setup({
+    initialPage,
+    initialComponent,
+    resolveComponent,
+    titleCallback,
+    onHeadUpdate,
+    defaultLayout
+  }) {
+    component.value = initialComponent ? markRaw(initialComponent) : void 0;
     page.value = { ...initialPage, flash: initialPage.flash ?? {} };
     key.value = void 0;
     const isServer = typeof window === "undefined";
-    headManager = (0, import_core3.createHeadManager)(isServer, titleCallback || ((title) => title), onHeadUpdate || (() => {
+    headManager = createHeadManager(isServer, titleCallback || ((title) => title), onHeadUpdate || (() => {
     }));
     if (!isServer) {
-      import_core3.router.init({
+      router4.init({
         initialPage,
         resolveComponent,
         swapComponent: async (options) => {
-          component.value = (0, import_vue2.markRaw)(options.component);
+          if (!options.preserveState) {
+            resetLayoutProps();
+          }
+          component.value = markRaw(options.component);
           page.value = options.page;
           key.value = options.preserveState ? key.value : Date.now();
         },
@@ -465,12 +586,12 @@ var App = (0, import_vue2.defineComponent)({
           page.value = { ...page.value, flash };
         }
       });
-      import_core3.router.on("navigate", () => headManager.forceUpdate());
+      router4.on("navigate", () => headManager.forceUpdate());
     }
     return () => {
       if (component.value) {
         component.value.inheritAttrs = !!component.value.inheritAttrs;
-        const child = (0, import_vue2.h)(component.value, {
+        const child = h(component.value, {
           ...page.value.props,
           key: key.value
         });
@@ -478,14 +599,27 @@ var App = (0, import_vue2.defineComponent)({
           component.value.layout = layout.value;
           layout.value = null;
         }
-        if (component.value.layout) {
-          if (typeof component.value.layout === "function") {
-            return component.value.layout(import_vue2.h, child);
+        if (component.value.layout && isRenderFunction(component.value.layout)) {
+          return component.value.layout(h, child);
+        }
+        const effectiveLayout = component.value.layout ?? defaultLayout?.(page.value.component, page.value);
+        if (effectiveLayout) {
+          const layouts = normalizeLayouts(
+            effectiveLayout,
+            isComponent,
+            component.value.layout ? isRenderFunction : void 0
+          );
+          if (layouts.length > 0) {
+            return layouts.reduceRight((childNode, layout2) => {
+              const layoutComponent = layout2.component;
+              layoutComponent.inheritAttrs = !!layoutComponent.inheritAttrs;
+              return h(
+                LayoutProvider,
+                { layoutName: layout2.name },
+                () => h(layoutComponent, { ...page.value.props, ...layout2.props }, () => childNode)
+              );
+            }, child);
           }
-          return (Array.isArray(component.value.layout) ? component.value.layout : [component.value.layout]).concat(child).reverse().reduce((child2, layout2) => {
-            layout2.inheritAttrs = !!layout2.inheritAttrs;
-            return (0, import_vue2.h)(layout2, { ...page.value.props }, () => child2);
-          });
         }
         return child;
       }
@@ -495,34 +629,43 @@ var App = (0, import_vue2.defineComponent)({
 var app_default = App;
 var plugin = {
   install(app) {
-    import_core3.router.form = useForm;
-    Object.defineProperty(app.config.globalProperties, "$inertia", { get: () => import_core3.router });
+    router4.form = useForm;
+    Object.defineProperty(app.config.globalProperties, "$inertia", { get: () => router4 });
     Object.defineProperty(app.config.globalProperties, "$page", { get: () => page.value });
     Object.defineProperty(app.config.globalProperties, "$headManager", { get: () => headManager });
     app.mixin(remember_default);
   }
 };
 function usePage() {
-  return (0, import_vue2.reactive)({
-    props: (0, import_vue2.computed)(() => page.value?.props),
-    url: (0, import_vue2.computed)(() => page.value?.url),
-    component: (0, import_vue2.computed)(() => page.value?.component),
-    version: (0, import_vue2.computed)(() => page.value?.version),
-    clearHistory: (0, import_vue2.computed)(() => page.value?.clearHistory),
-    deferredProps: (0, import_vue2.computed)(() => page.value?.deferredProps),
-    mergeProps: (0, import_vue2.computed)(() => page.value?.mergeProps),
-    prependProps: (0, import_vue2.computed)(() => page.value?.prependProps),
-    deepMergeProps: (0, import_vue2.computed)(() => page.value?.deepMergeProps),
-    matchPropsOn: (0, import_vue2.computed)(() => page.value?.matchPropsOn),
-    rememberedState: (0, import_vue2.computed)(() => page.value?.rememberedState),
-    encryptHistory: (0, import_vue2.computed)(() => page.value?.encryptHistory),
-    flash: (0, import_vue2.computed)(() => page.value?.flash)
-  });
+  if (!pageAccessor) {
+    pageAccessor = reactive2({
+      props: computed2(() => page.value?.props),
+      url: computed2(() => page.value?.url),
+      component: computed2(() => page.value?.component),
+      version: computed2(() => page.value?.version),
+      clearHistory: computed2(() => page.value?.clearHistory),
+      deferredProps: computed2(() => page.value?.deferredProps),
+      mergeProps: computed2(() => page.value?.mergeProps),
+      prependProps: computed2(() => page.value?.prependProps),
+      deepMergeProps: computed2(() => page.value?.deepMergeProps),
+      matchPropsOn: computed2(() => page.value?.matchPropsOn),
+      rememberedState: computed2(() => page.value?.rememberedState),
+      encryptHistory: computed2(() => page.value?.encryptHistory),
+      flash: computed2(() => page.value?.flash)
+    });
+  }
+  return pageAccessor;
 }
 
 // src/createInertiaApp.ts
-var import_core4 = require("@inertiajs/core");
-var import_vue3 = require("vue");
+import {
+  buildSSRBody,
+  getInitialPageFromDOM,
+  http as httpModule,
+  router as router5,
+  setupProgress
+} from "@inertiajs/core";
+import { createApp, createSSRApp, h as h2 } from "vue";
 async function createInertiaApp({
   id = "app",
   resolve,
@@ -531,78 +674,111 @@ async function createInertiaApp({
   progress: progress2 = {},
   page: page2,
   render,
-  defaults = {}
-}) {
+  defaults = {},
+  http: http3,
+  layout: layout2
+} = {}) {
   config.replace(defaults);
+  if (http3) {
+    httpModule.setClient(http3);
+  }
   const isServer = typeof window === "undefined";
-  const useScriptElementForInitialPage = config.get("future.useScriptElementForInitialPage");
-  const initialPage = page2 || (0, import_core4.getInitialPageFromDOM)(id, useScriptElementForInitialPage);
-  const resolveComponent = (name) => Promise.resolve(resolve(name)).then((module2) => module2.default || module2);
+  const resolveComponent = (name, page3) => Promise.resolve(resolve(name, page3)).then((module) => module.default || module);
+  if (isServer && !page2 && !render) {
+    return async (page3, renderToString) => {
+      let head2 = [];
+      const initialComponent = await resolveComponent(page3.component, page3);
+      const props = {
+        initialPage: page3,
+        initialComponent,
+        resolveComponent,
+        titleCallback: title,
+        onHeadUpdate: (elements) => head2 = elements,
+        defaultLayout: layout2
+      };
+      let vueApp2;
+      if (setup) {
+        vueApp2 = setup({
+          el: null,
+          App: app_default,
+          props,
+          plugin
+        });
+      } else {
+        vueApp2 = createSSRApp({ render: () => h2(app_default, props) });
+        vueApp2.use(plugin);
+      }
+      const html = await renderToString(vueApp2);
+      const body = buildSSRBody(id, page3, html);
+      return { head: head2, body };
+    };
+  }
+  const initialPage = page2 || getInitialPageFromDOM(id);
   let head = [];
   const vueApp = await Promise.all([
-    resolveComponent(initialPage.component),
-    import_core4.router.decryptHistory().catch(() => {
+    resolveComponent(initialPage.component, initialPage),
+    router5.decryptHistory().catch(() => {
     })
   ]).then(([initialComponent]) => {
     const props = {
       initialPage,
       initialComponent,
       resolveComponent,
-      titleCallback: title
+      titleCallback: title,
+      onHeadUpdate: isServer ? (elements) => head = elements : void 0,
+      defaultLayout: layout2
     };
     if (isServer) {
-      const ssrSetup = setup;
-      return ssrSetup({
+      return setup({
         el: null,
         App: app_default,
-        props: { ...props, onHeadUpdate: (elements) => head = elements },
+        props,
         plugin
       });
     }
-    const csrSetup = setup;
-    return csrSetup({
-      el: document.getElementById(id),
-      App: app_default,
-      props,
-      plugin
-    });
+    const el = document.getElementById(id);
+    if (setup) {
+      return setup({
+        el,
+        App: app_default,
+        props,
+        plugin
+      });
+    }
+    if (el.hasAttribute("data-server-rendered")) {
+      const app = createSSRApp({ render: () => h2(app_default, props) });
+      app.use(plugin);
+      app.mount(el);
+    } else {
+      const app = createApp({ render: () => h2(app_default, props) });
+      app.use(plugin);
+      app.mount(el);
+    }
   });
   if (!isServer && progress2) {
-    (0, import_core4.setupProgress)(progress2);
+    setupProgress(progress2);
   }
-  if (isServer && render) {
-    const element = () => {
-      if (!useScriptElementForInitialPage) {
-        return (0, import_vue3.h)("div", {
-          id,
-          "data-page": JSON.stringify(initialPage),
-          innerHTML: vueApp ? render(vueApp) : ""
-        });
-      }
-      return [
-        (0, import_vue3.h)("script", {
-          "data-page": id,
-          type: "application/json",
-          innerHTML: JSON.stringify(initialPage).replace(/\//g, "\\/")
-        }),
-        (0, import_vue3.h)("div", {
-          id,
-          innerHTML: vueApp ? render(vueApp) : ""
-        })
-      ];
-    };
-    const body = await render(
-      (0, import_vue3.createSSRApp)({
-        render: () => element()
-      })
-    );
+  if (isServer && render && vueApp) {
+    const html = await render(vueApp);
+    const body = buildSSRBody(id, initialPage, html);
     return { head, body };
   }
 }
 
 // src/deferred.ts
-var import_vue4 = require("vue");
-var deferred_default = (0, import_vue4.defineComponent)({
+import { isSameUrlWithoutQueryOrHash, router as router6 } from "@inertiajs/core";
+import { get as get2 } from "lodash-es";
+import { defineComponent as defineComponent3, onMounted, onUnmounted, ref as ref3 } from "vue";
+var keysAreBeingReloaded = (only, except, keys) => {
+  if (only.length === 0 && except.length === 0) {
+    return true;
+  }
+  if (only.length > 0) {
+    return keys.some((key2) => only.includes(key2));
+  }
+  return keys.some((key2) => !except.includes(key2));
+};
+var deferred_default = defineComponent3({
   name: "Deferred",
   props: {
     data: {
@@ -610,22 +786,71 @@ var deferred_default = (0, import_vue4.defineComponent)({
       required: true
     }
   },
+  slots: Object,
+  setup(props, { slots }) {
+    const reloading = ref3(false);
+    const activeReloads = /* @__PURE__ */ new Set();
+    let removeStartListener = null;
+    let removeFinishListener = null;
+    onMounted(() => {
+      const keys = Array.isArray(props.data) ? props.data : [props.data];
+      removeStartListener = router6.on("start", (e) => {
+        const visit = e.detail.visit;
+        if (visit.preserveState === true && isSameUrlWithoutQueryOrHash(visit.url, window.location) && keysAreBeingReloaded(visit.only, visit.except, keys)) {
+          activeReloads.add(visit);
+          reloading.value = true;
+        }
+      });
+      removeFinishListener = router6.on("finish", (e) => {
+        const visit = e.detail.visit;
+        if (activeReloads.has(visit)) {
+          activeReloads.delete(visit);
+          reloading.value = activeReloads.size > 0;
+        }
+      });
+    });
+    onUnmounted(() => {
+      removeStartListener?.();
+      removeFinishListener?.();
+      activeReloads.clear();
+    });
+    return { reloading, slots };
+  },
   render() {
     const keys = Array.isArray(this.$props.data) ? this.$props.data : [this.$props.data];
     if (!this.$slots.fallback) {
       throw new Error("`<Deferred>` requires a `<template #fallback>` slot");
     }
-    return keys.every((key2) => this.$page.props[key2] !== void 0) ? this.$slots.default?.() : this.$slots.fallback();
+    return keys.every((key2) => get2(this.$page.props, key2) !== void 0) ? this.$slots.default?.({ reloading: this.reloading }) : this.$slots.fallback({});
   }
 });
 
 // src/form.ts
-var import_core5 = require("@inertiajs/core");
-var import_lodash_es3 = require("lodash-es");
-var import_vue5 = require("vue");
+import {
+  config as config2,
+  FormComponentResetSymbol,
+  formDataToObject,
+  isUrlMethodPair,
+  mergeDataIntoQueryString,
+  resetFormFields,
+  resolveUrlMethodPairComponent,
+  UseFormUtils as UseFormUtils3
+} from "@inertiajs/core";
+import { isEqual as isEqual2 } from "lodash-es";
+import {
+  computed as computed3,
+  defineComponent as defineComponent4,
+  h as h3,
+  inject as inject2,
+  onBeforeUnmount,
+  onMounted as onMounted2,
+  provide as provide2,
+  ref as ref4,
+  watch as watch2
+} from "vue";
 var noop = () => void 0;
 var FormContextKey = /* @__PURE__ */ Symbol("InertiaFormContext");
-var Form = (0, import_vue5.defineComponent)({
+var Form = defineComponent4({
   name: "Form",
   slots: Object,
   props: {
@@ -725,9 +950,21 @@ var Form = (0, import_vue5.defineComponent)({
       type: Number,
       default: 1500
     },
+    optimistic: {
+      type: Function,
+      default: void 0
+    },
     withAllErrors: {
       type: Boolean,
       default: null
+    },
+    component: {
+      type: String,
+      default: null
+    },
+    instant: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, { slots, attrs, expose }) {
@@ -742,42 +979,51 @@ var Form = (0, import_vue5.defineComponent)({
     if (props.validateFiles) {
       form.validateFiles();
     }
-    if (props.withAllErrors ?? import_core5.config.get("form.withAllErrors")) {
+    if (props.withAllErrors ?? config2.get("form.withAllErrors")) {
       form.withAllErrors();
     }
-    const formElement = (0, import_vue5.ref)();
-    const method = (0, import_vue5.computed)(
-      () => (0, import_core5.isUrlMethodPair)(props.action) ? props.action.method : props.method.toLowerCase()
+    const formElement = ref4();
+    const method = computed3(
+      () => isUrlMethodPair(props.action) ? props.action.method : props.method.toLowerCase()
     );
-    const isDirty = (0, import_vue5.ref)(false);
-    const defaultData = (0, import_vue5.ref)(new FormData());
+    const resolvedComponent = computed3(() => {
+      if (props.component) {
+        return props.component;
+      }
+      if (props.instant && isUrlMethodPair(props.action)) {
+        return resolveUrlMethodPairComponent(props.action);
+      }
+      return null;
+    });
+    const isDirty = ref4(false);
+    const defaultData = ref4(new FormData());
     const onFormUpdate = (event) => {
-      if (event.type === "reset" && event.detail?.[import_core5.FormComponentResetSymbol]) {
+      if (event.type === "reset" && event.detail?.[FormComponentResetSymbol]) {
         event.preventDefault();
       }
-      isDirty.value = event.type === "reset" ? false : !(0, import_lodash_es3.isEqual)(getData(), (0, import_core5.formDataToObject)(defaultData.value));
+      isDirty.value = event.type === "reset" ? false : !isEqual2(getData(), formDataToObject(defaultData.value));
     };
     const formEvents = ["input", "change", "reset"];
-    (0, import_vue5.onMounted)(() => {
+    onMounted2(() => {
       defaultData.value = getFormData();
       form.defaults(getData());
       formEvents.forEach((e) => formElement.value.addEventListener(e, onFormUpdate));
     });
-    (0, import_vue5.watch)(
+    watch2(
       () => props.validateFiles,
       (value) => value ? form.validateFiles() : form.withoutFileValidation()
     );
-    (0, import_vue5.watch)(
+    watch2(
       () => props.validationTimeout,
       (value) => form.setValidationTimeout(value)
     );
-    (0, import_vue5.onBeforeUnmount)(() => formEvents.forEach((e) => formElement.value?.removeEventListener(e, onFormUpdate)));
+    onBeforeUnmount(() => formEvents.forEach((e) => formElement.value?.removeEventListener(e, onFormUpdate)));
     const getFormData = (submitter) => new FormData(formElement.value, submitter);
-    const getData = (submitter) => (0, import_core5.formDataToObject)(getFormData(submitter));
+    const getData = (submitter) => formDataToObject(getFormData(submitter));
     const getUrlAndData = (submitter) => {
-      return (0, import_core5.mergeDataIntoQueryString)(
+      return mergeDataIntoQueryString(
         method.value,
-        (0, import_core5.isUrlMethodPair)(props.action) ? props.action.url : props.action,
+        isUrlMethodPair(props.action) ? props.action.url : props.action,
         getData(submitter),
         props.queryStringArrayFormat
       );
@@ -805,6 +1051,8 @@ var Form = (0, import_vue5.defineComponent)({
         errorBag: props.errorBag,
         showProgress: props.showProgress,
         invalidateCacheTags: props.invalidateCacheTags,
+        component: resolvedComponent.value,
+        optimistic: props.optimistic ? (pageProps) => props.optimistic(pageProps, data) : void 0,
         onCancelToken: props.onCancelToken,
         onBefore: props.onBefore,
         onStart: props.onStart,
@@ -829,7 +1077,7 @@ var Form = (0, import_vue5.defineComponent)({
       form.transform(getTransformedData);
     };
     const reset = (...fields) => {
-      (0, import_core5.resetFormFields)(formElement.value, defaultData.value, fields);
+      resetFormFields(formElement.value, defaultData.value, fields);
       form.reset(...fields);
     };
     const clearErrors = (...fields) => {
@@ -881,18 +1129,18 @@ var Form = (0, import_vue5.defineComponent)({
       valid: form.valid,
       invalid: form.invalid,
       touched: form.touched,
-      validate: (field, config3) => form.validate(...import_core5.UseFormUtils.mergeHeadersForValidation(field, config3, props.headers)),
+      validate: (field, config3) => form.validate(...UseFormUtils3.mergeHeadersForValidation(field, config3, props.headers)),
       validator: () => form.validator()
     };
     expose(exposed);
-    (0, import_vue5.provide)(FormContextKey, exposed);
+    provide2(FormContextKey, exposed);
     return () => {
-      return (0, import_vue5.h)(
+      return h3(
         "form",
         {
           ...attrs,
           ref: formElement,
-          action: (0, import_core5.isUrlMethodPair)(props.action) ? props.action.url : props.action,
+          action: isUrlMethodPair(props.action) ? props.action.url : props.action,
           method: method.value,
           onSubmit: (event) => {
             event.preventDefault();
@@ -906,14 +1154,17 @@ var Form = (0, import_vue5.defineComponent)({
   }
 });
 function useFormContext() {
-  return (0, import_vue5.inject)(FormContextKey);
+  return inject2(FormContextKey);
+}
+function createForm() {
+  return Form;
 }
 var form_default = Form;
 
 // src/head.ts
-var import_lodash_es4 = require("lodash-es");
-var import_vue6 = require("vue");
-var Head = (0, import_vue6.defineComponent)({
+import { escape } from "lodash-es";
+import { defineComponent as defineComponent5 } from "vue";
+var Head = defineComponent5({
   props: {
     title: {
       type: String,
@@ -950,7 +1201,7 @@ var Head = (0, import_vue6.defineComponent)({
     },
     renderTagStart(node) {
       node.props = node.props || {};
-      node.props[this.provider.preferredAttribute()] = node.props["head-key"] !== void 0 ? node.props["head-key"] : "";
+      node.props["data-inertia"] = node.props["head-key"] !== void 0 ? node.props["head-key"] : "";
       const attrs = Object.keys(node.props).reduce((carry, name) => {
         const value = String(node.props[name]);
         if (["key", "head-key"].includes(name)) {
@@ -958,7 +1209,7 @@ var Head = (0, import_vue6.defineComponent)({
         } else if (value === "") {
           return carry + ` ${name}`;
         } else {
-          return carry + ` ${name}="${(0, import_lodash_es4.escape)(value)}"`;
+          return carry + ` ${name}="${escape(value)}"`;
         }
       }, "");
       return `<${String(node.type)}${attrs}>`;
@@ -1009,7 +1260,7 @@ var Head = (0, import_vue6.defineComponent)({
     },
     addTitleElement(elements) {
       if (this.title && !elements.find((tag) => tag.startsWith("<title"))) {
-        elements.push(`<title ${this.provider.preferredAttribute()}>${this.title}</title>`);
+        elements.push(`<title data-inertia="">${this.title}</title>`);
       }
       return elements;
     },
@@ -1041,8 +1292,11 @@ var Head = (0, import_vue6.defineComponent)({
 var head_default = Head;
 
 // src/infiniteScroll.ts
-var import_core6 = require("@inertiajs/core");
-var import_vue7 = require("vue");
+import {
+  getScrollableParent,
+  useInfiniteScroll
+} from "@inertiajs/core";
+import { computed as computed4, defineComponent as defineComponent6, Fragment, h as h4, onMounted as onMounted3, onUnmounted as onUnmounted2, ref as ref5, watch as watch3 } from "vue";
 var resolveHTMLElement = (value, fallback) => {
   if (!value) {
     return fallback;
@@ -1055,7 +1309,7 @@ var resolveHTMLElement = (value, fallback) => {
   }
   return fallback;
 };
-var InfiniteScroll = (0, import_vue7.defineComponent)({
+var InfiniteScroll = defineComponent6({
   name: "InfiniteScroll",
   slots: Object,
   props: {
@@ -1110,26 +1364,30 @@ var InfiniteScroll = (0, import_vue7.defineComponent)({
     endElement: {
       type: [String, Function, Object],
       default: null
+    },
+    params: {
+      type: Object,
+      default: () => ({})
     }
   },
   inheritAttrs: false,
   setup(props, { slots, attrs, expose }) {
-    const itemsElementRef = (0, import_vue7.ref)(null);
-    const startElementRef = (0, import_vue7.ref)(null);
-    const endElementRef = (0, import_vue7.ref)(null);
-    const itemsElement = (0, import_vue7.computed)(
+    const itemsElementRef = ref5(null);
+    const startElementRef = ref5(null);
+    const endElementRef = ref5(null);
+    const itemsElement = computed4(
       () => resolveHTMLElement(props.itemsElement, itemsElementRef.value)
     );
-    const scrollableParent = (0, import_vue7.computed)(() => (0, import_core6.getScrollableParent)(itemsElement.value));
-    const startElement = (0, import_vue7.computed)(
+    const scrollableParent = computed4(() => getScrollableParent(itemsElement.value));
+    const startElement = computed4(
       () => resolveHTMLElement(props.startElement, startElementRef.value)
     );
-    const endElement = (0, import_vue7.computed)(() => resolveHTMLElement(props.endElement, endElementRef.value));
-    const loadingPrevious = (0, import_vue7.ref)(false);
-    const loadingNext = (0, import_vue7.ref)(false);
-    const requestCount = (0, import_vue7.ref)(0);
-    const hasPreviousPage = (0, import_vue7.ref)(false);
-    const hasNextPage = (0, import_vue7.ref)(false);
+    const endElement = computed4(() => resolveHTMLElement(props.endElement, endElementRef.value));
+    const loadingPrevious = ref5(false);
+    const loadingNext = ref5(false);
+    const requestCount = ref5(0);
+    const hasPreviousPage = ref5(false);
+    const hasNextPage = ref5(false);
     const syncStateFromDataManager = () => {
       requestCount.value = dataManager.getRequestCount();
       hasPreviousPage.value = dataManager.hasPrevious();
@@ -1139,13 +1397,14 @@ var InfiniteScroll = (0, import_vue7.defineComponent)({
       dataManager,
       elementManager,
       flush: flushInfiniteScroll
-    } = (0, import_core6.useInfiniteScroll)({
+    } = useInfiniteScroll({
       // Data
       getPropName: () => props.data,
       inReverseMode: () => props.reverse,
       shouldFetchNext: () => !props.onlyPrevious,
       shouldFetchPrevious: () => !props.onlyNext,
       shouldPreserveUrl: () => props.preserveUrl,
+      getReloadOptions: () => props.params,
       // Elements
       getTriggerMargin: () => props.buffer,
       getStartElement: () => startElement.value,
@@ -1166,8 +1425,8 @@ var InfiniteScroll = (0, import_vue7.defineComponent)({
       onDataReset: syncStateFromDataManager
     });
     syncStateFromDataManager();
-    const autoLoad = (0, import_vue7.computed)(() => !manualMode.value);
-    const manualMode = (0, import_vue7.computed)(
+    const autoLoad = computed4(() => !manualMode.value);
+    const manualMode = computed4(
       () => props.manual || props.manualAfter > 0 && requestCount.value >= props.manualAfter
     );
     const scrollToBottom = () => {
@@ -1183,7 +1442,7 @@ var InfiniteScroll = (0, import_vue7.defineComponent)({
         });
       }
     };
-    (0, import_vue7.onMounted)(() => {
+    onMounted3(() => {
       elementManager.setupObservers();
       elementManager.processServerLoadedElements(dataManager.getLastLoadedPage());
       const shouldAutoScroll = props.autoScroll !== void 0 ? props.autoScroll : props.reverse;
@@ -1194,8 +1453,8 @@ var InfiniteScroll = (0, import_vue7.defineComponent)({
         elementManager.enableTriggers();
       }
     });
-    (0, import_vue7.onUnmounted)(flushInfiniteScroll);
-    (0, import_vue7.watch)(
+    onUnmounted2(flushInfiniteScroll);
+    watch3(
       () => [autoLoad.value, props.onlyNext, props.onlyPrevious],
       ([enabled]) => {
         enabled ? elementManager.enableTriggers() : elementManager.disableTriggers();
@@ -1226,7 +1485,7 @@ var InfiniteScroll = (0, import_vue7.defineComponent)({
           ...sharedExposed
         };
         renderElements.push(
-          (0, import_vue7.h)(
+          h4(
             "div",
             { ref: startElementRef },
             slots.previous ? slots.previous(exposedPrevious) : loadingPrevious.value ? slots.loading?.(exposedPrevious) : void 0
@@ -1234,7 +1493,7 @@ var InfiniteScroll = (0, import_vue7.defineComponent)({
         );
       }
       renderElements.push(
-        (0, import_vue7.h)(
+        h4(
           props.as,
           { ...attrs, ref: itemsElementRef },
           slots.default?.({
@@ -1255,25 +1514,32 @@ var InfiniteScroll = (0, import_vue7.defineComponent)({
           ...sharedExposed
         };
         renderElements.push(
-          (0, import_vue7.h)(
+          h4(
             "div",
             { ref: endElementRef },
             slots.next ? slots.next(exposedNext) : loadingNext.value ? slots.loading?.(exposedNext) : void 0
           )
         );
       }
-      return (0, import_vue7.h)(import_vue7.Fragment, {}, props.reverse ? [...renderElements].reverse() : renderElements);
+      return h4(Fragment, {}, props.reverse ? [...renderElements].reverse() : renderElements);
     };
   }
 });
 var infiniteScroll_default = InfiniteScroll;
 
 // src/link.ts
-var import_core7 = require("@inertiajs/core");
-var import_vue8 = require("vue");
+import {
+  isUrlMethodPair as isUrlMethodPair2,
+  mergeDataIntoQueryString as mergeDataIntoQueryString2,
+  resolveUrlMethodPairComponent as resolveUrlMethodPairComponent2,
+  router as router7,
+  shouldIntercept,
+  shouldNavigate
+} from "@inertiajs/core";
+import { computed as computed5, defineComponent as defineComponent7, h as h5, onMounted as onMounted4, onUnmounted as onUnmounted3, ref as ref6 } from "vue";
 var noop2 = () => {
 };
-var Link = (0, import_vue8.defineComponent)({
+var Link = defineComponent7({
   name: "Link",
   props: {
     as: {
@@ -1383,12 +1649,24 @@ var Link = (0, import_vue8.defineComponent)({
     viewTransition: {
       type: [Boolean, Object],
       default: false
+    },
+    component: {
+      type: String,
+      default: null
+    },
+    instant: {
+      type: Boolean,
+      default: false
+    },
+    pageProps: {
+      type: [Object, Function],
+      default: null
     }
   },
   setup(props, { slots, attrs }) {
-    const inFlightCount = (0, import_vue8.ref)(0);
-    const hoverTimeout = (0, import_vue8.ref)();
-    const prefetchModes = (0, import_vue8.computed)(() => {
+    const inFlightCount = ref6(0);
+    const hoverTimeout = ref6();
+    const prefetchModes = computed5(() => {
       if (props.prefetch === true) {
         return ["hover"];
       }
@@ -1400,7 +1678,7 @@ var Link = (0, import_vue8.defineComponent)({
       }
       return [props.prefetch];
     });
-    const cacheForValue = (0, import_vue8.computed)(() => {
+    const cacheForValue = computed5(() => {
       if (props.cacheFor !== 0) {
         return props.cacheFor;
       }
@@ -1409,34 +1687,43 @@ var Link = (0, import_vue8.defineComponent)({
       }
       return config.get("prefetch.cacheFor");
     });
-    (0, import_vue8.onMounted)(() => {
+    onMounted4(() => {
       if (prefetchModes.value.includes("mount")) {
         prefetch();
       }
     });
-    (0, import_vue8.onUnmounted)(() => {
+    onUnmounted3(() => {
       clearTimeout(hoverTimeout.value);
     });
-    const method = (0, import_vue8.computed)(
-      () => (0, import_core7.isUrlMethodPair)(props.href) ? props.href.method : (props.method ?? "get").toLowerCase()
+    const method = computed5(
+      () => isUrlMethodPair2(props.href) ? props.href.method : (props.method ?? "get").toLowerCase()
     );
-    const as = (0, import_vue8.computed)(() => {
+    const as = computed5(() => {
       if (typeof props.as !== "string" || props.as.toLowerCase() !== "a") {
         return props.as;
       }
       return method.value !== "get" ? "button" : props.as.toLowerCase();
     });
-    const mergeDataArray = (0, import_vue8.computed)(
-      () => (0, import_core7.mergeDataIntoQueryString)(
+    const mergeDataArray = computed5(
+      () => mergeDataIntoQueryString2(
         method.value,
-        (0, import_core7.isUrlMethodPair)(props.href) ? props.href.url : props.href,
+        isUrlMethodPair2(props.href) ? props.href.url : props.href,
         props.data || {},
         props.queryStringArrayFormat
       )
     );
-    const href = (0, import_vue8.computed)(() => mergeDataArray.value[0]);
-    const data = (0, import_vue8.computed)(() => mergeDataArray.value[1]);
-    const elProps = (0, import_vue8.computed)(() => {
+    const href = computed5(() => mergeDataArray.value[0]);
+    const data = computed5(() => mergeDataArray.value[1]);
+    const resolvedComponent = computed5(() => {
+      if (props.component) {
+        return props.component;
+      }
+      if (props.instant && isUrlMethodPair2(props.href)) {
+        return resolveUrlMethodPairComponent2(props.href);
+      }
+      return null;
+    });
+    const elProps = computed5(() => {
       if (as.value === "button") {
         return { type: "button" };
       }
@@ -1445,7 +1732,7 @@ var Link = (0, import_vue8.defineComponent)({
       }
       return {};
     });
-    const baseParams = (0, import_vue8.computed)(() => ({
+    const baseParams = computed5(() => ({
       data: data.value,
       method: method.value,
       replace: props.replace,
@@ -1455,9 +1742,11 @@ var Link = (0, import_vue8.defineComponent)({
       only: props.only,
       except: props.except,
       headers: props.headers,
-      async: props.async
+      async: props.async,
+      component: resolvedComponent.value,
+      pageProps: props.pageProps
     }));
-    const visitParams = (0, import_vue8.computed)(() => ({
+    const visitParams = computed5(() => ({
       ...baseParams.value,
       viewTransition: props.viewTransition,
       onCancelToken: props.onCancelToken,
@@ -1476,7 +1765,7 @@ var Link = (0, import_vue8.defineComponent)({
       onError: props.onError
     }));
     const prefetch = () => {
-      import_core7.router.prefetch(
+      router7.prefetch(
         href.value,
         {
           ...baseParams.value,
@@ -1491,9 +1780,9 @@ var Link = (0, import_vue8.defineComponent)({
     };
     const regularEvents = {
       onClick: (event) => {
-        if ((0, import_core7.shouldIntercept)(event)) {
+        if (shouldIntercept(event)) {
           event.preventDefault();
-          import_core7.router.visit(href.value, visitParams.value);
+          router7.visit(href.value, visitParams.value);
         }
       }
     };
@@ -1510,37 +1799,37 @@ var Link = (0, import_vue8.defineComponent)({
     };
     const prefetchClickEvents = {
       onMousedown: (event) => {
-        if ((0, import_core7.shouldIntercept)(event)) {
+        if (shouldIntercept(event)) {
           event.preventDefault();
           prefetch();
         }
       },
       onKeydown: (event) => {
-        if ((0, import_core7.shouldNavigate)(event)) {
+        if (shouldNavigate(event)) {
           event.preventDefault();
           prefetch();
         }
       },
       onMouseup: (event) => {
-        if ((0, import_core7.shouldIntercept)(event)) {
+        if (shouldIntercept(event)) {
           event.preventDefault();
-          import_core7.router.visit(href.value, visitParams.value);
+          router7.visit(href.value, visitParams.value);
         }
       },
       onKeyup: (event) => {
-        if ((0, import_core7.shouldNavigate)(event)) {
+        if (shouldNavigate(event)) {
           event.preventDefault();
-          import_core7.router.visit(href.value, visitParams.value);
+          router7.visit(href.value, visitParams.value);
         }
       },
       onClick: (event) => {
-        if ((0, import_core7.shouldIntercept)(event)) {
+        if (shouldIntercept(event)) {
           event.preventDefault();
         }
       }
     };
     return () => {
-      return (0, import_vue8.h)(
+      return h5(
         as.value,
         {
           ...attrs,
@@ -1563,23 +1852,199 @@ var Link = (0, import_vue8.defineComponent)({
 });
 var link_default = Link;
 
+// src/useHttp.ts
+import {
+  hasFiles,
+  http,
+  HttpCancelledError,
+  HttpResponseError,
+  mergeDataIntoQueryString as mergeDataIntoQueryString3,
+  objectToFormData,
+  UseFormUtils as UseFormUtils4
+} from "@inertiajs/core";
+import { toSimpleValidationErrors as toSimpleValidationErrors2 } from "laravel-precognition";
+import { cloneDeep as cloneDeep4 } from "lodash-es";
+function useHttp(...args) {
+  const { rememberKey, data, precognitionEndpoint } = UseFormUtils4.parseUseFormArguments(...args);
+  let abortController = null;
+  let pendingOptimisticCallback = null;
+  const {
+    form: baseForm,
+    setDefaults,
+    getTransform,
+    getPrecognitionEndpoint,
+    markAsSuccessful,
+    wasDefaultsCalledInOnSuccess,
+    resetDefaultsCalledInOnSuccess,
+    setRememberExcludeKeys,
+    resetBeforeSubmit,
+    finishProcessing,
+    withAllErrors
+  } = useFormState({
+    data,
+    rememberKey,
+    precognitionEndpoint
+  });
+  const form = baseForm;
+  form.response = null;
+  const submit = async (method, url, options) => {
+    const onBefore = options.onBefore?.();
+    if (onBefore === false) {
+      return Promise.reject(new Error("Request cancelled by onBefore"));
+    }
+    resetDefaultsCalledInOnSuccess();
+    resetBeforeSubmit();
+    abortController = new AbortController();
+    const cancelToken = {
+      cancel: () => abortController?.abort()
+    };
+    options.onCancelToken?.(cancelToken);
+    options.optimistic = options.optimistic ?? pendingOptimisticCallback ?? void 0;
+    pendingOptimisticCallback = null;
+    let snapshot;
+    if (options.optimistic) {
+      snapshot = cloneDeep4(form.data());
+      const optimisticData = options.optimistic(cloneDeep4(snapshot));
+      Object.keys(optimisticData).forEach((key2) => {
+        ;
+        form[key2] = optimisticData[key2];
+      });
+    }
+    form.processing = true;
+    options.onStart?.();
+    const transform = getTransform();
+    const transformedData = transform(form.data());
+    const useFormData = hasFiles(transformedData);
+    let requestUrl = url;
+    let requestData;
+    let contentType;
+    if (method === "get") {
+      const [urlWithParams] = mergeDataIntoQueryString3(
+        method,
+        url,
+        transformedData
+      );
+      requestUrl = urlWithParams;
+    } else {
+      if (useFormData) {
+        requestData = objectToFormData(transformedData);
+      } else {
+        requestData = JSON.stringify(transformedData);
+        contentType = "application/json";
+      }
+    }
+    try {
+      const response = await http.getClient().request({
+        method,
+        url: requestUrl,
+        data: requestData,
+        headers: {
+          Accept: "application/json",
+          ...contentType ? { "Content-Type": contentType } : {},
+          ...options.headers
+        },
+        signal: abortController.signal,
+        onUploadProgress: (event) => {
+          form.progress = event;
+          options.onProgress?.(event);
+        }
+      });
+      const responseData = JSON.parse(response.data);
+      if (response.status >= 200 && response.status < 300) {
+        markAsSuccessful();
+        form.response = responseData;
+        options.onSuccess?.(responseData);
+        if (!wasDefaultsCalledInOnSuccess()) {
+          setDefaults(cloneDeep4(form.data()));
+        }
+        form.isDirty = false;
+        return responseData;
+      }
+      throw new HttpResponseError(`Request failed with status ${response.status}`, response, url);
+    } catch (error) {
+      if (snapshot) {
+        Object.keys(snapshot).forEach((key2) => {
+          ;
+          form[key2] = snapshot[key2];
+        });
+      }
+      if (error instanceof HttpResponseError) {
+        if (error.response.status === 422) {
+          const responseData = JSON.parse(error.response.data);
+          const validationErrors = responseData.errors || {};
+          const processedErrors = withAllErrors.enabled() ? validationErrors : toSimpleValidationErrors2(validationErrors);
+          form.clearErrors().setError(processedErrors);
+          options.onError?.(processedErrors);
+        }
+        throw error;
+      }
+      if (error instanceof HttpCancelledError || error instanceof Error && error.name === "AbortError") {
+        options.onCancel?.();
+        throw new HttpCancelledError("Request was cancelled", url);
+      }
+      throw error;
+    } finally {
+      finishProcessing();
+      abortController = null;
+      options.onFinish?.();
+    }
+  };
+  const createSubmitMethod = (method) => async (url, options = {}) => {
+    return submit(method, url, options);
+  };
+  Object.assign(form, {
+    submit(...args2) {
+      const parsed = UseFormUtils4.parseSubmitArguments(args2, getPrecognitionEndpoint());
+      return submit(parsed.method, parsed.url, parsed.options);
+    },
+    get: createSubmitMethod("get"),
+    post: createSubmitMethod("post"),
+    put: createSubmitMethod("put"),
+    patch: createSubmitMethod("patch"),
+    delete: createSubmitMethod("delete"),
+    cancel() {
+      if (abortController) {
+        abortController.abort();
+      }
+    },
+    dontRemember(...keys) {
+      setRememberExcludeKeys(keys);
+      return form;
+    },
+    optimistic(callback) {
+      pendingOptimisticCallback = callback;
+      return form;
+    },
+    withAllErrors() {
+      withAllErrors.enable();
+      return form;
+    }
+  });
+  const originalWithPrecognition = form.withPrecognition;
+  form.withPrecognition = (...args2) => {
+    originalWithPrecognition.call(form, ...args2);
+    return form;
+  };
+  return getPrecognitionEndpoint() ? form : form;
+}
+
 // src/usePoll.ts
-var import_core8 = require("@inertiajs/core");
-var import_vue9 = require("vue");
+import { router as router8 } from "@inertiajs/core";
+import { onMounted as onMounted5, onUnmounted as onUnmounted4 } from "vue";
 function usePoll(interval, requestOptions = {}, options = {
   keepAlive: false,
   autoStart: true
 }) {
-  const { stop, start } = import_core8.router.poll(interval, requestOptions, {
+  const { stop, start } = router8.poll(interval, requestOptions, {
     ...options,
     autoStart: false
   });
-  (0, import_vue9.onMounted)(() => {
+  onMounted5(() => {
     if (options.autoStart ?? true) {
       start();
     }
   });
-  (0, import_vue9.onUnmounted)(() => {
+  onUnmounted4(() => {
     stop();
   });
   return {
@@ -1589,33 +2054,33 @@ function usePoll(interval, requestOptions = {}, options = {
 }
 
 // src/usePrefetch.ts
-var import_core9 = require("@inertiajs/core");
-var import_vue10 = require("vue");
+import { router as router9 } from "@inertiajs/core";
+import { onMounted as onMounted6, onUnmounted as onUnmounted5, ref as ref7 } from "vue";
 function usePrefetch(options = {}) {
-  const isPrefetching = (0, import_vue10.ref)(false);
-  const lastUpdatedAt = (0, import_vue10.ref)(null);
-  const isPrefetched = (0, import_vue10.ref)(false);
-  const cached = typeof window === "undefined" ? null : import_core9.router.getCached(window.location.pathname, options);
-  const inFlight = typeof window === "undefined" ? null : import_core9.router.getPrefetching(window.location.pathname, options);
+  const isPrefetching = ref7(false);
+  const lastUpdatedAt = ref7(null);
+  const isPrefetched = ref7(false);
+  const cached = typeof window === "undefined" ? null : router9.getCached(window.location.pathname, options);
+  const inFlight = typeof window === "undefined" ? null : router9.getPrefetching(window.location.pathname, options);
   lastUpdatedAt.value = cached?.staleTimestamp || null;
   isPrefetching.value = inFlight !== null;
   isPrefetched.value = cached !== null;
   let onPrefetchedListener;
   let onPrefetchingListener;
-  (0, import_vue10.onMounted)(() => {
-    onPrefetchingListener = import_core9.router.on("prefetching", (e) => {
+  onMounted6(() => {
+    onPrefetchingListener = router9.on("prefetching", (e) => {
       if (e.detail.visit.url.pathname === window.location.pathname) {
         isPrefetching.value = true;
       }
     });
-    onPrefetchedListener = import_core9.router.on("prefetched", (e) => {
+    onPrefetchedListener = router9.on("prefetched", (e) => {
       if (e.detail.visit.url.pathname === window.location.pathname) {
         isPrefetching.value = false;
         isPrefetched.value = true;
       }
     });
   });
-  (0, import_vue10.onUnmounted)(() => {
+  onUnmounted5(() => {
     onPrefetchedListener();
     onPrefetchingListener();
   });
@@ -1623,28 +2088,28 @@ function usePrefetch(options = {}) {
     lastUpdatedAt,
     isPrefetching,
     isPrefetched,
-    flush: () => import_core9.router.flush(window.location.pathname, options)
+    flush: () => router9.flush(window.location.pathname, options)
   };
 }
 
 // src/useRemember.ts
-var import_core10 = require("@inertiajs/core");
-var import_lodash_es5 = require("lodash-es");
-var import_vue11 = require("vue");
+import { router as router10 } from "@inertiajs/core";
+import { cloneDeep as cloneDeep5 } from "lodash-es";
+import { isReactive, reactive as reactive3, ref as ref8, watch as watch4 } from "vue";
 function useRemember(data, key2) {
   if (typeof data === "object" && data !== null && data.__rememberable === false) {
     return data;
   }
-  const restored = import_core10.router.restore(key2);
-  const type = (0, import_vue11.isReactive)(data) ? import_vue11.reactive : import_vue11.ref;
+  const restored = router10.restore(key2);
+  const type = isReactive(data) ? reactive3 : ref8;
   const hasCallbacks = typeof data.__remember === "function" && typeof data.__restore === "function";
   const remembered = type(
-    restored === void 0 ? data : hasCallbacks ? data.__restore((0, import_lodash_es5.cloneDeep)(restored)) : (0, import_lodash_es5.cloneDeep)(restored)
+    restored === void 0 ? data : hasCallbacks ? data.__restore(cloneDeep5(restored)) : cloneDeep5(restored)
   );
-  (0, import_vue11.watch)(
+  watch4(
     remembered,
     (newValue) => {
-      import_core10.router.remember((0, import_lodash_es5.cloneDeep)(hasCallbacks ? data.__remember() : newValue), key2);
+      router10.remember(cloneDeep5(hasCallbacks ? data.__remember() : newValue), key2);
     },
     { immediate: true, deep: true }
   );
@@ -1652,9 +2117,10 @@ function useRemember(data, key2) {
 }
 
 // src/whenVisible.ts
-var import_core11 = require("@inertiajs/core");
-var import_vue12 = require("vue");
-var whenVisible_default = (0, import_vue12.defineComponent)({
+import { router as router11 } from "@inertiajs/core";
+import { get as get3 } from "lodash-es";
+import { defineComponent as defineComponent8, h as h6 } from "vue";
+var whenVisible_default = defineComponent8({
   name: "WhenVisible",
   slots: Object,
   props: {
@@ -1695,9 +2161,9 @@ var whenVisible_default = (0, import_vue12.defineComponent)({
   created() {
     const page2 = usePage();
     this.$watch(
-      () => this.keys.map((key2) => page2.props[key2]),
+      () => this.keys.map((key2) => get3(page2.props, key2)),
       () => {
-        const exists = this.keys.length > 0 && this.keys.every((key2) => page2.props[key2] !== void 0);
+        const exists = this.keys.length > 0 && this.keys.every((key2) => get3(page2.props, key2) !== void 0);
         this.loaded = exists;
         if (exists && !this.always) {
           return;
@@ -1725,7 +2191,7 @@ var whenVisible_default = (0, import_vue12.defineComponent)({
           }
           this.fetching = true;
           const reloadParams = this.getReloadParams();
-          import_core11.router.reload({
+          router11.reload({
             ...reloadParams,
             onStart: (e) => {
               this.fetching = true;
@@ -1748,7 +2214,7 @@ var whenVisible_default = (0, import_vue12.defineComponent)({
       this.observer.observe(this.$el.nextSibling);
     },
     getReloadParams() {
-      const reloadParams = { ...this.$props.params };
+      const reloadParams = { preserveErrors: true, ...this.$props.params };
       if (this.$props.data) {
         reloadParams.only = Array.isArray(this.$props.data) ? this.$props.data : [this.$props.data];
       }
@@ -1758,7 +2224,7 @@ var whenVisible_default = (0, import_vue12.defineComponent)({
   render() {
     const els = [];
     if (this.$props.always || !this.loaded) {
-      els.push((0, import_vue12.h)(this.$props.as));
+      els.push(h6(this.$props.as));
     }
     if (!this.loaded) {
       els.push(this.$slots.fallback ? this.$slots.fallback({}) : null);
@@ -1770,5 +2236,31 @@ var whenVisible_default = (0, import_vue12.defineComponent)({
 });
 
 // src/index.ts
-var config = import_core12.config.extend({});
+var config = coreConfig.extend({});
+export {
+  app_default as App,
+  deferred_default as Deferred,
+  form_default as Form,
+  head_default as Head,
+  infiniteScroll_default as InfiniteScroll,
+  link_default as Link,
+  whenVisible_default as WhenVisible,
+  config,
+  createForm,
+  createInertiaApp,
+  http2 as http,
+  progress,
+  resetLayoutProps,
+  router12 as router,
+  setLayoutProps,
+  setLayoutPropsFor,
+  useForm,
+  useFormContext,
+  useHttp,
+  useLayoutProps,
+  usePage,
+  usePoll,
+  usePrefetch,
+  useRemember
+};
 //# sourceMappingURL=index.js.map