Frontend

An introductory guide to help you decide how to combine Blade, Livewire, Inertia, React, Vue, Svelte, SPAs, and Vite in Laravel 13.

Overview

Laravel is a backend framework, but it also puts a strong emphasis on the developer experience all the way to the frontend.
Laravel 13 offers both PHP-centric approaches and approaches that leverage JavaScript frameworks such as React, Vue, and Svelte.

You can organize your thinking about which approach to choose around these three questions:

• Do you want to write the UI primarily in PHP?
• Do you want to write the UI primarily in JavaScript / TypeScript?
• Do you want to keep everything in one repository, or separate the API from an SPA?

Going with PHP

Blade

Blade is Laravel’s built-in template engine. You return views from controllers or routes, and the server-generated HTML is sent back to the browser.

Strengths

• Integrates naturally with Laravel’s routing, validation, and authentication
• Easy to keep everything in PHP, with a low learning curve
• Great fit for pages that prioritize SEO and initial rendering

Weaknesses

• Tends to require a full re-render on every page transition or form submission
• Complex interactions require additional JavaScript

Blade is well-suited to admin panels, in-house tools, content-oriented pages, and form-heavy applications.

Livewire

Laravel Livewire is an approach based on Blade that lets you implement more dynamic UIs primarily in PHP. You can build interactions such as modals, search, and inline editing with an experience close to React or Vue.

Strengths

• Build dynamic UIs as an extension of PHP and Blade
• Easy to tie into Laravel state management and validation
• Combines nicely with Alpine.js when you want to add JavaScript only where needed

Weaknesses

• Complex client-side state management is not as strong as with JavaScript frameworks
• Can be a poor fit for large SPAs where the frontend has broad responsibilities

For more on Livewire, see Introducing Livewire.

PHP-first starter kits

The Laravel 13 starter kits include a Livewire-based option for teams that want to stay PHP-centric all the way to dynamic UIs. Of course, you can still start with Blade only, but the PHP-first choice provided as a starter kit is Livewire. Everything from authentication to layout to Vite configuration is included, so you can start development as quickly as possible.

Using a JavaScript framework

Inertia + React / Vue / Svelte

Inertia is a bridge that lets you build page components with React, Vue, or Svelte while still leveraging Laravel’s routes, controllers, and authentication. Rather than fully separating an API server from an SPA, you can create a modern UI within a single Laravel application.

Strengths

• Take advantage of the component model of React / Vue / Svelte
• Routing and authentication can stay on the Laravel side
• Easy to manage the backend and frontend in a single repository

Weaknesses

• More to learn than a Blade-only setup
• Node.js tooling and TypeScript knowledge tend to be required

The official Laravel 13 starter kits let you choose from React / Vue / Svelte + Inertia right out of the box.

For more information, see Introducing Inertia, Introducing React, Introducing Vue, and Introducing Svelte.

Separating the API from an independent SPA

You can also fully separate the frontend from Laravel and have a separate SPA or mobile app consume the API. This is a good fit when you want to share the same backend across multiple clients.

In this case, Laravel primarily plays the following roles:

• Providing API routes
• Authentication and authorization (for example, Sanctum)
• Shaping JSON responses (for example, Eloquent API Resources)

Strengths

• Easier to deploy to multiple clients such as web, mobile, and desktop
• The frontend technology choice is decoupled from Laravel itself

Weaknesses

• You need to design authentication, data fetching, and deployment separately
• Tends to be more complex than a setup that lives entirely inside a single Laravel app

JavaScript-first starter kits

Using a starter kit, you can get started with Inertia, React / Vue / Svelte, Tailwind CSS, and Vite all set up. Authentication screens are also included from the start, so you can focus on UI development.

Bundling assets with Vite

Regardless of the approach you choose, in Laravel 13 you typically use Vite to build CSS and JavaScript. For Blade and Livewire, Vite bundles lightweight scripts and styles; for Inertia, it bundles the frontend code for the entire application.

The benefits of using Vite are:

• Fast HMR during local development
• Bundling and versioning of production assets
• Integration with Laravel’s @vite() directive

Laravel 13 starter kits come with a Vite-based frontend setup pre-configured.

Comparing approaches

Approach	Well-suited for	Strengths	Weaknesses
Blade	Content-oriented pages, form-heavy admin panels	Simple and easy to learn. Integrates naturally with Laravel’s built-in features	Full-page re-renders tend to increase for advanced UIs
Livewire	Business apps where you want to build dynamic UIs in PHP	Build responsive UIs while staying in PHP	Complex client-side state management is a bit weaker
Inertia + React / Vue / Svelte	Apps where you want a modern UI and unified operation with Laravel	Build an SPA-like experience in a single repository	Requires JavaScript / TypeScript proficiency
API + independent SPA	Products built around multiple clients or mobile integration	Easy to ship the frontend independently	Authentication, deployment, and operations tend to be more complex

Next steps

Blade templates

Review the basics of server-side rendering.

Starter kits

Compare the initial setups for React, Vue, Svelte, and Livewire.

Asset bundling with Vite

Learn about the development server, HMR, and production build flow.

Introducing Inertia

Learn how Inertia bridges Laravel and JavaScript frameworks.