skip to content

Frontend Stack Choices

2 roadmaps16 questions

A Laravel UI is built with Vite, often from a starter kit, as Blade pages, Livewire components, an Inertia SPA or a separate client. Interviewers probe how you would choose between them.

on this pageshow

explore

questions

16

Which official starter kits does Laravel 13 offer, and what does each one give a brand-new application?

level: juniorimportance: must knowfreq 52%

answer

  1. three Inertia kits, one Livewire kit
  2. TypeScript plus a shadcn flavour
  3. Flux UI on the Livewire side
  4. Fortify behind every auth screen
  5. laravel new or --react/--vue/--svelte/--livewire

basics

~20 s

Laravel 13 offers React, Vue and Svelte kits built on Inertia with TypeScript, Tailwind and a shadcn component library, and a Livewire kit with Flux UI. Each creates a full app with Fortify-backed login, registration, password reset, 2FA and settings pages.

solid answer

~40 s

There are four official kits. The **React**, **Vue** and **Svelte** kits use Inertia 3, so Laravel keeps routing and controllers while pages are TypeScript components: React 19 with shadcn/ui, Vue's Composition API with shadcn-vue, Svelte 5 with shadcn-svelte, all on Tailwind, plus Wayfinder for typed route helpers. The **Livewire** kit uses Livewire 4 with Flux UI components and Blade, for teams that want to stay in PHP. Every kit ships the same product: login, registration, password reset, email verification, two-factor authentication and passkeys through Laravel Fortify, plus a dashboard and profile/security settings pages. You pick one in the `laravel new` prompt or with `--react`, `--vue`, `--svelte` or `--livewire`; the installer runs `composer create-project` on the kit's repository, so the result is a complete application.

code

bash · 6 lines
bash
# interactive: pick React, Vue, Svelte or Livewire at the prompt
laravel new hr-portal

# non-interactive: choose the kit with a flag
laravel new hr-portal --livewire
laravel new hr-portal --react

go deeper

for a junior

Name the four kits, what each is built on, and that all of them give you working login, registration and settings pages.

for a middle

Explain the Inertia versus Livewire split, Fortify behind the auth screens, Wayfinder in the Inertia kits and the install:features pruning step.

for a senior

Pick a kit from team skills and product needs, and point out what you inherit: Fortify's routes, a component library, a test suite.

for a principal

Treat the kit as a one-time scaffold that sets the front-end stack for years, so the choice is really a hiring and skills decision.

