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 form save data
Read Also
Laravel 9 Inertia Vue 3 DataTables Example
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
