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
- 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.3.6 / 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
npx nuxi upgradecomposer update
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:
<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
