Getting Started with Laravel 12 Starter Kits (React/Vue/Livewire)

Introduction

We want to help you start your new Laravel application easily. That’s why we offer starter kits. These kits give you a ready-made structure with routes, controllers, and views. They help you set up user registration and login quickly. The starter kits use Laravel Fortify for authentication.

You don’t have to use the starter kits if you don’t want to. You can also create your application from scratch by installing a fresh copy of Laravel. Either way, we are sure you will make something amazing!

Why use a Starter Kit?

• Before diving in, let’s clarify what these kits give you and why you might choose one:
• They scaffold a full authentication system (login/register/password reset/email verification) out of the box.
• They come pre‑wired with front‑end tooling (inertia, Vite, Tailwind CSS) so you spend less time wiring things.
• They allow you to pick your preferred front‑end stack (React/Vue/Livewire) and still leverage Laravel’s backend.
• If you don’t need one of these, you can still choose “None” and install your own (or use older kits like Breeze/Jetstream).

Choosing Which Kit: React vs Vue vs Livewire

Tip: If you are not very experienced with front-end frameworks and want a fast backend-driven UI, Livewire might be a better choice. If you want the full JavaScript ecosystem, go with React or Vue.

Step‑by‑Step: Installing a Starter Kit

Step 1: Install a Fresh Laravel Project

First, you need a new Laravel application. Open your terminal and run:

composer create-project laravel/laravel my-app

Replace my-app with your project name. This will create a new Laravel application with all the basic files.

Step 2: Go to Your Project Folder

cd my-app

This moves you into your project directory so you can start installing the starter kit.

Step 3: Choose a Starter Kit

Decide which starter kit you want to use:

• React Starter Kit – if you like React and want a SPA (Single Page App) experience.
• Vue Starter Kit – if you prefer Vue and want a SPA experience.
• Livewire Starter Kit – if you want to stay mostly in PHP/Blade and minimize JavaScript.

Step 4: Install the Starter Kit

Use Composer to install your chosen kit. For example:

• Livewire Starter Kit:

• composer require laravel/jetstream
  php artisan jetstream:install livewire

• React Starter Kit:

• composer require laravel/jetstream
  php artisan jetstream:install inertia --teams

• Vue Starter Kit:

• composer require laravel/jetstream
  php artisan jetstream:install inertia

Note: The --teams option is only needed if you want team features.

Step 5: Install NPM Packages

After installing the kit, install front-end dependencies using NPM (Node Package Manager):

npm install

Then compile the assets:

npm run dev

This will compile your CSS and JavaScript files so the front-end works properly.

Step 6: Set Up Your Database

Open the .env file in your project folder. Set these values according to your database:

DB_DATABASE=your_database_name
DB_USERNAME=your_db_username
DB_PASSWORD=your_db_password

Then run migrations:

php artisan migrate

This creates all the tables your app needs (users, teams, etc.).

Step 7: Start the Server

Run this command to start your Laravel app:

php artisan serve

Open your browser and go to:

http://127.0.0.1:8000

You should see your new Laravel app with the starter kit installed.

Step 8: Test User Registration and Login

• Click “Register” to create a new account.
• Log in with your account.
• All starter kits come with ready-to-use authentication.

Congratulations! You now have a fully working Laravel app with a starter kit. From here, you can start building your features.