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.
composer install && yarn install
cp .env.example .env && php artisan key:generate && php artisan storage:link
php artisan migrate && php artisan db:seed
php artisan octane:install
php artisan octane:start --watch --port=8000 --host=127.0.0.1
yarn 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 up
sail yarn install
sail yarn dev
Read the full Laravel Sail documentation to get the best user experience
Standalone:
npx nuxi upgrade
composer update
Sail:
sail npx nuxi upgrade
sail composer update
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 dataThe 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' roleAll built-in middleware from Laravel + middleware based on roles Spatie Laravel Permissions Middleware
https://github.com/k2so-dev/laravel-nuxt/assets/15279423/9b134491-1444-4323-a7a3-d87833dcdc67