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.

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

    In Laravel, this approach to rendering HTML can still be achieved using 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>    @foreach ($users as $user)        Hello, {{ $user->name }} <br />    @endforeach</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 Hotwire, and .

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

    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.

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

    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 and Blade. Then, consult the official to learn how to take your application to the next level with interactive Livewire components.

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

    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 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.

    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:

    An Inertia page corresponds to a Vue or React component, typically stored within the 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:

    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 . And, when deploying your application via Laravel Forge, it’s a breeze to ensure that Inertia’s server-side rendering process is always running.

    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, , and Vite so that you can start building your next big idea.

    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 , 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.