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 10 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
- 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.
- 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
- clone repository
composer installcp .env.example .env && php artisan key:generate && php artisan storage:linkphp artisan migratephp artisan db:seedphp artisan octane:installphp artisan octane:start --watch --port=8000 --host=127.0.0.1yarn installyarn dev
Nuxt port is set in package.json scripts via cross-env
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:
const auth = useAuthStore();
const state = reactive({
email: "",
password: "",
});
const { data } = await useFetch("login", {
method: "POST",
body: state,
watch: false,
});
if (data.value?.ok) {
auth.token = data.value.token;
await auth.fetchUser();
await router.push("/");
}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
