Inertia: Access this.$inertia inside Composition API vue 3

[carpad88]

Hi people,

I'm new using inertia, so I get up an app with Laravel-Inertia-Vue3.

I've been playing around with the Composition API but I don't know how to access this.$inertia inside the set up method.

The code is:

<script>
import {reactive} from "vue";

export default {
    setup() {
        const data = reactive({
            form: {
                first_name: null,
                last_name: null,
                email: null,
            },
        });

        const submit = () => {
            this.$inertia.post('/form', data.form)
        }

        return {
            data,
            submit
        }
    }
}
</script>

But when calling the submit method I got Uncaught TypeError: _this is undefined.

[reinink]

When using the Vue 3 composition API, this is undefined within the setup() method. Meaning you cannot access this.$inertia. In these situations, you need to simply import Inertia instead.

import { Inertia } from '@inertiajs/inertia'

Inertia.post('/form', data.form)

[carpad88]

@reinink thanks a lot, now is working as expected.

Is there any difference in using Inertia.post('/form', data.form) over axios.post('/form', data.form) with the Composition API?

If I use this.$inertia on the Options API and for example I make dd(request()->all() on the server side, I got a modal with the result on the client side (see image).

But when I use Inertia.post('/form', data.form), there isn't modal I have to check out the response on devtools