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.
- 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
$httpanduseHttp, which extend the capabilities of Nuxt's standard$fetchanduseFetch.
- 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
composer install && bun installcp .env.example .env && php artisan key:generate && php artisan storage:linkphp artisan migrate && php artisan db:seedphp artisan octane:installphp artisan octane:start --watch --port=8000 --host=127.0.0.1bun 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 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 upsail bun installsail bun dev
Read the full Laravel Sail documentation to get the best user experience
Standalone:
npx nuxi upgrade
composer updateSail:
sail npx nuxi upgrade
sail composer updateTo 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 originals:
onFetchinstead ofonRequestonFetchErrorinstead ofonRequestErroronFetchResponseinstead ofonResponseonFetchResponseErrorinstead 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);
} 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="[email protected]"
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"
useAuthStore() has everything you need to work with authorization.
Data returned by useAuthStore:
logged: Boolean, whether the user is authorizeduser: User object, user stored in pinia storelogout: Function, remove local data and call API to remove tokenfetchUser: Function, fetch user datahasRole: Function, checks the role
The following middleware is supported:
guest: unauthorized usersauth: authorized usersverified: users who have confirmed their emailrole-user: users with the 'user' rolerole-admin: users with the 'admin' role
All built-in middleware from Laravel + middleware based on roles Spatie Laravel Permissions Middleware
