laravel-precognition-vue-inertia - useForm redirect behaviour

[stickeerehan]

Laravel Precognition Plugin Version

0.4.1

Laravel Version

10.17.1

Plugin

Vue w/ Inertia

Description

When calling form.submit(), the controller is correctly hit, and a redirect response is returned using to_route() within the controller.

Inspecting the network tab, a request is fired off to get the redirected page, however rather then a partial request being returned, the full HTML is returned and the redirect never actually happens.

Steps To Reproduce

Component

<script setup lang="ts">
import { useForm } from 'laravel-precognition-vue';

const form = useForm('post', route('test'), {
    test: true,
});

</script>

<template>
    <button
        @click="form.submit()"
    >
        Proceed to payment
    </button>
</template>

web.php

Route::get('/', HomeController::class)->name('home');
Route::post('/test', function () {
    return to_route('home');
})->name('test')->middleware([HandlePrecognitiveRequests::class]);

HomeController.php

<?php

namespace App\Http\Controllers\Pages;

use App\Http\Controllers\Controller;
use Inertia\Inertia;
use Inertia\Response;

/**
 * Class HomeController
 */
class HomeController extends Controller
{
    public function __invoke(): Response
    {
        return Inertia::render('Homepage');
    }
}

[timacdonald]

@stickeerehan it looks like you have installed and are using the non-inertia version. You will want to make sure you have installed in the Inertia specific version of the package:

npm install laravel-precognition-vue-inertia

Additionally, you will want to update your imports:

<script setup lang="ts">
- import { useForm } from 'laravel-precognition-vue';
+ import { useForm } from 'laravel-precognition-vue-inertia';

const form = useForm('post', route('test'), {
    test: true,
});

</script>

<template>
    <button
        @click="form.submit()"
    >
        Proceed to payment
    </button>
</template>

That should get you back on track. Let us know if you have any further issues.