Laravel Breeze - Nuxt Edition

This repository is an implementation of the Laravel Breeze application / authentication starter kit frontend in Nuxt with Nuxt UI. All of the authentication boilerplate is already written for you - powered by Laravel Sanctum and nuxt-auth-sanctum module, allowing you to quickly begin pairing your beautiful Nuxt UI frontend with a powerful Laravel backend. As a bonus, this project also includes a nuxt-laravel-echo integration to work with Laravel Broadcasting.

Installation

This project requires a proper Laravel Breeze API template to work with. Follow the guide below to create a new project and link it with Nuxt frontend.

Laravel Breeze API

Easy way 🚀

You can always use pre-configured template to start working immediately - Breeze API or you can follow the steps below to create a new Laravel project and configure it manually.

Not easy way 📚

First, you will need follow one of the guides below:

• Create with Composer - Creating a Laravel Project
• Create with Docker - Docker Installation Using Sail

After you have your Laravel project ready, you can install Laravel Breeze, please refer to the official documentation.

💡 Note: Make sure to run all database migrations and check that the API is available at http://localhost:8000 or http://localhost:80 (when using Laravel Sail).

Configure existing Laravel project

If you already have a Laravel project and want to add Breeze w/ Sanctum to it, you can check this commit to see what files were added/changed and adjust your project accordingly: Add Laravel Breeze w/ Sanctum.

Nuxt Breeze

To start working with Nuxt frontend, you need to clone this repository and install dependencies:

git clone https://github.com/manchenkoff/breeze-nuxt

For dependencies you should use pnpm:

pnpm install

Configure your .env file:

NUXT_PUBLIC_SANCTUM_BASE_URL=http://localhost:8000 # or your Laravel API URL

Once configuration is done and you have your Laravel API running, you can start the Nuxt frontend:

pnpm dev

Development

Look at Nuxt docs and Nuxt UI docs to learn more about technologies used in this template.

Code Style and Linting

Run ESLint to check for issues in the code:

pnpm lint

Or automatically fix issues:

pnpm lint:fix

Start Server

Start the development server on http://localhost:3000:

pnpm dev

Production

Build the application for production:

pnpm build

Locally preview production build:

pnpm preview