Learn

Laravel and Vue roadmap

Tick what you can already do. The order is ours. Every track credits the roadmap.sh map it leans on.

0of 29

Our path

The order we would hand someone building Laravel and Vue. Tick a topic when you can do it with the guide closed.

Each station names the roadmap.sh map it leans on.

No guide on this site for this track yet. Clear the filter to see the topics.

Before the framework

Leans on the PHP roadmap

The 2026 stackLaravel 13, Vue 3, Inertia 3, Vite, TypeScript, and Pest. That is the default on this site.Guide
PHP for this stackPHP 8.3 or newer, plus the Node floor Vite 8 asks for.Guide
Types, functions, and classesRead a Laravel class and know what the types, returns, and namespaces mean.
Composer and autoloadingRequire a package, commit composer.lock, and leave vendor/ to install.

Laravel on the kit

Leans on the Laravel roadmap

Routes and a first pageA Laravel route that renders a Vue page through Inertia.Guide
Eloquent, migrations, and factoriesA table, a model, and a factory so a test does not invent rows by hand.
Server-side validationValidate in Laravel. Inertia redirects back, and the page reads the errors.
Login and registrationThe Vue starter kit already ships Fortify: login, registration, password reset, and email verification.Guide
Who can editA policy decides edit and delete. The Vue page hides the button the policy refuses.Guide
Feature tests with PestThe starter kit uses Pest. Hit the route and assert the Inertia page.Guide

Vue on the kit

Leans on the Vue roadmap

Single-file componentsTemplate, script setup, props, and emits. One component does one job.
Reactivity and composablesref and computed for local state. A composable when a second component needs the same logic.
Typed pagesType the props the controller sends. The page stops guessing the payload.Guide
ViteThe alias, the env, and the hot file. A missing manifest usually means public/hot is still there.Guide
A layout that staysA persistent layout keeps the shell mounted while the page changes.Guide
Flash messagesFlash data survives the next request. The page shows it once.Guide

One app

Leans on the Full stack roadmap

Forms and server errorsThe form posts to Laravel. The page shows the error bag beside the fields.Guide
WayfinderNamed routes from Laravel, generated into resources/js. One URL helper on the kit.Guide
PaginationLength-aware pages, or a cursor on a unique column such as id.Guide
File uploadsAn Inertia file upload is POST, with _method: put when the route is PUT.Guide

Ship it

Leans on the DevOps roadmap

Sailsail:install writes compose.yaml. down -v deletes the database volume.Guide
DeployLeave public/hot off the server. Cloud runs migrate --force. A VPS also needs storage:link once and queue:restart.Guide
Server-rendered HTMLInertia SSRnpm run build:ssr writes the server bundle. php artisan inertia:start-ssr runs it.Guide

When the kit is the wrong shape

Leans on the Software architect roadmap

Session or tokenYour own SPA can use the Sanctum session cookie. A bearer token is for a client that cannot keep that cookie.Guide
Separate SPAVue RouterVue Router belongs on a Sanctum SPA. The Inertia kit navigates without it.Guide
Separate front endNuxt against a Laravel APINuxt 4 when the front end is its own app. The API is Laravel.Guide
Third-party OAuthPassportPassport is for another product that brings its own client id. Your own users stay on Fortify or Sanctum.Guide
Screen-owned statePiniaPinia when the screen owns the state. Server data stays in Inertia props.Guide
Live updatesLive updatesReverb for a public or private channel. A public channel uses useEchoPublic.Guide

0of 6

PHP

The PHP you need before a Laravel file reads cleanly.

Source: PHP on roadmap.sh

No guide on this site for this track yet. Clear the filter to see the topics.

Language

PHP for this stackPHP 8.3 or newer, plus the Node floor Vite 8 asks for.Guide
Types, functions, and classesRead a Laravel class and know what the types, returns, and namespaces mean.
Errors and exceptionsFollow a stack trace to the line that threw, then to the request that caused it.

Packages

Composer and autoloadingRequire a package, commit composer.lock, and leave vendor/ to install.

The web request

HTTP and JSONA request, a status code, headers, and a JSON body. Laravel and Vue meet here.
Injection, XSS, and CSRFKnow the three failures the framework is already blocking, so a raw query does not open them again.

0of 17

Laravel

The framework topics behind the guides on this site.

Source: Laravel on roadmap.sh

No guide on this site for this track yet. Clear the filter to see the topics.

The request

Routes and a first pageA Laravel route that renders a Vue page through Inertia.Guide
Server-side validationValidate in Laravel. Inertia redirects back, and the page reads the errors.
Early validationEarly validationPrecognition checks the field before the real submit.Guide
QUERY routes and markdown responsesQUERY matches Route::any and Route::redirect with no opt-in. response()->markdown() and Route::query() are opt-in.Guide

Data

Eloquent, migrations, and factoriesA table, a model, and a factory so a test does not invent rows by hand.
API resourcesShape the JSON in a resource. The Vue page depends on that shape, not on the table.Guide
PaginationLength-aware pages, or a cursor on a unique column such as id.Guide
A data tableSort and filter on the server. The Vue table renders the page Laravel returns.Guide

