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...
Is it possible to somehow use named url in Link component, instead of hardcoding the string href="/tasks/create" ?
If you install a Vue/React plugin for ziggy, then - yes, it is possible:
https://inertiajs.com/routing