Skip to content
/ laravel-nuxt Public template

Laravel and Nuxt.js boilerplate designed for development with maximum API performance, ready-made authorization methods, image uploading with optimization, user roles, device management

License

Notifications You must be signed in to change notification settings

k2so-dev/laravel-nuxt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

97 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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