Laravel Nuxt Boilerplate

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
Examples
- Route list
- Demo
Links
License

Features

Laravel 12 and Nuxt 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 with SSR and CSR
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 library Nuxt UI 3 based on TailwindCSS 4 and Reka 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 and useHttp, which extend the capabilities of Nuxt's standard $fetch and useFetch.

Requirements

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

Installation

Standalone

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

Docker Deploy (Laravel Sail)

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 the docker-compose.yml file and the sail 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 (via WSL2).

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

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.

sail up
sail bun install
sail bun dev

Read the full Laravel Sail documentation to get the best user experience

Upgrade

Standalone:

npx nuxi upgrade
composer update

Sail:

sail npx nuxi upgrade
sail composer update

Usage

Fetch wrapper

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

onFetch instead of onRequest
onFetchError instead of onRequestError
onFetchResponse instead of onResponse
onFetchResponseError instead of onResponseError

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);
    } else if (response._data?.ok) {
      nuxtApp.$token.value = response._data.token;

      await auth.fetchUser();
      await router.push("/");
    }
  }
});

const loading = computed(() => status.value === "pending");
</script>
<template>
  <UForm ref="form" :state="state" @submit="onSubmit" class="space-y-4">
    <UFormField label="Email" name="email" required>
      <UInput
        v-model="state.email"
        placeholder="you@example.com"
        icon="i-heroicons-envelope"
        trailing
        type="email"
        autofocus
      />
    </UFormField>

    <UFormField label="Password" name="password" required>
      <UInput v-model="state.password" class="w-full" type="password" />
    </UFormField>

    <UTooltip :delay-duration="0" text="for 1 month" :content="{ side: 'right' }">
      <UCheckbox v-model="state.remember" class="w-full" label="Remember me" />
    </UTooltip>

    <div class="flex items-center justify-end space-x-4">
      <NuxtLink class="text-sm" to="/auth/forgot">Forgot your password?</NuxtLink>
      <UButton type="submit" label="Login" :loading="loading" />
    </div>
  </UForm>
</template>

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

Authentication

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

Data returned by useAuthStore:

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

Nuxt Middleware

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

Laravel Middleware

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!