Important
The main branch is scheduled for an update soon, which will include significant changes in the latest LaravelNuxt version. Notably, there will be integration with Nuxt UI 3 and Tailwind CSS 4, along with the introduction of a new fetch wrapper.
Please ensure your project is compatible with these updates before proceeding.
This warning helps users prepare for upcoming changes to avoid potential disruptions in their development workflow.
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 && 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/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 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 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"
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
