Having to use Axios instead of Inertia

I've been using Laravel with Vue + Inertia and I have noticed that often I am using an Axios ajax request rather than Inertia.

An example - I have a form within a Modal, I don't want to close it after submission, so I'm having to submit via Axios to controller that returns just a JSON response, then adjust the page as necessary based on that response.

This feels undesirable as I'm losing a lot of the helpfulness of Inertia, for example using "useForm" errors to show inline InputError component against an input field, if there is a validation error. So to get the same UI experience I need to put in place an Axios way of dealing with the validation error response from the Laravel controller.

I'm pretty new to Vue and Inertia and I can't quite figure if this is

expected as Inertia just handles routing and therefore page transitions really

I'm missing something obvious

If the answer is 1), how do others generally work around this situation?

LaryAI

1 year ago

Level 58

Great question! This is a common scenario when using Inertia.js with Vue and Laravel.

Short Answer:
You can still use Inertia's useForm and related helpers for AJAX-style requests (like submitting a modal form and not navigating away), without needing to drop down to Axios and lose Inertia's error handling and reactivity.

Explanation

Inertia is not just for full-page transitions.
You can use Inertia's form helpers (useForm) to submit forms via AJAX and handle validation errors, even if you don't want to navigate away or close a modal. The trick is to use the preserveState and preserveScroll options, and to control what happens after submission.

Example Solution

Suppose you have a modal form. Instead of using Axios, you can do:

import { useForm } from '@inertiajs/vue3'

const form = useForm({
    name: '',
    email: '',
    // ...other fields
})

function submit() {
    form.post(route('your.route.name'), {
        preserveScroll: true,
        onSuccess: () => {
            // Optionally reset the form or show a success message
            // form.reset()
            // Don't close the modal if you don't want to
        },
        onError: () => {
            // Errors are now available in form.errors
            // Your InputError components will work as expected
        }
    })
}

In your template:

<form @submit.prevent="submit">
    <input v-model="form.name" />
    <InputError :message="form.errors.name" />
    <!-- ... -->
    <button type="submit">Save</button>
</form>

Key Points:

form.errors will contain validation errors from Laravel, just like with full-page Inertia requests.
You don't have to close the modal or navigate away unless you want to.
You get all the benefits of Inertia's form helpers, including error handling and reactivity.

When to Use Axios Directly?

If you're hitting a non-Inertia endpoint (e.g., a third-party API).
If you need to upload files and want more control (though Inertia supports file uploads too).
If you want to handle everything manually.

But for most CRUD forms, stick with Inertia's helpers for a consistent experience.

Summary

You are not missing anything obvious.
Inertia's form helpers are designed for both page transitions and AJAX-style requests.
Use useForm and related helpers for modal forms, and you keep all the error handling and reactivity.

References:

Let me know if you want a more detailed example!

andyjameswhite

1 year ago

Level 9

Ok thanks Lary, this is a lot more helpful response than you gave in the Chat window!

I need to know a bit more about what to do in the controller, I can now think of a few ways to handle this, I need to know which is advisable.

Take the example above.

The Modal contains an Add Article Form. After the controller proceses the storing of the newly created Article, we redirect to the appropriate page.

I assume we would now redirect to the Article index route/page from where the modal was opened, now passing additional parameter "article" to change the modal to an edit form with the newly added article, so it can be updated?

The downside I can see to this is that the index method in the controller starts to become crowded with optional parameters, plus same problem in the Json Resource for the Articles list would then need to load a currentArticle

Or is there a better way, say redirecting to an Edit route/page to handle the response? Or would this lose the original index page, or make additional repeated queries

martinbean

1 year ago

Level 80

@andyjameswhite You should be redirecting to a details page with a success message after creating a resource:

public function store(StoreArticleRequest $request)
{
    $article = Article::query()->create($request->validated());

    return redirect()->route('articles.show', compact('article'))->with([
        'success' => __('Article created.'),
    ]);
}

The implementations of your controller actions should not be dictated by however you’ve decided to display forms etc in your UI.

I’d be utterly confused if I clicked an “Add article” button, a form in a modal was presented, I entered the details, pressed “Submit”, and the page refreshed and the modal was re-shown with my inputs because it had “changed” to an edit form.

Please or to participate in this conversation.