Frontend

Introduction

Laravel is a backend framework that provides all of the features you need to build modern web applications, such as routing, validation, caching, queues, file storage, and more. However, we believe it's important to offer developers a beautiful full-stack experience, including powerful approaches for building your application's frontend.

There are two primary ways to tackle frontend development when building an application with Laravel, and which approach you choose is determined by whether you would like to build your frontend by leveraging PHP or by using JavaScript frameworks such as Vue and React. We'll discuss both of these options below so that you can make an informed decision regarding the best approach to frontend development for your application.

Using PHP

PHP & Blade

In the past, most PHP applications rendered HTML to the browser using simple HTML templates interspersed with PHP echo statements which render data that was retrieved from a database during the request:

1<div>
2    <?php foreach ($users as $user): ?>
3        Hello, <?php echo $user->name; ?> <br />
4    <?php endforeach; ?>
5</div>
1<div>
2    <?php foreach ($users as $user): ?>
3        Hello, <?php echo $user->name; ?> <br />
4    <?php endforeach; ?>
5</div>

In Laravel, this approach to rendering HTML can still be achieved using views and Blade. Blade is an extremely light-weight templating language that provides convenient, short syntax for displaying data, iterating over data, and more:

1<div>
2    @foreach ($users as $user)
3        Hello, {{ $user->name }} <br />
4    @endforeach
5</div>
1<div>
2    @foreach ($users as $user)
3        Hello, {{ $user->name }} <br />
4    @endforeach
5</div>

When building applications in this fashion, form submissions and other page interactions typically receive an entirely new HTML document from the server and the entire page is re-rendered by the browser. Even today, many applications may be perfectly suited to having their frontends constructed in this way using simple Blade templates.

Growing Expectations

However, as user expectations regarding web applications have matured, many developers have found the need to build more dynamic frontends with interactions that feel more polished. In light of this, some developers choose to begin building their application's frontend using JavaScript frameworks such as Vue and React.

Others, preferring to stick with the backend language they are comfortable with, have developed solutions that allow the construction of modern web application UIs while still primarily utilizing their backend language of choice. For example, in the Rails ecosystem, this has spurred the creation of libraries such as Turbo Hotwire, and Stimulus.

Within the Laravel ecosystem, the need to create modern, dynamic frontends by primarily using PHP has led to the creation of Laravel Livewire and Alpine.js.

Livewire

Laravel Livewire is a framework for building Laravel powered frontends that feel dynamic, modern, and alive just like frontends built with modern JavaScript frameworks like Vue and React.

When using Livewire, you will create Livewire "components" that render a discrete portion of your UI and expose methods and data that can be invoked and interacted with from your application's frontend. For example, a simple "Counter" component might look like the following:

 1<?php
 2 
 3namespace App\Http\Livewire;
 4 
 5use Livewire\Component;
 6 
 7class Counter extends Component
 8{
 9    public $count = 0;
10 
11    public function increment()
12    {
13        $this->count++;
14    }
15 
16    public function render()
17    {
18        return view('livewire.counter');
19    }
20}
 1<?php
 2 
 3namespace App\Http\Livewire;
 4 
 5use Livewire\Component;
 6 
 7class Counter extends Component
 8{
 9    public $count = 0;
10 
11    public function increment()
12    {
13        $this->count++;
14    }
15 
16    public function render()
17    {
18        return view('livewire.counter');
19    }
20}

And, the corresponding template for the counter would be written like so:

1<div>
2    <button wire:click="increment">+</button>
3    <h1>{{ $count }}</h1>
4</div>
1<div>
2    <button wire:click="increment">+</button>
3    <h1>{{ $count }}</h1>
4</div>

As you can see, Livewire enables you to write new HTML attributes such as wire:click that connect your Laravel application's frontend and backend. In addition, you can render your component's current state using simple Blade expressions.

For many, Livewire has revolutionized frontend development with Laravel, allowing them to stay within the comfort of Laravel while constructing modern, dynamic web applications. Typically, developers using Livewire will also utilize Alpine.js to "sprinkle" JavaScript onto their frontend only where it is needed, such as in order to render a dialog window.

If you're new to Laravel, we recommend getting familiar with the basic usage of views and Blade. Then, consult the official Laravel Livewire documentation to learn how to take your application to the next level with interactive Livewire components.

Starter Kits

If you would like to build your frontend using PHP and Livewire, you can leverage our Breeze or Jetstream starter kits to jump-start your application's development. Both of these starter kits scaffold your application's backend and frontend authentication flow using Blade and Tailwind so that you can simply start building your next big idea.

Using Vue / React

Although it's possible to build modern frontends using Laravel and Livewire, many developers still prefer to leverage the power of a JavaScript framework like Vue or React. This allows developers to take advantage of the rich ecosystem of JavaScript packages and tools available via NPM.

However, without additional tooling, pairing Laravel with Vue or React would leave us needing to solve a variety of complicated problems such as client-side routing, data hydration, and authentication. Client-side routing is often simplified by using opinionated Vue / React frameworks such as Nuxt and Next; however, data hydration and authentication remain complicated and cumbersome problems to solve when pairing a backend framework like Laravel with these frontend frameworks.

