Laravel 12 Starter Kits Explained: React, Vue and Livewire

When you start a new Laravel project, you don’t have to build everything from scratch. Laravel provides starter kits. They take care of the basics, such as routes, controllers, authentication, and front-end scaffolding boilerplate code.

With Laravel 12, these starter kits have been modernized to support two of today’s most popular JavaScript Single-Page Application frontend choices: React and Vue, while also offering the option to use the simpler approach with Blade templates, along with Livewire configuration. Each of these starter kits takes a slightly different approach to building your app:

• React if you prefer building with a more component-based approach

• Vue if you prefer something more akin to traditional JavaScript (no JSX, for instance)

• Livewire if you’d rather keep things mostly in PHP and Blade without heavy JavaScript

In this post, we’ll look at what each kit offers, how they differ, and which one makes the most sense for your next Laravel 12 project.

React Starter Kit

If you’re building a highly interactive web app, like Trello, Slack, or GitHub, and enjoy working with reusable UI components, the React starter kit is a great fit. In React, these pieces are called components, self-contained building blocks that can manage their own state, receive data from parent components, and be reused across your app.

The starter kit uses Inertia.js to connect React with Laravel routes and controllers. In simple terms, you get the benefits of both backend and frontend working together. Laravel handles all the backend logic, including routing, authentication, and database operations. Meanwhile, React handles the interactive frontend, allowing your pages to update automatically without having to reload the full page. You don’t need to build a custom API, which keeps things simpler and faster. On top of that, the kit comes with TypeScript for type safety, TailwindCSS for fast styling, and shadcn/ui for prebuilt UI components. This provides you with a solid, flexible base for building responsive UIs.

Layouts and variants

Once you’ve installed the React starter kit, most of your frontend code lives in resources/js. By default, your app uses a sidebar layout, but you can easily switch to a header layout by changing the import at the top of resources/js/layouts/app-layout.tsx.

The sidebar layout itself has three variants: the default, “inset,” and “floating.” You can pick the one that fits your app best by updating the variant prop in resources/js/components/app-sidebar.tsx.

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

Authentication page layout variants, such as login, registration, and password reset, come with three layout options: simple, card, and split. 

You can easily switch between them by updating the import at the top of resources/js/layouts/auth-layout.tsx. 

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Vue Starter Kit

If you want a frontend that’s flexible and easy to work with, the Vue starter kit is a solid pick. Again, it uses Inertia.js to connect Vue with Laravel routes and controllers, so you can build interactive pages that feel like a single-page app without needing a custom API. That means you get Vue’s reactive frontend features while Laravel handles all the backend logic.

The kit comes with the Vue 3 Composition API, TypeScript for safer code, TailwindCSS for quick styling, and the shadcn/ui for reusable UI components. Together, it gives you a clean setup that makes building responsive interfaces straightforward and flexible.

Layouts and variants

Most of the Vue frontend code lives in resources/js, organized to make it easy to find and customize components, pages, layouts, and hooks. By default, the app uses a sidebar layout, but you can switch to a header layout by changing the import at the top of resources/js/layouts/AppLayout.vue:

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'

import AppLayout from '@/layouts/app/AppHeaderLayout.vue'

The sidebar layout comes with three variants: default, inset, and floating. You can pick the one that works best by updating the variant prop in resources/js/components/AppSidebar.vue:

<

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

Authentication pages – like login, registration, and password reset – also have three layout options: simple, card, and split. To switch between them, just update the import at the top of resources/js/layouts/AuthLayout.vue:

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'

Like React, components are reusable, so changing layouts or UI elements doesn’t require rewriting pages.

Livewire Starter Kit

If you prefer a more traditional Model-View-Controller approach to your frontend by using Laravel’s Blade templating engine, the Livewire starter kit is a good choice. Livewire contains a bit of magic sprinkled onto your templates, in that it will render your JavaScript according to Laravel Livewire Components (essentially a controller with state and a built-in set of API methods to instruct the DOM when to update). This keeps your code simpler while still allowing your pages to respond to user input in real-time. The kit also includes TailwindCSS for styling and the Flux UI component library for reusable interface elements.

Most of the frontend code lives in resources/views, while the backend logic for Livewire components is in app/Livewire. You’ll find reusable Blade components, Flux components, page-specific Livewire components, and partials all organized so you can easily modify or extend them.

Layouts and variants

The Livewire starter kit comes with two main layouts: sidebar (default) and header. You can switch between them by updating the Blade component used in resources/views/components/layouts/app.blade.php:

<x-layouts.app.header>

    <flux:main container>

        {{ $slot }}

    </flux:main>

</x-layouts.app.header>

Authentication pages (login, registration, and password reset) also include three layout options: simple, card, and split. Switching between them is just a matter of changing the Blade component in resources/views/components/layouts/auth.blade.php:

<x-layouts.auth.split>

    {{ $slot }}

</x-layouts.auth.split>

Like React and Vue, Livewire’s reusable components and modular layouts make it easy to experiment with different looks without having to rewrite your pages from scratch.

Conclusion

Laravel 12 starter kits give you a solid foundation, no matter which frontend you choose. React is ideal for full single-page apps, Vue is flexible and beginner-friendly, and Livewire keeps things mostly in PHP and Blade while still supporting dynamic, reactive interfaces. All three kits include reusable components, modular layouts, and built-in styling, making it easy to experiment with designs without having to rewrite pages. For those who really don’t like writing frontend code and have opted for Livewire, you can also add Laravel Echo and Reverb to start your own Websocket servers!

If you’re just starting with Laravel, there are plenty of beginner-friendly resources available. Hear from Laravel community members as they share their favorite recommendations.