06 - Create Form with Inertia Form Helper

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 of our courses? (36 h 00 min)

You also get:

61 courses

Premium tutorials

Access to repositories

Private Discord

Get Premium for $129/year or $29/month

Already a member? Login here