What are the main differences between Inertia's useForm() and axios requests?

Question

I know Inertia useForm() rerenders the components after successfull form submission. And, in the Inertia docs it says it "very similar to handling classic HTML form submissions".

I am building an SPA with Laravel10-breeze-vue, and I need to know which approach is better to use on post requests, if its Inertia's useForm() or should I stay with axios request and Pinia JS?

score 0 · Answer 1 · answered Mar 03 '23 at 10:20

useForm is just an object wrapper that has pre-defined method you can use, you can take a look at the source code here.

e.i you can use transform, post, reset with a callback onFinish

import { useForm } from '@inertiajs/vue3'

const form = useForm({
    email: null,
    password: null,
    remember: null
})

const submit = () => {
    form.loading = true
    form.transform(data => ({
        ...data,
        remember: form.remember ? 'on' : '',
    })).post('/url', {
        onFinish: () => { 
            form.loading = false
            form.reset('password')
        },
    });
}

the HTTP request from useForm are using inertia router which also uses axios,

So;

useForm - is an object form helper that also uses axios

axios - is a full HTTP library

What are the main differences between Inertia's useForm() and axios requests?

1 Answers1