Accounts

Login and registrationThe Vue starter kit already ships Fortify: login, registration, password reset, and email verification.Guide
Social loginSocial loginGitHub login is a normal link. The callback finds or creates the user.Guide
Who can editA policy decides edit and delete. The Vue page hides the button the policy refuses.Guide
RolesRoles and permissionsSpatie permissions when a policy per model is not the right split.Guide
Third-party OAuthPassportPassport is for another product that brings its own client id. Your own users stay on Fortify or Sanctum.Guide

After the response

Queued jobsMail, exports, and slow work leave the request. The job is safe to run twice.Guide
NotificationsStore a notification and show it on a Vue page.Guide
Live updatesLive updatesReverb for a public or private channel. A public channel uses useEchoPublic.Guide
Feature tests with PestThe starter kit uses Pest. Hit the route and assert the Inertia page.Guide

0of 15

Vue

Vue 3 on the official starter kit, and the separate SPA case.

Source: Vue on roadmap.sh

No guide on this site for this track yet. Clear the filter to see the topics.

The component

Single-file componentsTemplate, script setup, props, and emits. One component does one job.
Reactivity and composablesref and computed for local state. A composable when a second component needs the same logic.
Typed pagesType the props the controller sends. The page stops guessing the payload.Guide

The shell

A layout that staysA persistent layout keeps the shell mounted while the page changes.Guide
The document titleSet the title from the server so the tab matches the page.Guide
Flash messagesFlash data survives the next request. The page shows it once.Guide
Partial reloadsReload one prop when the rest of the page should stay.Guide
Inertia 3.9Background pollingInertia 3.9 polls in the background. The default mode is throttle.Guide

State and URLs

Screen-owned statePiniaPinia when the screen owns the state. Server data stays in Inertia props.Guide
WayfinderNamed routes from Laravel, generated into resources/js. One URL helper on the kit.Guide
Read before addingZiggyRead the guide before adding Ziggy. The kit already has Wayfinder.Guide
Separate SPAVue RouterVue Router belongs on a Sanctum SPA. The Inertia kit navigates without it.Guide

Build and pages

ViteThe alias, the env, and the hot file. A missing manifest usually means public/hot is still there.Guide
TranslationsStrings the visitor can switch, with Laravel and Vue sharing the locale.Guide
File uploadsAn Inertia file upload is POST, with _method: put when the route is PUT.Guide

0of 9

Frontend

The browser skills under every Vue page.

Source: Frontend on roadmap.sh

No guide on this site for this track yet. Clear the filter to see the topics.

The page

Semantic HTMLA label for every field, a heading order, and a control that works from the keyboard.
Layout at phone widthThe page still reads at 390px. The starter kit uses Tailwind 4 for that layout.
Forms and server errorsThe form posts to Laravel. The page shows the error bag beside the fields.Guide

The browser

ViteThe alias, the env, and the hot file. A missing manifest usually means public/hot is still there.Guide
Typed pagesType the props the controller sends. The page stops guessing the payload.Guide
The document titleSet the title from the server so the tab matches the page.Guide

What the visitor touches

File uploadsAn Inertia file upload is POST, with _method: put when the route is PUT.Guide
TranslationsStrings the visitor can switch, with Laravel and Vue sharing the locale.Guide
Flash messagesFlash data survives the next request. The page shows it once.Guide

0of 11

Backend

The server skills under every Laravel app.

Source: Backend on roadmap.sh

No guide on this site for this track yet. Clear the filter to see the topics.

The protocol

HTTP and JSONA request, a status code, headers, and a JSON body. Laravel and Vue meet here.
Resources and verbsA URL is a thing. GET reads it, POST creates it, PUT or PATCH updates it, DELETE removes it.
CORSA separate origin is blocked until Laravel sends the right Access-Control-Allow-Origin.Guide

Data

Tables and indexesAn index for the column you filter or order by. Cursor pagination needs a unique column.Guide
Eloquent, migrations, and factoriesA table, a model, and a factory so a test does not invent rows by hand.
API resourcesShape the JSON in a resource. The Vue page depends on that shape, not on the table.Guide
CacheCache a read that is allowed to be a little old, and know which write clears it.

Trust

Session or tokenYour own SPA can use the Sanctum session cookie. A bearer token is for a client that cannot keep that cookie.Guide
Injection, XSS, and CSRFKnow the three failures the framework is already blocking, so a raw query does not open them again.
Secrets and envSecrets stay in the environment. .env stays off git.
Queued jobsMail, exports, and slow work leave the request. The job is safe to run twice.Guide

0of 13

Full stack

Three ways to join Laravel and Vue, and the work they share.

Source: Full stack on roadmap.sh

No guide on this site for this track yet. Clear the filter to see the topics.

Pick the join

