In the last lesson, we stopped before creating the login form. But, to create the login form, we need to get familiar with forms and how they work in Inertia in general.
We will do that based on another form: we will create the "Add new post" form and apply that form to the login form in the following lessons a bit later.
Preparation: Vue Component, Route and Controller
First, we need to create a Vue component where the form will be, then the route, and then we need to submit the form.
resources/js/Pages/Posts/Create.vue:
<script setup>import AppLayout from '../../Layouts/App.vue';import { Head } from '@inertiajs/vue3';</script> <template> <Head title="New Post" /> <AppLayout> Form here </AppLayout></template>In the routes, we will transform the post route into a resource.
routes/web.php:
Route::get('posts', [PostController::class, 'index'])->name('posts.index'); Route::resource('posts', PostController::class); Route::inertia('about', 'About')->name('about');Route::inertia('login', 'Pages/Login')->name('login');In the PostController we need to return Inertia in the create() method.
app/Http/Controllers/PostController.php:
use Inertia\Inertia;use Inertia\Response; class PostController extends Controller{ // public function create(): Response { return Inertia::render('Posts/Create'); } }After visiting the posts/create page, we see the page with the Form here text.
Add Link to the Form
Next, add a link...