Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mstdmstd's avatar

How to get valid inertia form with Composition API syntax?

In laravel 9 with Inertiajs 3 I use $inertia.form for data saving, like :

<template>
    <div v-if="!formEditor.processing">
        <input type="text" class="form-control" v-model="formEditor.name"
        :class="{ 'is-invalid' : formEditor.errors && formEditor.errors.name }"
    >
        <div class="invalid-feedback mb-3" v-if="formEditor.errors"
        :class="{ 'd-block' : formEditor.errors && formEditor.errors.name}">
        {{ formEditor.errors.name }}
    </div>
</div>
...

</template>



<script>
    import AdminLayout from '@/Layouts/AdminLayout'

    export default {
    props: ['currency', 'is_insert'], // I got these data from controller

    components: {
    AdminLayout,
},
    data() {
        return {
            formEditor: this.$inertia.form({
                id: '',
                name: '',
            }),
        }
    },
    methods: {
        saveCurrency() {
            this.formEditor.post(this.route('admin.currencies.store'), {
                onError: (e) => {
                    console.log(e)
                }
            })
        }, // saveCurrency() {
    }
}
</script>

where formEditor is valid inertia form and it worked ok for me, but I failed to remake this code with Composition API, like :

<script>
import AdminLayout from '@/Layouts/AdminLayout'

import {settingsJsMomentDatetimeFormat, settingsAppColors} from '@/app.settings.js'
import {ref} from "vue";


let self= this
console.log('self::')
console.log(self)      // I have undefined here

export default {
    props: ['currency'],

    name: 'CurrencyForm',
    components: {
        AdminLayout
    },
    setup(props) {
        let currency = ref(props.currency)
        console.log('CurrencyForm $inertia::')
        console.log($inertia) // I got "ReferenceError: $inertia is not defined error" here

        console.log('CurrencyForm this.$inertia::')
        console.log(this.$inertia) // THIS WAY DOES NOT WORK here

        console.log('CurrencyForm self.$inertia::')
        console.log(self.$inertia)  // THIS WAY DOES NOT WORK here

        let form = this.$inertia.form({
            id: '',
            name: '',
        })
        const formEditor = ref( form )

        const adminCurrencyFormOnMounted = async () => {
           ...
        }
        onMounted(adminCurrencyFormOnMounted)

        return { // setup return
           ...
        }
    }, // setup() {

}

I failed to create inertia form as I suppose I lost valid inertia context. How can I get it and fix this error ?

Thanks!

0 likes
4 replies
tykus's avatar

Import useForm from Inertia

import { useForm } from '@inertiajs/inertia-vue3';

const form = useForm({
  id: '',
  name: '',
})

const submit = () => {
    form.post(/* your url */), {
        // options
    })
}
1 like
mstdmstd's avatar

@tykus Thanks, it helped! Could you, please, also explain how to get access to objects with Composition API I use in my page.

  1. Make I make redirect from js script:
    this.$inertia.visit(route('admin.users.index'), {method: 'get'});
  1. Properties of the page :
    this.$page.props.jetstream.flash

? Also, please give a link where these methods are described.

tykus's avatar
tykus
Best Answer
Level 104

@mstdmstd

Make I make redirect from js script:

In that case, just import Inertia itself https://inertiajs.com/manual-visits#method

import { Inertia } from '@inertiajs/inertia'
Inertia.visit(route('admin.users.index'), {method: 'get'});

Properties of the page :

In this case, you need to import usePage https://inertiajs.com/shared-data#accessing-shared-data

import { usePage } from '@inertiajs/inertia-vue3'
usePage.props.jetstream.flash
3 likes

Please or to participate in this conversation.