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
  • Nuxt $fetch
  • Authentication
  • Nuxt Middleware
  • Laravel Middleware
• 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

1. composer install && yarn 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. 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).

1. 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

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 yarn install
5. 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="[email protected]"
        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

Examples

Route list

Demo

demo.mov

Links

• Nuxt 3
• Nuxt UI
• Tailwind CSS
• Laravel 11x

License