## What a starter kit is A Laravel **starter kit** is a complete Laravel application, published as a Composer project, that already contains a front end and working **authentication screens**. You do not add it to an existing app; you **create** a new app from it. The Laravel installer does this for you: `laravel new my-app` asks which kit you want, then runs `composer create-project laravel/react-starter-kit my-app` (or the Vue, Svelte or Livewire equivalent) instead of creating the plain `laravel/laravel` skeleton. Kits are optional — the docs are explicit that a fresh skeleton is equally valid — but they are the fastest way to a logged-in dashboard. ## The four kits | Kit | Front-end model | UI stack | Component library | |---|---|---|---| | React | Inertia 3 pages | React 19, TypeScript, Tailwind 4 | shadcn/ui (Radix primitives) | | Vue | Inertia 3 pages | Vue Composition API, TypeScript, Tailwind | shadcn-vue (Reka UI) | | Svelte | Inertia 3 pages | Svelte 5, TypeScript, Tailwind | shadcn-svelte | | Livewire | Livewire 4 components in Blade | PHP and Blade, Tailwind | Flux UI | **Inertia kits** keep Laravel's routes and controllers: a controller returns `Inertia::render('dashboard')` and the page is a TypeScript component under `resources/js/pages`. They also include **Wayfinder**, which generates typed functions for your Laravel routes and controller actions so the front end calls them without hard-coded URLs. The **Livewire kit** keeps everything in Blade and PHP. Its pages live under `resources/views/pages` as Livewire components, its layouts under `resources/views/layouts`, and it uses **Flux UI** for buttons, inputs, navigation and the sidebar. It does not use Volt. ## What every kit includes - **Authentication through Laravel Fortify**: login, logout, registration, password reset, email verification, password confirmation, two-factor authentication and passkeys. Fortify supplies the routes and controllers; the kit supplies the screens and the `app/Actions/Fortify` classes such as `CreateNewUser`. - **A dashboard** behind the `auth` middleware. - **Settings pages** for profile, security (password and two-factor) and appearance, in every kit. - **Two app layouts** — sidebar (the default) and header — and three auth-page layouts: simple, card and split. - **Tooling**: Vite with Tailwind, PHPUnit feature tests for the auth and settings flows (`tests/Feature/Auth`, `tests/Feature/Settings`), Pint, and Composer scripts such as `composer run dev`. - **Wiring you can read**: a `FortifyServiceProvider` in `app/Providers` tells Fortify which page to render for each screen — in the React kit, `Fortify::loginView()` returns `Inertia::render('auth/login')` — so following a request from route to screen never leaves your codebase. ## After creation ```bash cd my-app npm install && npm run build composer run dev ``` The installer usually handles the npm steps for you. During creation the kits also run a post-create hook, `php artisan install:features`, which asks which authentication features to keep — email verification, registration, two-factor, passkeys, password confirmation — and removes the code for the ones you drop. ## Choosing between them 1. **The team writes React, Vue or Svelte already** → the matching Inertia kit. 2. **The team is PHP-first and wants reactive UI without a JavaScript framework** → the Livewire kit. 3. **SSO or social login is a requirement** → the WorkOS AuthKit variant of whichever kit fits. 4. **No auth at all** → the plain skeleton, or a kit created with `--no-authentication`. ## Where the code lives | Concern | Inertia kits | Livewire kit | |---|---|---| | Pages | `resources/js/pages/*.tsx` (or `.vue` / `.svelte`) | `resources/views/pages` | | Layouts | `resources/js/layouts` | `resources/views/layouts` | | UI primitives | `resources/js/components/ui` | Flux components, customisable under `resources/views/flux` | | Auth screens | `resources/js/pages/auth` | `resources/views/pages/auth` | ## What interviewers check They want to hear that the kits are **Inertia-based SPAs or Livewire apps**, that **Fortify** does the authentication, and that the result is an **ordinary app you then own**. Describing Breeze or Jetstream as the current kits dates the answer: both READMEs say they are for Laravel 11.x and earlier.

  • What is Wayfinder doing in the React, Vue and Svelte kits?
    Wayfinder generates TypeScript functions for your Laravel routes and controller actions, so Inertia pages import a typed route instead of writing a URL string. Because those definitions are generated at build time, deleting a route that a page still imports makes the front-end build fail, which surfaces broken links early.
  • Can you add another shadcn component to the React kit after installation?
    Yes. The kit's UI components are source files in `resources/js/components/ui`, not a locked library, so you run `npx shadcn@latest add switch` and the component is written into that folder for you to import and edit.
  • Does the Livewire kit use Volt?
    No. The Livewire kit is built on Livewire 4, Flux UI and Blade, with its pages as Livewire components under `resources/views/pages`; it does not depend on Volt. The installer's `--livewire-class-components` flag chooses a variant with separate class-based components instead.

saying these in an interview costs you the question

  • Breeze and Jetstream are the official kits for a new Laravel 13 app
  • The React kit is a separate SPA that talks to a Laravel API with tokens
  • The kits implement authentication with their own controllers instead of Fortify
  • The Livewire kit is built on Volt
  • A starter kit is a Composer package you add to an existing app
open as a page

In a Laravel Blade layout, what does the @vite directive output, and how does that differ between npm run dev and npm run build?

level: juniorimportance: must knowfreq 62%

basics

~20 s

@vite prints the script and stylesheet tags for the entry points you name. With npm run dev it points them at the Vite dev server (plus the @vite/client HMR script); after npm run build it reads public/build/manifest.json and links the hashed, compiled files.

open as a page

What does it mean in practice that a Laravel starter kit's code is yours, and how do you keep a starter-kit app up to date?

level: middleimportance: must knowfreq 42%

basics

~20 s

A starter kit copies a whole application into your repository; there is no kit package to update. You edit its screens, actions and routes freely and keep the underlying packages (framework, Fortify, Inertia or Livewire, Flux) current with Composer and npm.

open as a page

In Laravel, how do Blade, Livewire, Inertia and a separate SPA on a JSON API differ in routing ownership and where UI state lives?

level: middleimportance: must knowfreq 50%

basics

~20 s

Blade, Livewire and Inertia all keep routing in Laravel's route files and controllers; only a separate SPA moves routing into a client-side router over a JSON API. UI state lives in the server render (Blade), a component snapshot (Livewire), or client components (Inertia, SPA).

open as a page

How does Laravel's Vite class choose between the dev server and built assets, and what breaks when public/hot or the manifest is wrong?

level: middleimportance: must knowfreq 46%

basics

~20 s

Laravel's Vite class calls isRunningHot(), which is just is_file() on public/hot. If the file exists, every tag points at the URL inside it; otherwise tags come from public/build/manifest.json. A stale hot file or a missing manifest breaks every page.

open as a page

Why are Laravel Breeze and Jetstream no longer the recommended starting point for a Laravel 13 app, and how do the current kits differ?

