LARAVEL HOW TO

This allows developers to take advantage of the rich ecosystem of JavaScript packages and tools available via NPM. 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.Īlthough 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. 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.

LARAVEL HOW TO

Then, consult the official Laravel Livewire documentation to learn how to take your application to the next level with interactive Livewire components. If you're new to Laravel, we recommend getting familiar with the basic usage of views and Blade. 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. In addition, you can render your component's current state using simple Blade expressions.įor many, Livewire has revolutionized frontend development with Laravel, allowing them to stay within the comfort of Laravel while constructing modern, dynamic web applications. For example, a simple 'Counter' component might look like the following:Īs you can see, Livewire enables you to write new HTML attributes such as wire:click that connect your Laravel application's frontend and backend. 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. 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. 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. For example, in the Rails ecosystem, this has spurred the creation of libraries such as Turbo Hotwire, and Stimulus. 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. In light of this, some developers choose to begin building their application's frontend using JavaScript frameworks such as Vue and React.

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. Even today, many applications may be perfectly suited to having their frontends constructed in this way using simple Blade templates. 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. 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: 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. 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. However, we believe it's important to offer developers a beautiful full-stack experience, including powerful approaches for building your application's frontend. 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.