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

10 Must-Know TypeScript Features to Improve Your Coding Efficiency

Rails Designer v1.9: Bulk Actions 🚚

vueframe a simple Vue 3 component library for embedding video players

📄 Popular PDF Viewers for Vue.js: Which One Is Right for You? 🤔