Repository files navigation

The goal of the project is to create a template for development on Laravel and Nuxt with maximum API performance, ready-made authorization methods, image uploading with optimization and ready-made user roles.

• Features
• Requirements
• Installation
  • Standalone
  • Docker Deploy (Laravel Sail)
• Upgrade
• Usage
  • Fetch wrapper
  • Authentication
  • Nuxt Middleware
  • Laravel Middleware
• Examples
  • Route list
  • Demo
• Links
• License

• Laravel 12 andNuxt 3
• Laravel Octane supercharges your application's performance by serving your application using high-powered application servers.
• Laravel Telescope provides insight into the requests coming into your application, exceptions, log entries, database queries, queued jobs, mail, notifications, cache operations, scheduled tasks, variable dumps, and more.
• Laravel Sanctum Token-based authorization is compatible withSSR andCSR
• Laravel Socialite OAuth providers
• Laravel Sail Light-weight command-line interface for interacting with Laravel's default Docker development environment.
• Spatie Laravel Permissions This package allows you to manage user permissions and roles in a database.
• UI libraryNuxt UI 3 based onTailwindCSS 4 andReka UI.
• Pinia The intuitive store for Vue.js
• Integrated pages: login, registration, password recovery, email confirmation, account information update, password change.
• Temporary uploads with cropping and optimization of images.
• Device management
• Enhanced Fetch Wrappers : Utilizes$http anduseHttp, which extend the capabilities ofNuxt's standard$fetch anduseFetch.

• PHP 8.3+ / Node 20+
• Redis is required for theThrottling with Redis feature
• Laravel Octane supports 3 operating modes: Swoole (php extension), Roadrunner and FrankenPHP

1. composer install && bun install
2. cp .env.example .env && php artisan key:generate && php artisan storage:link
3. php artisan migrate && php artisan db:seed
4. php artisan octane:install
5. php artisan octane:start --watch --port=8000 --host=127.0.0.1
6. bun dev

Laravel Sail is a light-weight command-line interface for interacting with Laravel's default Docker development environment. Sail provides a great starting point for building a Laravel application using PHP, MySQL, and Redis without requiring prior Docker experience.

At its heart, Sail is thedocker-compose.yml file and thesail script that is stored at the root of your project. The sail script provides a CLI with convenient methods for interacting with the Docker containers defined by the docker-compose.yml file.

Laravel Sail is supported on macOS, Linux, and Windows (viaWSL2).

1. Installing Composer Dependencies

docker run --rm \    -u"$(id -u):$(id -g)" \    -v"$(pwd):/var/www/html" \    -w /var/www/html \    laravelsail/php84-composer:latest \    composer install --ignore-platform-reqs

2. Configuring A Shell Alias (Optional)

alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)'

To make sure this is always available, you may add this to your shell configuration file in your home directory, such as ~/.zshrc or ~/.bashrc, and then restart your shell.

3. sail up
4. sail bun install
5. sail bun dev

Read the fullLaravel Sail documentation to get the best user experience

Standalone:

npx nuxi upgradecomposer update

Sail:

sail npx nuxi upgradesail composer update

To integrate with the API, enhanced$http anduseHttp wrappers are used, expanding the functionality of Nuxt's standard$fetch anduseFetch. The$http wrapper includes custom interceptors to replace the originals:

• onFetch instead ofonRequest
• onFetchError instead ofonRequestError
• onFetchResponse instead ofonResponse
• onFetchResponseError instead ofonResponseError

Additionally,$http predefines a base url, authorization headers, and proxy IP for convenient API work in SSR mode.For example, the code for authorizing a user by email and password:

<script lang="ts" setup>const nuxtApp=useNuxtApp();const router=useRouter();const auth=useAuthStore();const form=templateRef("form");const state=reactive({  email:"",  password:"",  remember:false,});const {refresh: onSubmit, status }=useHttp("login", {  method:"POST",  body:state,  immediate:false,  watch:false,async onFetchResponse({response }) {if (response?.status===422) {form.value.setErrors(response._data?.errors);    }elseif (response._data?.ok) {nuxtApp.$token.value=response._data.token;awaitauth.fetchUser();awaitrouter.push("/");    }  }});const loading=computed(()=>status.value==="pending");</script><template>  <UFormref="form":state="state"@submit="onSubmit"class="space-y-4">    <UFormFieldlabel="Email"name="email"required>      <UInputv-model="state.email"placeholder="you@example.com"icon="i-heroicons-envelope"trailingtype="email"autofocus      />    </UFormField>    <UFormFieldlabel="Password"name="password"required>      <UInputv-model="state.password"class="w-full"type="password" />    </UFormField>    <UTooltip:delay-duration="0"text="for 1 month":content="{ side: 'right' }">      <UCheckboxv-model="state.remember"class="w-full"label="Remember me" />    </UTooltip>    <divclass="flex items-center justify-end space-x-4">      <NuxtLinkclass="text-sm"to="/auth/forgot">Forgot your password?</NuxtLink>      <UButtontype="submit"label="Login":loading="loading" />    </div>  </UForm></template>

In this example, a POST request will be made to the url"/api/v1/login"

useAuthStore() has everything you need to work with authorization.

Data returned byuseAuthStore:

• logged: Boolean, whether the user is authorized
• user: User object, user stored in pinia store
• logout: Function, remove local data and call API to remove token
• fetchUser: Function, fetch user data
• hasRole: Function, checks the role

The following middleware is supported:

• guest: unauthorized users
• auth: authorized users
• verified: users who have confirmed their email
• role-user: users with the 'user' role
• role-admin: users with the 'admin' role

All built-in middleware from Laravel + middleware based on rolesSpatie Laravel Permissions Middleware

• Nuxt 3
• Nuxt UI 3
• Tailwind CSS 4
• Laravel 12x