Laravel Breeze Nuxt3 – v1.0.0

Introduction

This project is a frontend implementation of Laravel Breeze using Nuxt 3. It provides a solid foundation to build fullstack applications with full authentication using Laravel Sanctum, already integrated via nuxt-sanctum.

Features

• Laravel 12 with Breeze (API stack)
• Nuxt 3 frontend with TypeScript
• Authentication via nuxt-sanctum
• Middleware: sanctum:auth and email-verified
• Breadcrumb support per page
• UI built with shadcn/ui
• Tailwind CSS and clean structure for scaling

---

Backend Setup (Laravel 12)

# Create the Laravel project
laravel new nuxt-backend

# Or using Laravel Sail
curl -s https://laravel.build/nuxt-backend | bash
cd nuxt-backend

# Install Breeze API stack
composer require laravel/breeze --dev
php artisan breeze:install api

# Run migrations
php artisan migrate

Update your .env file:

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000

Start the Laravel server:

php artisan serve
# or if using Sail
./vendor/bin/sail up

---

Frontend Setup (Nuxt)

1. Clone this repository.
2. Install dependencies using your preferred package manager (npm, yarn, or pnpm).
3. Copy the .env.example file to .env.
4. Set the NUXT_PUBLIC_BACKEND_URL pointing to your Laravel backend.
5. Start the Nuxt development server.

# Clone this repository
git clone https://github.com/happones/breeze-nuxt.git
cd breeze-nuxt

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

Copy the environment config and set the backend URL:

cp .env.example .env

.env:

NUXT_PUBLIC_SANCTUM_BASE_URL=http://localhost:8000

Run the dev server:

npm run dev

---

Authentication & Middleware

This project uses nuxt-sanctum for authentication.

Use the sanctum:auth middleware to protect pages for authenticated users.

Use the custom email-verified middleware for pages that require email verification.

definePageMeta({
  title: "Dashboard",
  middleware: ["sanctum:auth", "email-verified"],
});

• sanctum:auth: Protects pages for authenticated users only

• email-verified: Custom middleware to ensure user has a verified email

Example Page Meta with Middleware and Breadcrumbs

definePageMeta({
  title: "Dashboard",
  middleware: ["sanctum:auth", "email-verified"]
})

const breadcrumbs: BreadcrumbItem[] = [
  { title: "Dashboard", href: "/dashboard" }
]

UI Components

The UI is powered by shadcn/ui with Tailwind CSS.

This project uses shadcn/ui for building beautiful and accessible UI components with Tailwind CSS.

All components are tree-shakeable and customizable. You can generate components using:

npx shadcn-ui@latest add button

---

Production

To prepare for production:

• Build the application.
• Preview the build locally.
• Deploy to a platform of your choice (Vercel, Netlify, or a custom VPS).

Refer to the Nuxt deployment guide for more information.

---

Useful Links

• Laravel Breeze Documentation
• Laravel Sanctum Documentation
• Nuxt Documentation
• nuxt-sanctum
• shadcn/ui

License

This project is open-sourced software licensed under the MIT license.