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 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.
- 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
composer install && yarn 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.1yarn 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/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 upsail yarn installsail yarn 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 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"
useAuthStore() has everything you need to work with authorization.
Data returned by useAuthStore:
logged: Boolean, whether the user is authorizedtoken: Cookie, sanctum tokenuser: User object, user stored in pinia storelogout: Function, remove local data and call API to remove tokenfetchUser: Function, fetch user data
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