level: middleimportance: should knowfreq 38%

basics

~20 s

Breeze and Jetstream are marked as starter kits for Laravel 11.x and earlier. Laravel 13's kits are whole Inertia 3 or Livewire 4 applications with TypeScript, shadcn or Flux UI and Fortify auth, created by laravel new instead of an install command.

open as a page

In Laravel front ends, how do server round trips per interaction differ between Livewire, Inertia and a client-side SPA, and when does that matter?

level: middleimportance: should knowfreq 34%

basics

~20 s

In Livewire, every action or live-bound input change is a server request, so latency shows per interaction unless Alpine handles it. Inertia pays one request per visit or form submit; a separate SPA pays per API call it makes.

open as a page

In a Laravel app, what do laravel-vite-plugin's refresh option and the @viteReactRefresh Blade directive each do, and when do you need them?

level: middleimportance: should knowfreq 27%

basics

~20 s

The refresh option makes the dev server trigger a full page reload when Blade views, routes, lang files or Livewire classes change. @viteReactRefresh injects React Fast Refresh's preamble into Laravel's HTML during npm run dev and must precede @vite.

open as a page

In Laravel 13, how do you serve a versioned image referenced only from a Blade template through Vite, and what changed in laravel-vite-plugin 3?

level: middleimportance: should knowfreq 36%

basics

~20 s

List the files in the laravel-vite-plugin assets option so the build emits them with hashed names into the manifest, then print Vite::asset('resources/images/logo.png') in Blade. Plugin 3 (Vite 8) replaced the old import.meta.glob trick with this option.

open as a page

For an internal HR tool on Laravel 13 where staff sign in through company SSO and nobody self-registers, which starter kit variant fits and what do you configure?

level: seniorimportance: should knowfreq 22%

basics

~20 s

Use the WorkOS AuthKit variant of whichever kit suits the team (laravel new --workos). It delegates sign-in to AuthKit, which supports SSO, so you set the WORKOS_* variables, disable email-and-password in AuthKit and align AuthKit's inactivity timeout with Laravel's session lifetime.

open as a page

For public, search-indexed pages in a Laravel app, how do Blade, Livewire, Inertia with or without SSR, and a separate SPA compare in the HTML the first response contains?

level: seniorimportance: should knowfreq 32%

basics

~20 s

Blade and Livewire send fully rendered HTML first. Inertia without SSR sends page JSON and an empty mount element, so content appears only after JavaScript runs; Inertia SSR adds a separate JavaScript process. A separate SPA needs its own SSR.

open as a page

How does choosing Livewire or Inertia versus a separate SPA or a mobile client change the way a Laravel app authenticates users?

level: seniorimportance: should knowfreq 40%

basics

~20 s

Blade, Livewire and Inertia pages are served by Laravel itself, so they use ordinary session cookies and CSRF protection from the web middleware group. A separate SPA can still use sessions through Sanctum if it shares the top-level domain; a mobile app needs API tokens.

open as a page

After a florist's shop Laravel app deploys a new Vite build, some visitors get old CSS and others get 404s on /build/assets files; how do you diagnose it?

level: seniorimportance: should knowfreq 38%

basics

~20 s

Hashed file names mean the browser cache is rarely at fault; the HTML and the files on disk disagree. Check for a stale public/hot, a manifest cached by long-lived workers, cached HTML pointing at deleted hashes, and servers or a CDN missing the new build.

open as a page

How would you choose the UI approach for a startup's Laravel scheduling SaaS with a small team, a public booking page, a drag-and-drop staff calendar and a possible mobile app?

level: principalimportance: should knowfreq 30%

basics

~20 s

Start from team skills and the hardest screen. A drag-and-drop calendar favours client-side state (Inertia), the public booking page favours server-rendered HTML, and a future mobile app needs a token API anyway, so it does not force a separate SPA.

open as a page

How do you create a Laravel app from a community starter kit with the installer's --using option, and what must such a kit provide?

level: middleimportance: nice to knowfreq 14%

basics

~10 s

Run laravel new my-app --using=vendor/package; the installer runs composer create-project on that Packagist package instead of laravel/laravel. The kit must declare its environment variables in .env.example and its setup steps in composer.json's post-create-project-cmd.

open as a page

In a Laravel app under a nonce-based Content-Security-Policy, how do you get Vite-generated tags to carry the nonce, and what does Vite::useCspNonce() cover?

level: seniorimportance: nice to knowfreq 18%

basics

~10 s

Call Vite::useCspNonce() in a middleware before the view renders and send the returned nonce in the Content-Security-Policy header. Every tag the Vite class prints then carries nonce="…"; other inline scripts use Vite::cspNonce().

open as a page