Skip to content

Latest commit

 

History

History
212 lines (171 loc) · 8.64 KB

README.md

File metadata and controls

212 lines (171 loc) · 8.64 KB

preview

Laravel Nuxt Boilerplate

FOSSA Status GitHub Workflow Status CodeQL

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.

Features

  • 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.

Requirements

Installation

Standalone

  1. composer install && yarn install
  2. cp .env.example .env && php artisan key:generate && php artisan storage:link
  3. php artisan migrate && php artisan db:seed
  4. php artisan octane:install
  5. php artisan octane:start --watch --port=8000 --host=127.0.0.1
  6. yarn dev

Docker Deploy (Laravel Sail)

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).

  1. 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
  1. 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.

  1. sail up
  2. sail yarn install
  3. sail yarn dev

Read the full Laravel Sail documentation to get the best user experience

Upgrade

Standalone:

npx nuxi upgrade
composer update

Sail:

sail npx nuxi upgrade
sail composer update

Usage

Nuxt $fetch

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="[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"

Authentication

useAuthStore() has everything you need to work with authorization.

Data returned by useAuthStore:

  • logged: Boolean, whether the user is authorized
  • token: Cookie, sanctum token
  • user: User object, user stored in pinia store
  • logout: Function, remove local data and call API to remove token
  • fetchUser: Function, fetch user data

Nuxt Middleware

The following middleware is supported:

  • guest: unauthorized users
  • auth: authorized users
  • verified: users who have confirmed their email
  • role-user: users with the 'user' role
  • role-admin: users with the 'admin' role

Laravel Middleware

All built-in middleware from Laravel + middleware based on roles Spatie Laravel Permissions Middleware

Examples

Route list

routes

Demo

demo.mov

Links

License

FOSSA Status