Courses

Vue Laravel 12 Starter Kit: CRUD Project

Create Form with Inertia Form Helper

Summary of this lesson:
- Creating a "Create Task" button and page
- Building form structure with useForm inertia hook
- Implementing form submission and validation handling

The final part of this simple CRUD is Create and Edit forms. They will be similar, with a few differences. Let's start with adding a new task.

Link to Create Task Page

First, let's add a link above the table to lead to the Route for creating the task.

In the Laravel Routes, we have Route::resource('tasks', TaskController::class), so we need to link to the /tasks/create URL.

To do that in our Index.vue, we import the Link component and add this button-style link above the table.

resources/js/pages/Tasks/Index.vue

import {Head, router} from '@inertiajs/vue3'; 
import {Head, router, Link} from '@inertiajs/vue3'; 
import {Button} from '@/components/ui/button';
import {Button, buttonVariants} from '@/components/ui/button';
 
// ...
 
<Head title="Tasks List"/>
 
<div class="mt-4">
    <Link
    :class="buttonVariants({variant: 'outline'})" href="/tasks/create"> Create Task
</Link>
</div>
 
<Table class="mt-4">

This is the visual...

The full lesson is only for Premium Members.
Want to access all 14 lessons of this course? (82 min read)

You also get:

  • 73 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord