Laravel 12 starter kits: Choosing React, Vue, or Livewire

Laravel 12, like its predecessors, aims to streamline development. One significant way it achieves this is through its starter kits. These kits provide pre-built authentication scaffolding, letting you jump straight into building your application's unique features instead of wrestling with user registration and login systems. With several options available, what should be considered before choosing one? This article will break down the core choices – React, Vue, and Livewire – and guide you on when to pick each one, plus how to quickly get started for each.

Note

All of these stater kits are easily customizable to your use-case, so you'll have freedom in development with any choice. You can also use custom starter kits.

React and Vue - for Inertia-Powered Apps:

Laravel's React and Vue starter kits both leverage Inertia.js. Think of Inertia as a bridge between your backend (Laravel) and your frontend (React or Vue). You write traditional server-side controllers and routes, but Inertia handles the frontend rendering using either React or Vue components.

// routes/web.php
Route::get('/users', [UserController::class, 'index']);

// app/Http/Controllers/UserController.php
public function index()
{
    return Inertia::render('Users/Index', [
        'users' => User::all(),
    ]);
}

In this example, Inertia::render tells Inertia to render the Users/Index component (either a .vue or .tsx file, depending on your kit) and pass the $users data to it.

When to choose React or Vue:

• Your team already has JavaScript expertise in either: You already have application code written in React or Vue, or you plan to write significant amounts of Vue or React code. Choose the framework your team is most comfortable with.
• You want a modern SPA experience: Fast, fluid transitions without full page reloads. This is Ideal for highly interactive applications. Although you can achieve this with Livewire, but you may find it easier with React/Vue.
• You plan to use React/Vue-specific ecosystem tools: Compared to Livewire, React and Vue have significantly more tools. You are able to leverage richer component libraries like Shadcn, specific build pipeline integrations, etc.

The difference between React and Vue:

Honestly, it comes down to personal or team preference. Both the React and Vue starter kits offer an opinionated, yet customizable, frontend. Both use TypeScript, Tailwind CSS and include Shadcn components out-of-the-box.

However, if you are new to both and wants to decide on which one to go for, these are the general guides:

• React: Mostly considered to have a steeper learning curve, but a vast ecosystem and larger community.
• Vue: Often praised for its approachability and ease of learning. Vue 3's Composition API (also used in the starter kit) makes it very comparable to React in terms of code organization.

Getting Started (React & Vue):

1. Create the Project:

   laravel new my-project
   # Select either "React" or "Vue" when prompted.
   

2. Install Dependencies and Run:

   cd my-project
   npm install
   npm run dev
   composer run dev
   

3. Adding more Shadcn components:

   npx shadcn-vue@latest add switch #for Vue
   npx shadcn@latest add switch #for React
   

4. Start Building: Your authentication routes, basic components, and layout are ready. You primarily work within the resources/js directory.

resources/js/
├── components/    # Reusable [React/Vue] components
├── [hooks/composables]        # [React hooks/ Vue composables]
├── layouts/       # Application layouts
├── lib/           # Utility functions and configuration
├── pages/         # Page components
└── types/         # TypeScript definitions

Livewire: The PHP-Centric Approach

The Livewire starter kit takes a different approach. Instead of a JavaScript framework, it uses Laravel Livewire. Livewire allows you to build dynamic interfaces using primarily PHP. You write Livewire components, which are essentially PHP classes that handle data and logic, and Blade templates to render the UI.

With recent additions of JavaScript-focused APIs like $js, wire:text, etc., it has become easier to build SPAs that provides similar UX as obtainable in React/Vue powered SPAs without leveraging Alpine APIs directly.

A simple Livewire component looks like this:

// app/Livewire/Counter.php
namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

<!-- resources/views/livewire/counter.blade.php -->
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

Livewire handles the communication between the frontend and backend via AJAX, giving an SPA experience, but without writing the JavaScript.

When to choose Livewire:

• You prefer working primarily in PHP: Less context-switching between languages.
• Your team is more comfortable with Blade: Leverage existing Blade templating skills.
• Faster prototyping: Livewire can be very quick to develop with, especially for developers already proficient in Laravel.

Getting Started (Livewire):

1. Create the Project:

   laravel new my-project
   # Select "Livewire" when prompted.
   

2. Install and Run:

   cd my-project
   composer run dev # Or 'php artisan serve')
   

3. Start Building: Explore the app/Livewire and resources/views/livewire directories. Modify the existing components or create new ones using php artisan make:livewire YourComponentName.

resources/views
├── components            # Reusable Livewire components
├── flux                  # Customized Flux components
├── livewire              # Livewire pages
├── partials              # Reusable Blade partials
├── dashboard.blade.php   # Authenticated user dashboard
├── welcome.blade.php     # Guest user welcome page

Conclusion

Laravel 12's starter kits provide excellent jumping-off points. The best choice depends on your project's needs and your team's skills. React and Vue (with Inertia) are the go-to for modern, interactive SPAs, though the choice between them is largely a matter of preference. Livewire shines when you want to stay within the Laravel ecosystem and build dynamic interfaces with minimal JavaScript. All three kits provide layouts flexibility that can be quickly adapted for individual project/team needs.

Remember to check out the official Laravel documentation for more details on starter kit's features and customization options. If you prefer social or federated login, consider the WorkOS Authkit variant.