Laravel 9 Inertia Vue 3 Form Submit Example

#laravel #inertia #vue #tailwindcss

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 . CategoryController.php <div class="highlight"><pre class="highlight php"><code> /** * 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'); } </code></pre></div> Submit Inertia Form In latest inertia vue 3 SFCs method. you can submit form to create method. <div class="highlight"><pre class="highlight html"><code>const submit = () => { form.post(route('category.store')); }; <form @submit.prevent="submit"> ..... </form> </code></pre></div> Category/Create.vue <div class="highlight"><pre class="highlight html"><code><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> </code></pre></div> Submit Inertia helper Form with routes You can also pass data with direct form routes. <div class="highlight"><pre class="highlight html"><code><form @submit.prevent="form.post(route('category.store'))"> .... </form> </code></pre></div> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1e3pwudwecoudkyjut6.png" alt="Laravel inertia vue 3 submit form">

DEV Community

Laravel 9 Inertia Vue 3 Form Submit Example

Top comments (0)

Read next

Deploying Laravel 11 with Reverb Websocket Support

How to run Laravel scheduler in Docker container

Integrating Storybook with PrimeNG and TailwindCSS in an Nx Workspace

Tailwind | Custom Plugins