{"id":11224,"library":"laravel-precognition-vue-inertia","title":"Laravel Precognition for Vue with Inertia.js","description":"Laravel Precognition Vue Inertia is an official frontend integration package designed to bring \"live\" validation capabilities to Vue 3 applications that utilize Inertia.js for server-driven UI. It enables developers to anticipate the outcome of future HTTP requests to a Laravel backend, primarily for providing real-time feedback on form inputs without requiring full page reloads. The current stable version of this package is `v2.0.0`, aligning with the core Laravel Precognition library's latest major release. Releases generally follow the development cadence of the broader Laravel ecosystem, with updates often introduced in sync with new Laravel framework versions or significant improvements to the core Precognition package. Its primary differentiator lies in its deep and seamless integration with Laravel's robust validation system and Inertia.js's simplified approach to building single-page applications, offering a highly streamlined developer experience for creating dynamic, interactive forms with instant server-side validation feedback.","status":"active","version":"0.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/laravel/precognition","tags":["javascript","laravel","precognition","vue","inertia","typescript"],"install":[{"cmd":"npm install laravel-precognition-vue-inertia","lang":"bash","label":"npm"},{"cmd":"yarn add laravel-precognition-vue-inertia","lang":"bash","label":"yarn"},{"cmd":"pnpm add laravel-precognition-vue-inertia","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Inertia.js integration with Vue 3.","package":"@inertiajs/vue3","optional":false},{"reason":"Required as the core UI framework.","package":"vue","optional":false}],"imports":[{"note":"The primary composition function for creating Precognition-enabled forms. It is a named export.","wrong":"import useForm from 'laravel-precognition-vue-inertia';","symbol":"useForm","correct":"import { useForm } from 'laravel-precognition-vue-inertia';"},{"note":"Type-only import for the form instance; not available at runtime.","wrong":"import { PrecognitionForm } from 'laravel-precognition-vue-inertia';","symbol":"PrecognitionForm","correct":"import type { PrecognitionForm } from 'laravel-precognition-vue-inertia';"},{"note":"Type-only import for the form data structure.","symbol":"Form","correct":"import type { Form } from 'laravel-precognition-vue-inertia';"}],"quickstart":{"code":"import { defineComponent } from 'vue';\nimport { useForm } from 'laravel-precognition-vue-inertia';\n\ninterface UserForm {\n  name: string;\n  email: string;\n  password?: string;\n}\n\nexport default defineComponent({\n  setup() {\n    const form = useForm<UserForm>('post', '/users', {\n      name: '',\n      email: '',\n      password: '',\n    });\n\n    const submit = () => {\n      form.submit({\n        onSuccess: () => {\n          console.log('User created successfully, redirecting...');\n          form.reset();\n          // Example: Inertia.visit('/users');\n        },\n        onError: (errors) => {\n          console.error('Validation errors:', errors);\n        },\n      });\n    };\n\n    return {\n      form,\n      submit,\n    };\n  },\n  template: `\n    <form @submit.prevent=\"submit\">\n      <div>\n        <label for=\"name\">Name:</label>\n        <input\n          id=\"name\"\n          type=\"text\"\n          v-model=\"form.name\"\n          @change=\"form.validate('name')\"\n        />\n        <div v-if=\"form.hasErrors('name')\" style=\"color: red;\">{{ form.errors.name }}</div>\n      </div>\n      <div>\n        <label for=\"email\">Email:</label>\n        <input\n          id=\"email\"\n          type=\"email\"\n          v-model=\"form.email\"\n          @change=\"form.validate('email')\"\n        />\n        <div v-if=\"form.hasErrors('email')\" style=\"color: red;\">{{ form.errors.email }}</div>\n      </div>\n      <div>\n        <label for=\"password\">Password:</label>\n        <input\n          id=\"password\"\n          type=\"password\"\n          v-model=\"form.password\"\n          @change=\"form.validate('password')\"\n        />\n        <div v-if=\"form.hasErrors('password')\" style=\"color: red;\">{{ form.errors.password }}</div>\n      </div>\n      <button type=\"submit\" :disabled=\"form.processing || form.hasErrors()\">\n        Create User\n      </button>\n    </form>\n  `\n});","lang":"typescript","description":"This quickstart demonstrates how to use `useForm` to create a basic user creation form with live validation using Laravel Precognition and Vue 3 with Inertia.js."},"warnings":[{"fix":"Migrate any custom request logic to use the `fetch` API or the package's new configuration options. Review the changelog for specific configuration changes regarding XSRF tokens and `Accept` headers.","message":"Starting with `v2.0.0`, the package replaced the underlying HTTP client from Axios to the native `fetch` API. If you had custom Axios configurations or adapters, they will no longer be used.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Confirm `laravel-precognition-vue-inertia` is installed and properly imported. If migrating from older versions of the core `laravel-precognition` that had built-in Inertia support, update your imports to this dedicated package.","message":"In `v1.0.0`, the core `laravel-precognition` package removed its direct dependency on Inertia.js specific code, making `laravel-precognition-vue-inertia` the dedicated integration. While this package continues to provide Inertia support, ensure you are using the correct `laravel-precognition-vue-inertia` package for Inertia-based applications.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Upgrade to `v1.0.1` or newer to ensure correct TypeScript typing for wildcard validation paths. Manual type assertions might be necessary for older versions.","message":"TypeScript support for wildcard validation paths (e.g., `items.*.name`) was introduced in `v1.0.1` for the core package. If you are using an older version and relying on complex nested validation, TypeScript might not correctly infer types.","severity":"gotcha","affected_versions":"<1.0.1"},{"fix":"Update `laravel-precognition-vue-inertia` to `v0.5.14` or newer to guarantee compatibility and full support for Inertia 2.0 features.","message":"Full support for Inertia 2.0 was added from `v0.5.14` of the underlying monorepo. If encountering issues with Inertia 2.0 features, ensure your `laravel-precognition-vue-inertia` version is up to date.","severity":"gotcha","affected_versions":"<0.5.14"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `laravel-precognition-vue-inertia` is installed and `useForm` is imported as a named export: `import { useForm } from 'laravel-precognition-vue-inertia';`.","cause":"`useForm` was imported incorrectly (e.g., as a default import or from a wrong path) or the package is not installed.","error":"TypeError: useForm is not a function"},{"fix":"Verify your Laravel backend's `Kernel.php` has the `HandlePrecognition` middleware enabled for the web group. Also, ensure the CSRF token is included in your requests (Inertia handles this automatically, but check if custom requests are missing it).","cause":"This typically indicates that the Laravel backend is not correctly configured for Precognition requests, or the CSRF token is missing/invalid.","error":"Failed to load resource: the server responded with a status of 422 (Unprocessable Content) or Network Error"},{"fix":"Ensure the generic type passed to `useForm` (`useForm<MyFormType>`) accurately reflects the structure of your form data, including all possible fields and their types.","cause":"This TypeScript error often occurs when `PrecognitionForm` is used with incorrect generic types, or when the form's initial data structure doesn't match the expected type.","error":"Property 'errors' does not exist on type 'PrecognitionForm<...>' or Property 'hasErrors' does not exist..."}],"ecosystem":"npm"}