This repository is an implementation of the Laravel Breeze application / authentication starter kit frontend in Nuxt3. All of the authentication boilerplate is already written for you - powered by Laravel Sanctum, allowing you to quickly begin pairing your beautiful Nuxt3 frontend with a powerful Laravel backend.
# Create the Laravel application...
laravel new nuxt-backend
# Or with sail
curl -s https://laravel.build/nuxt-backend | bash
cd new nuxt-backend
# Install Breeze and dependencies...
composer require laravel/breeze --dev
php artisan breeze:install api
Next, ensure that your application's APP_URL
and FRONTEND_URL
in .env
file
# App url
APP_URL=http://localhost:8000
# Or with sail
APP_URL=http://localhost
FRONTEND_URL=http://localhost:3000
After defining the appropriate environment variables, you may serve the Laravel application using the serve
Artisan command:
# Serve the application...
php artisan serve
# Or with sail
sail up
Clone this repository and install its dependencies with yarn install
or npm install
. Then, copy the .env.example
file to .env
and supply the URL of your backend:
NUXT_PUBLIC_BACKEND_URL=http://localhost:8000
# Or with sail
NUXT_PUBLIC_BACKEND_URL=http://localhost
Finally, run the application via yarn dev
or npm run dev
. The application will be available at http://localhost:3000
:
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install
Start the development server on http://localhost:3000
npm run dev
Build the application for production:
npm run build
Locally preview production build:
npm run preview
This Nuxt.js application contains a custom useAuth
Vue composable, designed to abstract all authentication logic away from your pages. In addition, the composable can be used to access the currently authenticated user:
<script setup>
const { logout, user } = useAuth({ middleware: 'auth' })
</script>
<template>
<p>{{ user?.name }}</p>
<button @click="logout">Sign out</button>
</template>
For convenience, Ziggy may be used to reference your Laravel application's named route URLs from your React application.
Check out the deployment documentation for more information.
Laravel Breeze Nuxt is open-sourced software licensed under the MIT license.