Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 3 additions & 71 deletions precognition.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
- [Introduction](#introduction)
- [Live Validation](#live-validation)
- [Using Vue](#using-vue)
- [Using Vue and Inertia](#using-vue-and-inertia)
- [Using React](#using-react)
- [Using React and Inertia](#using-react-and-inertia)
- [Using Alpine and Blade](#using-alpine)
- [Configuring Axios](#configuring-axios)
- [Customizing Validation Rules](#customizing-validation-rules)
Expand All @@ -20,6 +18,9 @@ Laravel Precognition allows you to anticipate the outcome of a future HTTP reque

When Laravel receives a "precognitive request", it will execute all of the route's middleware and resolve the route's controller dependencies, including validating [form requests](/docs/{{version}}/validation#form-request-validation) - but it will not actually execute the route's controller method.

> [!NOTE]
> As of Inertia 2.3, Precognition support is built-in. Please consult the [Inertia Forms documentation](https://inertiajs.com/docs/v2/the-basics/forms) for more information. Earlier Inertia versions require Precognition 0.x.

<a name="live-validation"></a>
## Live Validation

Expand Down Expand Up @@ -187,38 +188,6 @@ You may determine if a form submission request is in-flight by inspecting the fo
</button>
```

<a name="using-vue-and-inertia"></a>
### Using Vue and Inertia

> [!NOTE]
> If you would like a head start when developing your Laravel application with Vue and Inertia, consider using one of our [starter kits](/docs/{{version}}/starter-kits). Laravel's starter kits provide backend and frontend authentication scaffolding for your new Laravel application.

Before using Precognition with Vue and Inertia, be sure to review our general documentation on [using Precognition with Vue](#using-vue). When using Vue with Inertia, you will need to install the Inertia compatible Precognition library via NPM:

```shell
npm install laravel-precognition-vue-inertia
```

Once installed, Precognition's `useForm` function will return an Inertia [form helper](https://inertiajs.com/forms#form-helper) augmented with the validation features discussed above.

The form helper's `submit` method has been streamlined, removing the need to specify the HTTP method or URL. Instead, you may pass Inertia's [visit options](https://inertiajs.com/manual-visits) as the first and only argument. In addition, the `submit` method does not return a Promise as seen in the Vue example above. Instead, you may provide any of Inertia's supported [event callbacks](https://inertiajs.com/manual-visits#event-callbacks) in the visit options given to the `submit` method:

```vue
<script setup>
import { useForm } from 'laravel-precognition-vue-inertia';

const form = useForm('post', '/users', {
name: '',
email: '',
});

const submit = () => form.submit({
preserveScroll: true,
onSuccess: () => form.reset(),
});
</script>
```

<a name="using-react"></a>
### Using React

Expand Down Expand Up @@ -378,40 +347,6 @@ You may determine if a form submission request is in-flight by inspecting the fo
</button>
```

<a name="using-react-and-inertia"></a>
### Using React and Inertia

> [!NOTE]
> If you would like a head start when developing your Laravel application with React and Inertia, consider using one of our [starter kits](/docs/{{version}}/starter-kits). Laravel's starter kits provide backend and frontend authentication scaffolding for your new Laravel application.

Before using Precognition with React and Inertia, be sure to review our general documentation on [using Precognition with React](#using-react). When using React with Inertia, you will need to install the Inertia compatible Precognition library via NPM:

```shell
npm install laravel-precognition-react-inertia
```

Once installed, Precognition's `useForm` function will return an Inertia [form helper](https://inertiajs.com/forms#form-helper) augmented with the validation features discussed above.

The form helper's `submit` method has been streamlined, removing the need to specify the HTTP method or URL. Instead, you may pass Inertia's [visit options](https://inertiajs.com/manual-visits) as the first and only argument. In addition, the `submit` method does not return a Promise as seen in the React example above. Instead, you may provide any of Inertia's supported [event callbacks](https://inertiajs.com/manual-visits#event-callbacks) in the visit options given to the `submit` method:

```js
import { useForm } from 'laravel-precognition-react-inertia';

const form = useForm('post', '/users', {
name: '',
email: '',
});

const submit = (e) => {
e.preventDefault();

form.submit({
preserveScroll: true,
onSuccess: () => form.reset(),
});
};
```

<a name="using-alpine"></a>
### Using Alpine and Blade

Expand Down Expand Up @@ -616,9 +551,6 @@ window.axios.defaults.headers.common['Authorization'] = authToken;
client.use(window.axios)
```

> [!WARNING]
> The Inertia flavored Precognition libraries will only use the configured Axios instance for validation requests. Form submissions will always be sent by Inertia.

<a name="customizing-validation-rules"></a>
## Customizing Validation Rules

Expand Down