In addition, developers are left maintaining two separate code repositories, often needing to coordinate maintenance, releases, and deployments across both repositories. While these problems are not insurmountable, we don't believe it's a productive or enjoyable way to develop applications.

Inertia

Thankfully, Laravel offers the best of both worlds. Inertia bridges the gap between your Laravel application and your modern Vue or React frontend, allowing you to build full-fledged, modern frontends using Vue or React while leveraging Laravel routes and controllers for routing, data hydration, and authentication — all within a single code repository. With this approach, you can enjoy the full power of both Laravel and Vue / React without crippling the capabilities of either tool.

After installing Inertia into your Laravel application, you will write routes and controllers like normal. However, instead of returning a Blade template from your controller, you will return an Inertia page:

 1<?php
 2 
 3namespace App\Http\Controllers;
 4 
 5use App\Http\Controllers\Controller;
 6use App\Models\User;
 7use Inertia\Inertia;
 8 
 9class UserController extends Controller
10{
11    /**
12     * Show the profile for a given user.
13     *
14     * @param  int  $id
15     * @return \Inertia\Response
16     */
17    public function show($id)
18    {
19        return Inertia::render('Users/Profile', [
20            'user' => User::findOrFail($id)
21        ]);
22    }
23}
 1<?php
 2 
 3namespace App\Http\Controllers;
 4 
 5use App\Http\Controllers\Controller;
 6use App\Models\User;
 7use Inertia\Inertia;
 8 
 9class UserController extends Controller
10{
11    /**
12     * Show the profile for a given user.
13     *
14     * @param  int  $id
15     * @return \Inertia\Response
16     */
17    public function show($id)
18    {
19        return Inertia::render('Users/Profile', [
20            'user' => User::findOrFail($id)
21        ]);
22    }
23}

An Inertia page corresponds to a Vue or React component, typically stored within the resources/js/Pages directory of your application. The data given to the page via the Inertia::render method will be used to hydrate the "props" of the page component:

 1<script setup>
 2import Layout from '@/Layouts/Authenticated.vue';
 3import { Head } from '@inertiajs/inertia-vue3';
 4 
 5const props = defineProps(['user']);
 6</script>
 7 
 8<template>
 9    <Head title="User Profile" />
10 
11    <Layout>
12        <template #header>
13            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
14                Profile
15            </h2>
16        </template>
17 
18        <div class="py-12">
19            Hello, {{ user.name }}
20        </div>
21    </Layout>
22</template>
 1<script setup>
 2import Layout from '@/Layouts/Authenticated.vue';
 3import { Head } from '@inertiajs/inertia-vue3';
 4 
 5const props = defineProps(['user']);
 6</script>
 7 
 8<template>
 9    <Head title="User Profile" />
10 
11    <Layout>
12        <template #header>
13            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
14                Profile
15            </h2>
16        </template>
17 
18        <div class="py-12">
19            Hello, {{ user.name }}
20        </div>
21    </Layout>
22</template>

As you can see, Inertia allows you to leverage the full power of Vue or React when building your frontend, while providing a light-weight bridge between your Laravel powered backend and your JavaScript powered frontend.

Server-Side Rendering

If you're concerned about diving into Inertia because your application requires server-side rendering, don't worry. Inertia offers server-side rendering support. And, when deploying your application via Laravel Forge, it's a breeze to ensure that Inertia's server-side rendering process is always running.

Starter Kits

If you would like to build your frontend using Inertia and Vue / React, you can leverage our Breeze or Jetstream starter kits to jump-start your application's development. Both of these starter kits scaffold your application's backend and frontend authentication flow using Inertia, Vue / React, Tailwind, and Vite so that you can start building your next big idea.

Bundling Assets

Regardless of whether you choose to develop your frontend using Blade and Livewire or Vue / React and Inertia, you will likely need to bundle your application's CSS into production ready assets. Of course, if you choose to build your application's frontend with Vue or React, you will also need to bundle your components into browser ready JavaScript assets.

By default, Laravel utilizes Vite to bundle your assets. Vite provides lightning-fast build times and near instantaneous Hot Module Replacement (HMR) during local development. In all new Laravel applications, including those using our starter kits, you will find a vite.config.js file that loads our light-weight Laravel Vite plugin that makes Vite a joy to use with Laravel applications.

The fastest way to get started with Laravel and Vite is by beginning your application's development using Laravel Breeze, our simplest starter kit that jump-starts your application by providing frontend and backend authentication scaffolding.

lightbulb

For more detailed documentation on utilizing Vite with Laravel, please see our dedicated documentation on bundling and compiling your assets.

Comments

No Comments Yet
Add Comment

“Laravel” is a Trademark of Taylor Otwell.
The source documentation is released under MIT license. See laravel/docs on GitHub for details.
The translated documentations are released under MIT license. See cornch/laravel-docs-l10n on GitHub for details.