DEV Community 👩‍💻👨‍💻

Cover image for Laravel 9 Inertia Vue 3 Form Submit Example
larainfo
larainfo

Posted on • Originally published at larainfo.com

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 .</p> <p><em>CategoryController.php</em><br> </p> <div class="highlight"><pre class="highlight php"><code> <span class="cd">/** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */</span> <span class="k">public</span> <span class="k">function</span> <span class="n">create</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="nc">Inertia</span><span class="o">::</span><span class="nf">render</span><span class="p">(</span> <span class="s1">'Category/Create'</span> <span class="p">);</span> <span class="p">}</span> <span class="cd">/** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */</span> <span class="k">public</span> <span class="k">function</span> <span class="n">store</span><span class="p">(</span><span class="kt">Request</span> <span class="nv">$request</span><span class="p">)</span> <span class="p">{</span> <span class="nv">$request</span><span class="o">-&gt;</span><span class="nf">validate</span><span class="p">([</span> <span class="s1">'name'</span> <span class="o">=&gt;</span> <span class="s1">'required|string|max:255'</span><span class="p">,</span> <span class="s1">'slug'</span> <span class="o">=&gt;</span> <span class="s1">'required|string|max:255'</span><span class="p">,</span> <span class="p">]);</span> <span class="nc">Category</span><span class="o">::</span><span class="nf">create</span><span class="p">([</span> <span class="s1">'name'</span> <span class="o">=&gt;</span> <span class="nv">$request</span><span class="o">-&gt;</span><span class="n">name</span><span class="p">,</span> <span class="s1">'slug'</span> <span class="o">=&gt;</span> <span class="err">\</span><span class="nc">Str</span><span class="o">::</span><span class="nf">slug</span><span class="p">(</span><span class="nv">$request</span><span class="o">-&gt;</span><span class="n">slug</span><span class="p">)</span> <span class="p">]);</span> <span class="nb">sleep</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="k">return</span> <span class="nf">redirect</span><span class="p">()</span><span class="o">-&gt;</span><span class="nf">route</span><span class="p">(</span><span class="s1">'category.index'</span><span class="p">)</span><span class="o">-&gt;</span><span class="nf">with</span><span class="p">(</span><span class="s1">'message'</span><span class="p">,</span> <span class="s1">'Category Created Successfully'</span><span class="p">);</span> <span class="p">}</span> </code></pre></div> <p></p> <p><strong>Submit Inertia Form</strong><br> In latest inertia vue 3 SFCs method. you can submit form to create method.<br> </p> <div class="highlight"><pre class="highlight html"><code>const submit = () =&gt; { form.post(route('category.store')); }; <span class="nt">&lt;form</span> <span class="err">@</span><span class="na">submit.prevent=</span><span class="s">"submit"</span><span class="nt">&gt;</span> ..... <span class="nt">&lt;/form&gt;</span> </code></pre></div> <p></p> <p><em>Category/Create.vue</em><br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;script </span><span class="na">setup</span><span class="nt">&gt;</span> <span class="k">import</span> <span class="nx">BreezeAuthenticatedLayout</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@/Layouts/Authenticated.vue</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">Head</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@inertiajs/inertia-vue3</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="nx">BreezeButton</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@/Components/Button.vue</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">Link</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@inertiajs/inertia-vue3</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">useForm</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@inertiajs/inertia-vue3</span><span class="dl">'</span> <span class="kd">const</span> <span class="nx">form</span> <span class="o">=</span> <span class="nx">useForm</span><span class="p">({</span> <span class="na">name</span><span class="p">:</span> <span class="dl">''</span><span class="p">,</span> <span class="na">slug</span><span class="p">:</span> <span class="dl">''</span><span class="p">,</span> <span class="p">});</span> <span class="kd">const</span> <span class="nx">submit</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">form</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="nx">route</span><span class="p">(</span><span class="dl">'</span><span class="s1">category.store</span><span class="dl">'</span><span class="p">));</span> <span class="p">};</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;template&gt;</span> <span class="nt">&lt;Head</span> <span class="na">title=</span><span class="s">"Category Create"</span> <span class="nt">/&gt;</span> <span class="nt">&lt;BreezeAuthenticatedLayout&gt;</span> <span class="nt">&lt;template</span> <span class="na">#header</span><span class="nt">&gt;</span> <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"font-semibold text-xl text-gray-800 leading-tight"</span><span class="nt">&gt;</span> Category <span class="nt">&lt;/h2&gt;</span> <span class="nt">&lt;/template&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"py-12"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"max-w-7xl mx-auto sm:px-6 lg:px-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"bg-white overflow-hidden shadow-sm sm:rounded-lg"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"p-6 bg-white border-b border-gray-200"</span><span class="nt">&gt;</span> <span class="nt">&lt;form</span> <span class="err">@</span><span class="na">submit.prevent=</span><span class="s">"submit"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-6"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"Name"</span> <span class="na">class=</span><span class="s">"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"</span> <span class="nt">&gt;</span>Name<span class="nt">&lt;/label</span> <span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">v-model=</span><span class="s">"form.name"</span> <span class="na">class=</span><span class="s">"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"</span> <span class="na">placeholder=</span><span class="s">""</span> <span class="nt">/&gt;</span> <span class="nt">&lt;div</span> <span class="na">v-if=</span><span class="s">"form.errors.name"</span> <span class="na">class=</span><span class="s">"text-red-600 text-sm"</span><span class="nt">&gt;</span>{{ form.errors.name }}<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-6"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"slug"</span> <span class="na">class=</span><span class="s">"block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"</span> <span class="nt">&gt;</span>Slug<span class="nt">&lt;/label</span> <span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">v-model=</span><span class="s">"form.slug"</span> <span class="na">class=</span><span class="s">"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"</span> <span class="nt">/&gt;</span> <span class="nt">&lt;div</span> <span class="na">v-if=</span><span class="s">"form.errors.slug"</span> <span class="na">class=</span><span class="s">"text-red-600 text-sm"</span><span class="nt">&gt;</span>{{ form.errors.slug }}<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"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"</span> <span class="na">:disabled=</span><span class="s">"form.processing"</span> <span class="na">:class=</span><span class="s">"{ 'opacity-25': form.processing }"</span> <span class="nt">&gt;</span> Submit <span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/form&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/BreezeAuthenticatedLayout&gt;</span> <span class="nt">&lt;/template&gt;</span> </code></pre></div> <p></p> <p><strong>Submit Inertia helper Form with routes</strong></p> <p>You can also pass data with direct form routes.<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt">&lt;form</span> <span class="err">@</span><span class="na">submit.prevent=</span><span class="s">"form.post(route('category.store'))"</span><span class="nt">&gt;</span> .... <span class="nt">&lt;/form&gt;</span> </code></pre></div> <p></p> <p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1e3pwudwecoudkyjut6.png" alt="Laravel inertia vue 3 submit form"></p>

Top comments (0)

Head to your account's Settings to...

🌚 Enable dark mode
🔠 Change your default font
📚 Adjust your experience level to see more relevant content