> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.
# 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?
```mermaid theme={null}
flowchart TD
A["Laravel application"] --> B{"Where do you build the UI?"}
A --> G["Build assets with Vite"]
B --> C["Blade"]
B --> D["Livewire + Alpine.js"]
B --> E["Inertia + React / Vue / Svelte"]
B --> F["API + independent SPA"]
C --> C1["Return HTML from the server"]
D --> D1["Build dynamic UI led by PHP"]
E --> E1["Create an SPA-like experience in one repository"]
F --> F1["Integrate with a separate frontend or mobile app"]
G --> C1
G --> D1
G --> E1
G --> F1
```
## Going with PHP
### Blade
[Blade](/en/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](https://livewire.laravel.com) 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](/en/blog/livewire-introduction).
### PHP-first starter kits
The Laravel 13 [starter kits](/en/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](https://inertiajs.com) 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](/en/blog/inertia-introduction), [Introducing React](/en/blog/react-introduction), [Introducing Vue](/en/blog/vue-introduction), and [Introducing Svelte](/en/blog/svelte-introduction).
### 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](/en/sanctum))
* Shaping JSON responses (for example, [Eloquent API Resources](/en/eloquent-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](/en/starter-kits), 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](/en/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
Review the basics of server-side rendering.
Compare the initial setups for React, Vue, Svelte, and Livewire.
Learn about the development server, HMR, and production build flow.
Learn how Inertia bridges Laravel and JavaScript frameworks.
## Related topics
- [Creating a Laravel Starter Kit](/en/advanced/starter-kit-creation.md)
- [Knowledge required before starting Laravel](/en/true-tutorial.md)
- [Streaming](/en/packages/laravel-copilot-sdk/streaming.md)
- [Vite and Asset Bundling](/en/vite.md)
- [Installation](/en/installation.md)