There used to be two ways to build the frontend for a Laravel application: either use a frontend framework, such as React or Vue, or work from a Blade template.

Now there is a third option: Laravel Livewire.

Livewire is a full-stack framework that streamlines the process of building dynamic interfaces in Laravel. Basically, it enables you to do things within the confines of Laravel that would have previously required JavaScript.

In this guide, we’ll compare Livewire to Vue.js and explore some key features to help you decide which to use in your next project.

Prerequisites

To follow along with this tutorial, you’ll need:

• Some knowledge of Vuejs 2.x
• Knowledge of Laravel
• Experience using Blade to make templates

Setup

It’s fairly easy to set up Vue in a Laravel application. From Laravel 7, you can use the laravel/ui package to set up Vue as well as other frontend frameworks, such as React and Bootstrap.

The command below will install laravel/ui in a Laravel project.

composer require laravel/ui

After installing the package, set up Vue by running the artisan command.

php artisan ui vue

Similarly, Livewire is a PHP package that is installed using Composer.

composer require livewire/livewire

Livewire provides some Blade directives — @livewireScripts and @livewireStyles — which are used to add Livewire-related scripts and styles, respectively. The Livewire directives are just custom Blade directives and are rendered on page load.

#vue #laravel #web-development #php #javascript