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 11 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 based on TailwindCSS and HeadlessUI.
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
ofetch preset for working with Laravel API, which makes it possible use $fetch without having to resort to custom $fetch wrappers.

Requirements

PHP 8.2+ / Node 20+
Redis is required for the Throttling with Redis feature
Laravel Octane supports 2 operating modes: Swoole (php extension) or Roadrunner

Installation

Standalone

composer install && yarn 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
yarn 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/php83-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 yarn install
sail yarn 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

Nuxt $fetch

To work with the api, the default path is "/api/v1". All requests from Nuxt to the Laravel API can be executed without wrappers, as described in the Nuxt.js documentation. For example, the code for authorizing a user by email and password:

<script lang="ts" setup>
const router = useRouter();
const auth = useAuthStore();
const form = ref();
const state = reactive({
  email: "",
  password: "",
  remember: false,
});

const { refresh: onSubmit, status } = useFetch("login", {
  method: "POST",
  body: state,
  immediate: false,
  watch: false,
  async onResponse({ response }) {
    if (response?.status === 422) {
      form.value.setErrors(response._data?.errors);
    } else if (response._data?.ok) {
      auth.token = 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">
    <UFormGroup label="Email" name="email" required>
      <UInput
        v-model="state.email"
        placeholder="you@example.com"
        icon="i-heroicons-envelope"
        trailing
        type="email"
        autofocus
      />
    </UFormGroup>

    <UFormGroup label="Password" name="password" required>
      <UInput v-model="state.password" type="password" />
    </UFormGroup>

    <UTooltip text="for 1 month" :popper="{ placement: 'right' }">
      <UCheckbox v-model="state.remember" 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
token: Cookie, sanctum token
user: User object, user stored in pinia store
logout: Function, remove local data and call API to remove token
fetchUser: Function, fetch user data

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

k2so-dev/laravel-nuxt