Laravel 9 Inertia Vue 3 Form Submit Example

In this short tutorial we will see how to handling form data to store in laravel 9 using inertia vue 3. For this section we will use Vue 3 SFCs method <script setup>.


CategoryController.php

    /**
    * Show the form for creating a new resource.
    *
    * @return \Illuminate\Http\Response
    */
public function create()
{
    return Inertia::render(
        'Category/Create'
    );
}


    /**
    * Store a newly created resource in storage.
    *
    * @param  \Illuminate\Http\Request  $request
    * @return \Illuminate\Http\Response
    */
public function store(Request $request)
{
    $request->validate([
        'name' => 'required|string|max:255',
        'slug' => 'required|string|max:255',
    ]);


    Category::create([
        'name' => $request->name,
        'slug' => \Str::slug($request->slug)
    ]);
    sleep(1);


    return redirect()->route('category.index')->with('message', 'Category Created Successfully');
}


Submit Inertia Form

In latest inertia vue 3 SFCs method <script setup>. you can submit form to create method.

const submit = () => {
    form.post(route('category.store'));
};  

<form @submit.prevent="submit">
   .....                         
</form>


Category/Create.vue

<script setup>
import BreezeAuthenticatedLayout from "@/Layouts/Authenticated.vue";
import { Head } from "@inertiajs/inertia-vue3";
import BreezeButton from "@/Components/Button.vue";
import { Link } from "@inertiajs/inertia-vue3";
import { useForm } from '@inertiajs/inertia-vue3'

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

const submit = () => {
    form.post(route('category.store'));
};
</script>

<template>
    <Head title="Category Create" />

    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Category
            </h2>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-white border-b border-gray-200">
                        <form @submit.prevent="submit">
                            <div class="mb-6">
                                <label
                                    for="Name"
                                    class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
                                    >Name</label
                                >
                                <input
                                    type="text"
                                    v-model="form.name"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                    placeholder=""
                                    
                                />
                                 <div v-if="form.errors.name" class="text-red-600 text-sm">{{ form.errors.name }}</div>
                            </div>
                            <div class="mb-6">
                                <label
                                    for="slug"
                                    class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
                                    >Slug</label
                                >
                                <input
                                    type="text"
                                    v-model="form.slug"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                    
                                />
                                 <div v-if="form.errors.slug" class="text-red-600 text-sm">{{ form.errors.slug }}</div>
                            </div>
                            <button
                                type="submit"
                                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                                :disabled="form.processing"
                                :class="{ 'opacity-25': form.processing }"
                            >
                                Submit
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </BreezeAuthenticatedLayout>
</template>


Submit Inertia helper Form with routes

You can also pass data with direct form routes.

<form @submit.prevent="form.post(route('category.store'))">
  ....                            
</form>
Laravel inertia vue 3 submit form

Laravel inertia vue 3 submit form

laravel inertia form save data

laravel inertia form save data


Read Also

Laravel 9 Inertia Vue 3 File Upload Example

Laravel 9 Inertia Vue 3 Search & Filter Example

Laravel 9 Install Inertia js Server-side rendering (SSR)

Laravel 9 with Inertia Vue 3 Implement Flash Message

Laravel 9 Inertia Vue 3 CRUD Tutorial Example

Laravel Inertia Vue 3 Form Validation

Laravel 9 Inertia Vue 3 Pagination Example

How to Delete Record in Laravel 9 with Inertia Vue 3