{"id":11225,"library":"laravel-precognition-vue","title":"Laravel Precognition for Vue 3","description":"Laravel Precognition for Vue provides a frontend integration for Laravel's backend-driven \"live\" validation. It allows Vue 3 applications to anticipate the outcome of form submissions, primarily for real-time validation feedback as users interact with forms. The current stable version is 2.0.0, which notably moved from Axios to the native `fetch` API for network requests. This package is part of the broader Laravel ecosystem, maintaining an active development cadence with regular updates and clear versioning. Its key differentiator is its seamless integration with Laravel's validation rules, simplifying the process of displaying server-side validation errors dynamically in a Vue application without full page reloads, and reducing redundant client-side validation logic.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/laravel/precognition","tags":["javascript","laravel","precognition","vue","typescript"],"install":[{"cmd":"npm install laravel-precognition-vue","lang":"bash","label":"npm"},{"cmd":"yarn add laravel-precognition-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add laravel-precognition-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Vue 3 integration.","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'","symbol":"useForm","correct":"import { useForm } from 'laravel-precognition-vue'"},{"note":"Type definition for the form object returned by `useForm`. Use `import type` for type-only imports in TypeScript.","wrong":"import { Form } from 'laravel-precognition-vue'","symbol":"Form","correct":"import type { Form } from 'laravel-precognition-vue'"},{"note":"Validation methods and error state are properties of the `form` object returned by `useForm`, not separate exports.","wrong":"import { validate } from 'laravel-precognition-vue'","symbol":"Precognition errors and validation","correct":"import { useForm } from 'laravel-precognition-vue';\nconst form = useForm(...);\nform.validate('field');\nform.errors.field;"}],"quickstart":{"code":"import { defineComponent, reactive } from 'vue';\nimport { useForm } from 'laravel-precognition-vue';\n\nexport default defineComponent({\n  setup() {\n    const form = useForm('post', '/api/register', {\n      name: '',\n      email: '',\n      password: '',\n      password_confirmation: '',\n    });\n\n    const submit = async () => {\n      try {\n        await form.submit();\n        alert('Registration successful!');\n        form.reset();\n      } catch (e) {\n        console.error('Submission failed:', e);\n        // Errors are automatically populated in form.errors\n      }\n    };\n\n    // Example of real-time validation on input change\n    const validateField = (field) => {\n      if (form[field]) { // Only validate if field has content\n        form.validate(field);\n      }\n    };\n\n    return { form, submit, validateField };\n  },\n  template: `\n    <form @submit.prevent=\"submit\">\n      <div>\n        <label for=\"name\">Name</label>\n        <input id=\"name\" type=\"text\" v-model=\"form.name\" @input=\"validateField('name')\">\n        <div v-if=\"form.errors.name\">{{ form.errors.name }}</div>\n      </div>\n\n      <div>\n        <label for=\"email\">Email</label>\n        <input id=\"email\" type=\"email\" v-model=\"form.email\" @input=\"validateField('email')\">\n        <div v-if=\"form.errors.email\">{{ form.errors.email }}</div>\n      </div>\n\n      <div>\n        <label for=\"password\">Password</label>\n        <input id=\"password\" type=\"password\" v-model=\"form.password\" @input=\"validateField('password')\">\n        <div v-if=\"form.errors.password\">{{ form.errors.password }}</div>\n      </div>\n\n      <div>\n        <label for=\"password_confirmation\">Confirm Password</label>\n        <input id=\"password_confirmation\" type=\"password\" v-model=\"form.password_confirmation\" @input=\"validateField('password_confirmation')\">\n        <div v-if=\"form.errors.password_confirmation\">{{ form.errors.password_confirmation }}</div>\n      </div>\n\n      <button type=\"submit\" :disabled=\"form.processing\">Register</button>\n      <button type=\"button\" @click=\"form.reset()\">Reset</button>\n    </form>\n  `\n});","lang":"typescript","description":"This quickstart demonstrates how to set up a simple registration form using `useForm` for live validation. It shows binding form data, triggering validation on input, displaying errors, and submitting the form. The example includes basic error handling and form reset functionality."},"warnings":[{"fix":"Migrate any Axios-specific logic to use the native `fetch` API. If custom HTTP client behavior is required, consider wrapping the `fetch` API or providing a custom client function to `useForm` if the package supports it (check documentation for `client` option).","message":"Version 2.0.0 replaced Axios with the native `fetch` API for all HTTP requests. This means any custom Axios configurations, interceptors, or adapters will no longer function. Developers must adapt their code to use `fetch`-compatible patterns or provide their own `fetch` wrapper.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"For Inertia applications, use the dedicated `laravel-precognition-vue-inertia` package if available, or ensure your integration strategy aligns with the current package's scope as a standalone Vue client.","message":"When upgrading from `laravel-precognition` (the core package) versions prior to v1.0.0, be aware that support for Inertia packages was removed. While `laravel-precognition-vue` is a specific integration, ensure your project setup is not relying on older core package features related to Inertia.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Upgrade to v1.0.1 or newer to benefit from improved TypeScript support for wildcard validation paths. Ensure your `Form` type definitions accurately reflect your backend validation structure.","message":"Prior to v1.0.1, TypeScript support for wildcard validation paths (e.g., `data.*.name`) could be inconsistent. This might lead to type errors or incorrect inference when accessing errors for deeply nested or dynamic fields.","severity":"gotcha","affected_versions":"<1.0.1"},{"fix":"From v0.8.0, the `disableFileValidation()` method was added. If using older versions, manual validation or a custom approach for files might be necessary. For newer versions, ensure you understand how file validation is triggered and managed by Precognition.","message":"Files uploaded via `form.setFile()` or similar methods are not automatically validated unless `disableFileValidation()` is explicitly enabled. If file validation is crucial, ensure it's properly configured.","severity":"gotcha","affected_versions":"<0.8.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `useForm` is called with the correct signature: `useForm('post', '/api/endpoint', { field1: '', field2: '' })` where the third argument is an object of initial form data.","cause":"The `useForm` function expects a method, URL, and initial data object. Providing `undefined` or an invalid structure for the initial data can cause this.","error":"TypeError: Cannot read properties of undefined (reading 'errors') at useForm"},{"fix":"Add `import { useForm } from 'laravel-precognition-vue';` to your script section or component setup.","cause":"The `useForm` composition function was not imported from `laravel-precognition-vue`.","error":"Uncaught ReferenceError: useForm is not defined"},{"fix":"Ensure the `Accept` header is set to `application/json` for Precognition requests. Version 2.0.0 and later automatically set this header, but for custom `fetch` implementations or older versions, verify this header is present.","cause":"The Laravel backend is returning validation errors, but the browser's developer console is showing a generic network error without the detailed validation messages, likely due to a missing or incorrect `Accept` header which prevents Precognition from intercepting the validation response.","error":"Failed to load resource: the server responded with a status of 422 (Unprocessable Content) - network error in browser console without specific validation messages"}],"ecosystem":"npm"}