The 2026 stackLaravel 13, Vue 3, Inertia 3, Vite, TypeScript, and Pest. That is the default on this site.Guide
Routes and a first pageA Laravel route that renders a Vue page through Inertia.Guide
Session or tokenYour own SPA can use the Sanctum session cookie. A bearer token is for a client that cannot keep that cookie.Guide
Separate front endNuxt against a Laravel APINuxt 4 when the front end is its own app. The API is Laravel.Guide
Inertia or LivewireThis site's default join is Inertia and Vue. The guide compares that with Livewire.Guide

Shared product work

Forms and server errorsThe form posts to Laravel. The page shows the error bag beside the fields.Guide
PaginationLength-aware pages, or a cursor on a unique column such as id.Guide
A data tableSort and filter on the server. The Vue table renders the page Laravel returns.Guide
File uploadsAn Inertia file upload is POST, with _method: put when the route is PUT.Guide
TranslationsStrings the visitor can switch, with Laravel and Vue sharing the locale.Guide

Read before you add a kit

Read before addingBreeze and JetstreamRead the guide before installing either one. The Vue starter kit already has auth.Guide
WayfinderNamed routes from Laravel, generated into resources/js. One URL helper on the kit.Guide
CORSA separate origin is blocked until Laravel sends the right Access-Control-Allow-Origin.Guide

0of 8

DevOps

Get the app off your laptop and keep the worker running.

Source: DevOps on roadmap.sh

No guide on this site for this track yet. Clear the filter to see the topics.

The machine

Shell, processes, and logsSee the PHP process, the queue worker, and the log line from the request you just sent.
Sailsail:install writes compose.yaml. down -v deletes the database volume.Guide
Secrets and envSecrets stay in the environment. .env stays off git.

Ship

Feature tests with PestThe starter kit uses Pest. Hit the route and assert the Inertia page.Guide
DeployLeave public/hot off the server. Cloud runs migrate --force. A VPS also needs storage:link once and queue:restart.Guide
Server-rendered HTMLInertia SSRnpm run build:ssr writes the server bundle. php artisan inertia:start-ssr runs it.Guide

Keep it running

Queued jobsMail, exports, and slow work leave the request. The job is safe to run twice.Guide
Live updatesLive updatesReverb for a public or private channel. A public channel uses useEchoPublic.Guide

0of 7

System design

How the same Laravel and Vue app behaves for more than one person.

Source: System design on roadmap.sh

No guide on this site for this track yet. Clear the filter to see the topics.

Data

Tables and indexesAn index for the column you filter or order by. Cursor pagination needs a unique column.Guide
PaginationLength-aware pages, or a cursor on a unique column such as id.Guide
CacheCache a read that is allowed to be a little old, and know which write clears it.

Work that can wait

Queued jobsMail, exports, and slow work leave the request. The job is safe to run twice.Guide
More than one app serverKeep the session in the cookie or the database, so the next server can answer the same user.

Live

Live updatesLive updatesReverb for a public or private channel. A public channel uses useEchoPublic.Guide
Inertia 3.9Background pollingInertia 3.9 polls in the background. The default mode is throttle.Guide

0of 6

Software design and architecture

Where the next Laravel and Vue feature is allowed to live.

Source: Software design and architecture on roadmap.sh

No guide on this site for this track yet. Clear the filter to see the topics.

Boundaries

A place for each layerHTTP stays in controllers, rules in actions, and the screen in a Vue page.
A home for a featureA feature has a folder. Helpers that every feature grabs become a second framework.
Who can editA policy decides edit and delete. The Vue page hides the button the policy refuses.Guide

The contract

API resourcesShape the JSON in a resource. The Vue page depends on that shape, not on the table.Guide
Typed pagesType the props the controller sends. The page stops guessing the payload.Guide
WayfinderNamed routes from Laravel, generated into resources/js. One URL helper on the kit.Guide

0of 10

Software architect

Decisions to write down before a second stack appears in the repo.

Source: Software architect on roadmap.sh

No guide on this site for this track yet. Clear the filter to see the topics.

The shape

The 2026 stackLaravel 13, Vue 3, Inertia 3, Vite, TypeScript, and Pest. That is the default on this site.Guide
Inertia or LivewireThis site's default join is Inertia and Vue. The guide compares that with Livewire.Guide
Session or tokenYour own SPA can use the Sanctum session cookie. A bearer token is for a client that cannot keep that cookie.Guide
Separate front endNuxt against a Laravel APINuxt 4 when the front end is its own app. The API is Laravel.Guide

One of each

Login and registrationThe Vue starter kit already ships Fortify: login, registration, password reset, and email verification.Guide
Read before addingBreeze and JetstreamRead the guide before installing either one. The Vue starter kit already has auth.Guide
Third-party OAuthPassportPassport is for another product that brings its own client id. Your own users stay on Fortify or Sanctum.Guide
Read before addingZiggyRead the guide before adding Ziggy. The kit already has Wayfinder.Guide

The bar

Feature tests with PestThe starter kit uses Pest. Hit the route and assert the Inertia page.Guide
DeployLeave public/hot off the server. Cloud runs migrate --force. A VPS also needs storage:link once and queue:restart.Guide

Sources

The topics on this page are written for Laravel and Vue. They lean on these public roadmaps: