Tools
Catch the bad line
22 prompts. Each one has a single line that would break a Laravel and Vue app. Click that line.
This page does not chat. One line in each prompt is wrong. The guide under it is the correction.
Round 1 of 22
Paginate the posts list.
Click the line that would break the app.
Two rows with the same published_at do not give the cursor a stable bound, so order by id.
Laravel and Vue paginationRound 2 of 22
Point a Vue form at the posts store route.
Click the line that would break the app.
Do not install Ziggy on the Vue starter kit. You would have two ways to build the same URL.
Ziggy or Wayfinder for Laravel routes in VueRound 3 of 22
Add a posts page to the Vue starter kit.
Click the line that would break the app.
Wayfinder is not Vue Router. Inertia still navigates. A client router beside it is the mistake.
Typed Laravel routes in Vue with WayfinderRound 4 of 22
Store a cover image on Laravel Cloud.
Click the line that would break the app.
Do not add storage:link to a Cloud deploy. The disk resets on every deploy, so the symlink does not survive.
Deploy a Laravel and Vue appRound 5 of 22
Add login to a new Vue starter kit app.
Click the line that would break the app.
Do not install Breeze or Jetstream on the Vue starter kit. You would get two login stacks.
Breeze, Jetstream, and the Vue starter kitRound 6 of 22
Ship the Vue build to production.
Click the line that would break the app.
Vite writes public/hot while npm run dev is running. If that file is on the server, every page loads JavaScript from the laptop. Do not commit it.
Deploy a Laravel and Vue appRound 7 of 22
Tell the author this post changed under them.
Click the line that would break the app.
Do not abort(409) from a controller to mean this record changed. Inertia already uses 409 for the asset version, and the client will reload instead of showing your sentence.
Read an Inertia 409 after deployRound 8 of 22
Let a separate Vue app send the session cookie.
Click the line that would break the app.
Do not set allowed_origins to ['*'] in the same file as supports_credentials => true.
Turn on CORS credentials for a separate Vue appRound 9 of 22
Stop the 419 on a same-host Inertia form.
Click the line that would break the app.
Do not disable VerifyCsrfToken for the whole web group. The token is the check.
Fix a 419 after you deployRound 10 of 22
Run a queued job after the Vue form saves.
Click the line that would break the app.
Do not call queue:work from a controller so a Vue button starts the worker. The button dispatches a job.
queue:work in production, listen locallyRound 11 of 22
Show Saved. after the post form redirects.
Click the line that would break the app.
Do not register a second router.on('flash'). The Vue starter kit already listens.
Show a saved message in VueRound 12 of 22
Hear a published post in the Vue page.
Click the line that would break the app.
Do not listen with useEcho on a public channel.
Queue a broadcast instead of blocking the saveRound 13 of 22
Show the next page of posts.
Click the line that would break the app.
simplePaginate omits last_page. Do not compute page 2 of undefined.
Render simplePaginate without a last pageRound 14 of 22
Make HTTPS stick on a public server.
Click the line that would break the app.
Do not call trustProxies(at: '*') on a machine exposed directly.
Trust proxies so HTTPS sticksRound 15 of 22
Let every component read the posts list.
Click the line that would break the app.
Do not router.reload into a Pinia store so every component can read it. Pass the prop.
When to use Pinia with Laravel and InertiaRound 16 of 22
Install Laravel Boost for the coding agent.
Click the line that would break the app.
Do not install Boost inside the Vue app with npm. There is no Boost component to mount.
Install Laravel Boost on a Vue starter kitRound 17 of 22
Update a post cover from the Vue form.
Click the line that would break the app.
PHP does not fill a file on a real PUT, PATCH, or DELETE. Post the form and send _method of put.
Upload files from Vue to Laravel with InertiaRound 18 of 22
Delete a post from the Vue index.
Click the line that would break the app.
Do not call forceDelete() from the button you labeled Delete. That removes the row. Soft delete is the one you can restore.
Keep soft-deleted rows off a Vue indexRound 19 of 22
Log the user out from the Vue page.
Click the line that would break the app.
Do not set preserveState: true on a logout request. The old page's props, including the user, stay on screen until something else navigates.
preserveState keeps the Vue page you haveRound 20 of 22
Run the new migration when you deploy.
Click the line that would break the app.
Do not call Artisan::call('migrate') from a controller the Vue page can hit. Two deploys, or two curious browsers, should not race that.
Run migrations in the release, not in a requestRound 21 of 22
Open Telescope from a Vue admin link.
Click the line that would break the app.
Do not return true for every user so a Vue admin link can open Telescope. Leave the viewTelescope gate on local.
Install Telescope for local debuggingRound 22 of 22
Read the browser location during setup.
Click the line that would break the app.
Do not read window in setup.
Keep the Inertia SSR process runningScore
You caught 0 of 22.
You found every bad line. Paste the prompt on the guide, not the one on this page.
With JavaScript off, every round stays open and the bad line is marked. The score needs the script.